Das Plugin unterstützt die Anzeige einer Sofortvorschau der Treffer schon während der Eingabe eines Suchbegriffs.
Um diese Funktionalität zu nutzen, muss dem Plugin mitgeteilt werden, welche Felder „Suchfelder sind“ bzw. bei welchen Feldern die Suche getriggert werden soll. Die Anpassungen hängen vom verwendeten Template ab.
Allgemein muss für die Sofortvorschau das Eingabefeld (bzw. die Eingabefelder) für die Suche mit dem Plugin verknüpft werden, indem das Eingabefeld (HTML-Element <input>) um die CSS-Klasse
coe-fuzzy-search-box
erweitert wird, d. h. dem Input-Feld (Suchfeld) wird diese zusätzliche CSS-Klasse zugewiesen. Weitere Schritte sind nicht erforderlich. In der Regel wird beim Standardtemplate xt_responsive hierfür lediglich die Suchbox, d. h. die HTML Datei/das Template
box_search.html
ergänzt. Nachdem die Änderungen im Template vorgenommen wurden, kann das Plugin konfiguriert und aktiviert werden.
Besonderheiten in den Templates ew-Templates (xt 6.4+):
Da die Templates ew_adventury und ew_evelations eigene Such-Popups mit mehreren Sucheingabe-Feldern im HTML enthalten, müssen hier einige weitere Anpassungen vorgenommen werden.
Abhängig von der Plugin-Konfiguration der Fuzzy-Search (mit Popup oder ohne Popup) muss der Code des Templates entsprechend angepasst werden.
Für die Standardtemplates (ohne Customizing) haben wir die entsprechenden Vorlagen im Order
coe_fuzzy_search/templates/xt…
hinterlegt.
Sofern Ihr Template customized wurde orientieren Sie bzw. Ihr Administrator sich bitte an diesen Vorlagen.
Siehe hierzu auch Erläuterungen: Einbindung in ew-Templates
Achtung – wichtiger Hinweis:
Theoretisch kann das Plugin mit jedem beliebigen Eingabefeld verknüpft werden. Um eine korrekte Funktionsweise sicherzustellen, darf auf einer Seite Ihres Webshops jedoch nur genau ein Element mit der Klasse coe-fuzzy-search-box vorkommen. Sollte eine Seite potenziell mehrere Felder enthalten, die mit dem Plugin verknüpft sein könnten –beispielsweise die „Suche-Seite“ mit einem Suchfeld und der permanent vorhanden Suchbox – so muss beim Laden der entsprechenden Seite die Klasse für ein Element entfernt werden. Ein Beispiel hierfür finden Sie weiter unten.
Nachfolgend finden Sie Beispiele wie die Verknüpfung des Such-Eingabefeldes erfolgt.