De nieuwe Zoekfunctie in Elementor 3.23

Op zoek naar een nieuwe zoekfunctie in Elementor?

Ongeveer een week geleden is de nieuwe versie van Elementor Pro live gegaan. En wanneer je een gebruiker van Elementor Pro bent, dan heeft Elementor 3.23 wel iets heel leuks en nieuws te bieden

Tot voor kort was de zoekfunctie in Elementor vrij standaard. Een veld wat je ergens op je pagina kan plaatsen, en waarmee je eenvoudig kan zoeken binnen Elementor. Maar een dergelijke zoek functie is toch wel wat ‘verouderd’. We zijn er inmiddels aan gewend, dat een zoekfuncties heel wat meer kunnen, zoals bijvoorbeeld via ‘autocomplete’ een aantal suggesties geven met betrekking tot wat je wilt zoeken.

Wat wordt er beter?

Met Elementor Pro 3.23 wordt er een compleet nieuwe zoekfunctie geïntroduceerd. Enkele verbeteringen ten opzichte van de oude zoekfunctie zijn:

• Autocomplete – Tijdens het intikken wordt er al gezocht naar enkele resultaten, die getoond worden.
• Live result – Het template voor de manier waarop de ‘autocomplete’ resultaten getoond kunnen worden is helemaal instelbaar.
• Instelbare submit-trigger: Je kan aangeven of er door een klik, een enter of door één van beide de zoekactie gestart dient te worden.
• Je kan opgeven waarop gezocht moet worden. Dus producten, blogposts, pagina’s…
• Binnen dit zoekresultaat kan je filteren op taxonomieën of schrijvers.
• Sorteervolgorde is instelbaar.

Laten we enkele van deze punten eens stuk voor stuk bekijken.

Autocomplete

Wanneer je Autocomplete aanzet, dan zal de zoekfunctie na het intikken van de eerste drie letters alvast op zoek gaan naar mogelijke resultaten. Naarmate je meer intikt, zullen deze resultaten verder worden verfijnd. Om deze functie te gebruiken, zal je ook ‘live result’ moeten instellen.

Live Result

Live result toont je de eerste resultaten die matchen met wat jij hebt ingetikt. In veel gevallen kan je door op één van de ‘live results’ te klikken al direct naar de gezochte pagina gaan. Staat het er niet tussen, dan kan je gewoon op de ‘zoek knop’ klikken en wordt de ‘Search Result Template’ (Dit template moet je wel definiëren in the Theme Editor) getoond met alle resultaten.

Om het live result te tonen zal je in de Theme Editor een ‘loop item’ template aan moeten maken.

Instelbare submit trigger

Wanneer wil je, dat iemand de daadwerkelijke zoek actie start? Bij het klikken op de ‘Zoek’ knop? Of bij het intoetsen van de ‘Enter’ knop? Zelf verwacht ik als ik een zoekdialoog invul, dat beide zal werken. Dit kan je hier dan ook instellen.

Opgeven waarop gezocht moet worden

Vaak wil je niet, dat een zoekfunctie letterlijk alles teruggeeft, waarop gezocht wordt. Je wilt bijvoorbeeld binnen de winkelpagina’s van je site op producten zoeken, binnen de blog op blogposts. Dit is allemaal instelbaar via ‘code snippets‘, maar dan moet je wel code gaan schrijven. Wil je dat niet, dan kan je via de nieuwe zoekfunctie in Elementor Pro dit gewoon met een enkele klik instellen.

Wees je er wel van bewust, dat het filteren via een code-snippet meer mogelijkheden biedt. Gebruik je de nieuwe zoekfunctie, dan kan je maar op één post-type zoeken. Dus bijvoorbeeld ‘berichten’ of ‘producten’, maar niet op allebei. Filter je via een code snippet heb je meer mogelijkheden, maar het filteren via code snippets werkt niet via deze nieuwe zoekfunctie.

Wat wel werkt is het uitsluiten van specifieke taxonomieën of auteurs. Nu zie ik -omdat dit filter niet door de bezoeker aangepast kan worden- niet het nut van ‘zoeken op gebruiker’, maar op een specifieke taxonomie kan wel handig zijn.

Daarnaast kan je het zoekresultaat beperken op datum (Alles, of afgelopen week, maand, kwartaal, jaar) en bepalen op welk veld gesorteerd moet worden.

Maar hoe kunnen we deze nieuwe zoekfunctie gebruiken?

Het heeft mij zelf enige hoofdbrekens gekost om deze nieuwe zoekfunctie aan de praat te krijgen. En voor de nieuwsgierigen, hij is nog niet op deze site geïmplementeerd, omdat ik juist wil dat bezoekers over meerdere, maar niet alle post types kunnen zoeken. Is dit voor jou geen beperking, dan is het niet voldoende om de laatste versie van Elementor Pro 3.23 te hebben. Er is nog een aantal andere regels waar aan voldaan moet worden.

Activeren van de nieuwe widget

En om dat te doen, ga je onder ‘Elementor->Instellingen’ naar het Tabblad ‘Functies’.

