Live Search & Autocomplete — Documentatie

Installatie

Vereisten

Magento 2.4.x (Open Source of Adobe Commerce), PHP 8.1–8.5. Werkt met elke zoekmachine die Magento ondersteunt (OpenSearch, Elasticsearch of MySQL). Compatibel met Hyvä- en Luma-thema's. Vereist de gratis codingrow/module-core. Geen AI-provider of API-sleutel nodig — de module is puur catalogus zoeken.

Setup

Installeer via Composer, schakel de module in en voer de standaard upgrade/compile uit:

composer require codingrow/module-live-search-autocomplete
bin/magento module:enable Codingrow_LiveSearchAutocomplete
bin/magento setup:upgrade && bin/magento setup:di:compile
bin/magento cache:flush

Ga vervolgens naar Winkels → Configuratie → Codingrow → Live Search & Autocomplete, plak uw licentiesleutel, stel Inschakelen = Ja in en leeg de cache.

Configuratie

Alle opties bevinden zich onder Winkels → Configuratie → Codingrow → Live Search & Autocomplete.

Verwijderen

Stel Inschakelen = Nee in om het uit te schakelen zonder iets te verwijderen, of verwijder de module volledig:

bin/magento module:disable Codingrow_LiveSearchAutocomplete
composer remove codingrow/module-live-search-autocomplete
bin/magento setup:upgrade && bin/magento cache:flush

Zoeken & synoniemen

Hoe het werkt

Een klein, thema-onafhankelijk script koppelt zich aan uw bestaande zoekveld (het detecteert Hyvä- en Luma-zoekbalken automatisch). Terwijl de klant typt, debounced het de invoer en vraagt het de module om bijpassende producten, waarna het een dropdown toont met een miniatuur, naam, prijs en eventuele korting voor elk resultaat, plus een link "alle resultaten bekijken" naar de volledige zoekpagina. Elk resultaat linkt rechtstreeks naar de productpagina. Resultaten respecteren productzichtbaarheid, voorraad en store-scope.

Prestaties

Suggesties worden opgehaald uit de eigen geïndexeerde zoekmachine van Magento — dezelfde engine die de resultatenpagina aandrijft (OpenSearch, Elasticsearch of MySQL) — via het native quick_search_container-verzoek. Omdat de matching wordt gedaan door de index en niet door het scannen van de database, blijft de responstijd laag en groeit deze niet mee met de catalogusgrootte. Op een live winkel met 67.000 producten komen suggesties in ongeveer een seconde terug en blijven ze vlak naarmate de catalogus groeit.

Uitgebreid zoeken op velden

Of de autocomplete alleen de naam/SKU doorzoekt of ook de beschrijving en andere velden, wordt door Magento zelf bepaald, per attribuut — niet door een moduleschakelaar. Onder Winkels → Attributen → Product heeft elk attribuut een vlag "Gebruiken bij zoeken" en een zoekgewicht. Standaard zijn name, sku, description en short_description doorzoekbaar, dus de autocomplete doorzoekt ze al. Om een veld op te nemen of uit te sluiten, of om er een zwaarder gewicht aan te geven, wijzigt u de zoekinstellingen van dat attribuut en herindexeert u — de autocomplete volgt dezelfde configuratie als de resultatenpagina en blijft snel ongeacht de catalogusgrootte.

Native Search Synonyms

De module gebruikt altijd de native Search Synonyms van Magento. Voeg ze toe of bewerk ze vanuit de standaard admin op Marketing → SEO & Search → Search Synonyms; de autocomplete pikt ze onmiddellijk op. Wanneer een zoekopdracht niets oplevert, breidt de module deze uit met de bijpassende synoniemen en probeert het opnieuw.

AI Personal Shopper-synoniemen

