Erstellen Sie Ihr eigenes Omnisearch-Design

Was ist zu beachten, wenn man ein Omnisearch-Design von Grund auf erstellt?

Überlagerungsstruktur

Wenn Omnisearch gestartet wird, erstellt es ein Element mit der Klasse clerk-omnisearch-overlay und wird in den unteren Teil des Bodys injiziert. Dies ist der Ort, an dem wir das Design einfügen werden. Da wir das Eingabeelement als Teil des Designs haben, brauchen wir eine strukturelle Anforderung, um sicherzustellen, dass wir das Eingabeelement nicht bei jedem Laden neu rendern. Die Struktur sollte unterhalb des Overlays wie folgt aussehen:

<div>
    <input type="text" id="clerk-omnisearch-input"/>

    <div id="clerk-omnisearch-content">
        Inhalt!
   </div>

</div>

Eingabefeld

Um das Eingabefeld zu finden, muss es den folgenden Bezeichner “clerk-omnisearch-input” haben. Sobald das Trigger-Element ausgelöst wurde, verschieben wir den Cursor-Fokus auf dieses Element und fügen ihm eine beliebige Abfrage hinzu, damit die Benutzererfahrung einigermaßen nahtlos bleibt.

Inhalt Wrapper

Der Content Wrapper ist der Ort, an dem das meiste passiert. Der Wrapper um ihn herum muss den Bezeichner clerk-omnisearch-content haben. Hier sollten die Facetten, die Schieberegler und alles andere, was nicht das Eingabefeld ist, untergebracht werden.

Klassen und ihre Funktionen

Überblick

Durch Hinzufügen bestimmter Klassen zu Elementen kann der Entwurf um Funktionalitäten erweitert werden.

	Klassenname	Funktionalität
Schließen-Schaltfläche	`clerk-omnisearch-close`	Fügt einen Klick-Listener zu allen vorhandenen Schließen-Schaltflächen hinzu.
Sortier-Dropdown	`clerk-omnisearch-sort`	Findet Sortier-Dropdowns und fügt ihnen Listener hinzu.
Search Facet	`clerk-facet-search`	Wenn eine Facettensuche vorhanden ist, erstellt einen Listener und versteckt Facetten, die nicht mit der Abfrage übereinstimmen.
Full Clear	`clerk-omnisearch-full-reset`	Elemente mit dieser Klasse deselektieren alle Facetten und löschen die Abfrage, wenn sie aktiviert werden.
Facets Clear	`clerk-omnisearch-facet-full-reset`	Elemente mit dieser Klasse müssen alle Facetten abwählen, wenn sie aktiviert werden.
Group Clear	`clerk-omnisearch-facet-group-reset`	Elemente mit dieser Klasse müssen alle Elemente innerhalb der Gruppe deselektieren, wenn sie gedrückt werden.
Facet Clear	`clerk-omnisearch-facet-reset`	Elemente mit dieser Klasse müssen ein einzelnes Element mit dem angegebenen Gruppe/Wert-Attributpaar abwählen.
Facet Click	`clerk-facet`	Elemente mit dieser Klasse werden als auswählbare Facette behandelt.

Details

Schaltfläche schließen

Wenn die Klasse clerk-omnisearch-close an ein Element innerhalb des Designs angehängt wird, wird dieses Element das Overlay ausblenden.

Sortieren

Um ein sortierendes Element im Entwurf zu erhalten, fügen Sie die Klasse clerk-omnisearch-sort zu dem auswählenden Element hinzu, z.B. einem Dropdown. Um zu funktionieren, muss das Element wie folgt aussehen: value:[desc|asc], also der Wert, den wir sortieren wollen, mit einem Doppelpunkt und dann entweder desc oder asc. Optional können Sie ein “data-sort-type”-Attribut hinzufügen, wenn Sie möchten, dass es Kategorien oder Seiten sortiert.

Suchfacette

Die Klasse clerk-facet-search prüft, wenn sie in einer Webseite vorhanden ist, auf das Vorhandensein von Facetten-Suchtelementen. Facettensuchen bieten eine Möglichkeit für Benutzer, in den Facetten zu suchen. Damit sie funktioniert, muss das Element einen String-Wert haben.

Vollständig löschen

Elemente mit der Klasse clerk-omnisearch-full-reset löschen beim Anklicken alle ausgewählten Facetten und setzen die Abfrage zurück.

Facetten löschen

Elemente mit der Klasse “clerk-omnisearch-facet-full-reset” heben bei Aktivierung die Auswahl aller aktiven Facetten auf. Dies würde typischerweise auf einer Schaltfläche im Stil von “Alle löschen” innerhalb einer Gruppe von Facetten zu sehen sein, so dass Benutzer ihre ausgewählten Filter mit einer einfachen Aktion zurücksetzen können.

Gruppe löschen

Um die Möglichkeit zu bieten, eine ganze Gruppe von Facetten abzuwählen, kann einem Element die Klasse “clerk-omnisearch-facet-group-reset” zugewiesen werden. Sobald das Element aktiviert (z.B. angeklickt) wird, werden alle Elemente innerhalb seiner Gruppe abgewählt und die Facettengruppe wird zurückgesetzt. Damit dies funktioniert, muss das Element die Gruppe, die wir löschen wollen, als Attribut mit dem Namen “data-facet-group” haben.

Facette löschen

Diese Klasse ist für Szenarien gedacht, in denen es notwendig ist, eine einzelne Facette abzuwählen. Ein Element mit der Klasse “clerk-omnisearch-facet-reset” kann mit einer bestimmten Facette in einer Gruppe assoziiert werden, indem man ihm sowohl eine “data-facet-group” als auch einen “data-facet-value” gibt. Bei der Aktivierung wird nur die zugehörige Facette basierend auf dem angegebenen Gruppe/Wert-Attributpaar abgewählt, während andere ausgewählte Facetten unverändert bleiben.

Facettenklick

Alle Facetten sollten eine Klasse clerk-facet mit den Attributen data-facet-group und data-facet-value haben, damit wir wissen, was der Kunde drückt.