Hier moet je de volgende onderdelen actief hebben:

• Flexbox container
• Geneste Elementen
• Search

Wanneer je de oude ‘search’ widget al ergens gebruikte, zal je deze eerst uit een template moeten verwijderen, en daarna opnieuw de search widget plaatsen. De oude search widget is hierna ook niet meer beschikbaar.

Loopitem aanmaken

Sla je template met de nieuwe search widget op en ga naar terug naar het hoofdscherm van je Theme Builder. Daar kies je voor ‘Loop Item’ en maak je een nieuw Loop Item aan. Dit is dus het beeld wat getoond gaat worden, wanneer de ‘live results’ getoond worden. In de eenvoudigste vorm is het gewoon een ‘koptekst’ widget met de titel van de post, maar voor producten kan je dit eventueel verrijken met een (kleine) productafbeelding, de prijs en/of een ‘sterrenwaardering’ (als je product reviews gebruikt).

Nieuwe widget instellen

Sla je loopitem op en ga terug naar je template met de widget.

De instellingen hierboven zijn de instellingen voor het zoekveld. Alles is hier vrij standaard, maar vergeet niet om ‘Autocomplete’ op ‘Aan’ (Show) te zetten, anders gaat het niet werken.

De volgende sectie (hierboven) behoeft iets meer toelichting. Wanneer je deze uitklapt zal je bovendien nog niet alle velden zien, die je in bovenstaand voorbeeld ziet. Je begint met ‘Live Results‘ op ‘Show’ te zetten. Vervolgens kies je het template voor het Loop item wat je zo juist hebt gemaakt. Omdat ik van logische namen houd, had ik het mijne ‘Product Loop Search’ genoemd. Scheelt je een hoop in het nadenken hoe het template ook al weer heette.

Onder ‘minimum search characters‘ vul ik in na het intikken van de tekens de ‘live search’ moet beginnen. Zelf denk ik dat 3 een goed aantal is. Minder beslist niet, want bij het intikken wordt bij iedere toetsaanslag een bestaande zoekopdracht afgebroken en een nieuwe gelanceerd. Voor drie tekens zal een zoekopdracht slechts zelden het gewenste resultaat geven. Heb je een groot productaanbod of een groot aantal blogs, stel dan een groter aantal tekens in. Het zal de performance van de zoekopdrachten ten goede komen.

Onder Columns geef je aan hoeveel resultaat kolommen naast elkaar komen te staan. Zelf vind ik ‘1’ wel overzichtelijk, maar 2 of 3 is ook acceptabel. Items geeft het maximale aantal items aan wat via de ‘Live results’ gevonden kan worden, zijn er meer resultaten zal de bezoeker via de ‘Zoek’ knop naar een volledige pagina toe moeten gaan.

Let er ook op, dat voor het mooie het goed is, dat ‘Items’ deelbaar is door ‘Columns’. Anders krijg je standaard enkele lege ‘cellen’ in je zoekresultaat.

Equal Height zorgt ervoor, dat elk item in het resultaat even hoog is. Dat is spuuglelijk wanneer er één resultaat met een wat lange titel is, wanneer je ‘Columns’ op 1 hebt staan. Je krijgt dan enorm veel witruimte onder de producten die niet zo’n lange naam hebben.

De rest spreekt eigenlijk voor zich, dus gaan we door naar de volgende sectie.

In het bovenstaande deel kies ik mijn gegevensbron (Products in het voorbeeld) en onder ‘Include’ en ‘Exclude’ kan ik verder filteren binnen die bron. Met ‘Date’, ‘Order by’ en ‘Order’ kan ik de selectie op datum beperken en sorteren.

Een derde sectie die nog belangrijk is is de sectie ‘Results’ onder de tab ‘Stijl’. Omdat dit een vrij grote sectie is, en niet alles hier belangrijk om te bespreken is, is onderstaande afbeelding slechts een deel van de totale sectie.

Wanneer je voor een resultaat in meerdere kolommen kiest is dit onderdeel heel belangrijk om goed in te stellen. Standaard is de box waarin het resultaat wordt getoond net zo breed als het zoekveld zelf. Dat is voor één kolom vaak acceptabel, maar bij twee kolommen of meer niet. Met deze vijf instellingen kan je dit aanpassen aan jouw behoeften. Er is geen ‘juiste’ of ‘onjuiste’ manier, want dat is hoofdzakelijk afhankelijk van jouw ‘Loop Item template’.

Algemene indruk

Persoonlijk vind ik de nieuwe zoekfunctie in Elementor een grote verbetering ten opzichte van de oude functie. Sinds Elementor 3.23 heb je dus geen externe plugins meer nodig om ‘live zoekresultaten’ te krijgen. Wat jammer is, is dat deze nieuwe zoekfunctie in Elementor niet overweg kan met meerdere post types waarbinnen gezocht kan worden, maar er zijn al meerdere verzoeken om dit aan te passen. Lees jij dit artikel nadat er een nieuwere versie van Elementor 3.23 is uitgekomen, controleer dan eerst de mogelijkheden.