Als de Codingrow AI Personal Shopper-module ook is geïnstalleerd (optioneel, soft dependency), gebruikt de autocomplete daarnaast diens zelflerende synoniemenregister — de regionale, dialect- en verkeerd gespelde termen die de assistent uit echte gesprekken heeft geleerd. Hierdoor komen zelfs "verkeerde" zoekopdrachten overeen met de juiste producten. Schakel het in met AI Personal Shopper-synoniemen gebruiken = Ja. Zonder die module werkt de autocomplete perfect op de native synoniemen alleen.

Gebruik

Hoe het verschijnt

De dropdown wordt onder uw bestaande zoekbalk geïnjecteerd en zo opgemaakt dat hij uw thema niet in de weg zit. Elke rij toont de productminiatuur (indien ingeschakeld), de naam en de prijs met eventuele korting; de accentkleur (prijzen en de link "alle resultaten bekijken") is configureerbaar. Toetsenbordnavigatie (pijltjestoetsen en Enter) en mobiele lay-out worden automatisch afgehandeld.

Vaste zoekbalk

Maak van de winkelzoekfunctie een compacte, altijd zichtbare kopbalk: zodra de klant naar beneden scrolt, plakt een smalle balk bovenaan met het winkellogo, het menu, de account- en winkelwagenlinks en — vooral — het zoekveld met dezelfde live-autoaanvulling. Zoeken blijft op elke pagina binnen handbereik, zoals grote marktplaatsen dat doen. Thema-onafhankelijk: werkt op Hyva en Luma en hergebruikt de native zoekactie, dus verzenden en autoaanvulling gedragen zich precies als de normale zoekfunctie.

Op desktop is de balk een enkele rij. Op mobiel overschrijdt hij nooit twee rijen — het hamburgermenu, logo, account en winkelwagen op de eerste rij, het zoekveld op de tweede — zo past hij op kleine schermen zonder de inhoud naar beneden te duwen. Hij verschijnt zodra de klant een instelbare scroldrempel passeert en verbergt zich weer bovenaan.

Schakel hem in onder Stores → Configuration → Codingrow → Live Search & Autocomplete → Appearance met Sticky search bar = Yes (met een optionele scroldrempel in pixels). De balk biedt ook een plek voor de AI-zoekknop van de module AI Personal Shopper, indien geinstalleerd.

De sticky balk en wat hij niet mag bedekken

Met de sticky zoekbalk aan verschijnt bovenaan het scherm een compacte balk zodra de klant voorbij de drempel scrolt. Omdat hij vastzit, bedekt hij wat eronder komt: op een productpagina is dat meestal de titel, de eerste regel van het koopblok dat het thema in beeld houdt. En die zou de hele pagina lang bedekt blijven, niet alleen in het voorbijgaan.

Keep pinned content clear of the sticky bar (standaard aan) lost dit op: de balk publiceert zijn gemeten hoogte in de CSS-eigenschap --crls-sticky-h op het <html>-element — 0px zolang hij verborgen is — en alles wat bovenaan verankerd is zakt precies zoveel, en keert terug zodra de balk verdwijnt. Ook ankerlinks komen eronder uit. De hoogte wordt gemeten, nooit hard gecodeerd: ongeveer 57px op desktop, ongeveer 107px onder 768px, waar het zoekveld op een eigen regel komt.

Elementen die in een container zitten die echt scrollt blijven ongemoeid: ze zijn aan die container verankerd, niet aan de viewport. Je eigen templates kunnen dezelfde eigenschap lezen: top: calc(1.5rem + var(--crls-sticky-h, 0px)), waarvan de fallback de oorspronkelijke afstand behoudt waar de module niet is geïnstalleerd.

Licentie

De module gebruikt een licentie per domein (een sleutel voor één module, of een Codingrow-abonnementssleutel die elke Codingrow-module ontgrendelt). De sleutel wordt lokaal geverifieerd: het vertraagt de storefront nooit en stelt uw gegevens nooit bloot. De autocomplete verschijnt niet zonder een geldige licentie. Je licentie dekt de huidige versie plus 1 jaar updates en support; je kunt de gedekte versies voor altijd blijven gebruiken en de support (−35%) verlengen om naar nieuwere versies te upgraden.

Probleemoplossing