Omnisearch

• Live-Ergebnisse werden Ihren Besuchern während der Eingabe angezeigt und umfassen Produkte, Kategorien und Seiten.
• Sortierung und Filterung: damit Ihre Besucher ihre Suche auf eine intuitive und einfache Weise verfeinern können.
• Einfach zu integrieren auf Ihrer Website mit einer unserer großartigen Startvorlagen.
• Entspricht Ihrer Marke durch Änderung weniger Standard-Einstellungen wie Logo, Schriftarten, Farben und mehr.
• Vollständig anpassbar mit HTML, CSS und Liquid für Entwickler.

Einstieg #

Omnisearch besteht aus einem anpassbaren Design für das Erscheinungsbild und einem Element-Block, mit dem es auf Ihrer Website installiert werden kann.

Ein Design erstellen #

Dies geschieht in Search > Designs > New Design.

Wählen Sie den Typ Omnisearch, wählen Sie ein Startdesign und geben Sie ihm einen Namen.

Klicken Sie auf Save & Close, um das Standarddesign abzuschließen.

Unsere Standarddesigns funktionieren sofort und können jederzeit später bearbeitet werden. Für die Bearbeitung sind Kenntnisse in HTML, CSS und Liquid erforderlich. Weitere Informationen finden Sie unter Styling in diesem Leitfaden.

Ein Element erstellen #

Dies geschieht in Search > Element > New Element .

Elementblöcke sind Container für Elemente, die Sie in Ihrem my.clerk.io-Konto erstellen. Sie enthalten die Logik zur Anzeige der Ergebnisse und Einstellungen dafür, wie viele Ergebnisse angezeigt werden sollen. Die Empty State Logic kann auch über Regeln manipuliert werden.

• Name hilft Ihnen, Ihr Element zu identifizieren, falls Sie mehr als eines erstellen möchten. Kann später geändert werden.

• Elementtyp ist standardmäßig Omnisearch und sollte nicht geändert werden. Hier können Sie bei Bedarf auch Filter hinzufügen, aber für die meisten Setups ist dies nicht nötig.

• Empty State Logic ermöglicht es Ihnen, den Produkttyp auszuwählen, der angezeigt werden soll, wenn Omnisearch zunächst geöffnet wird, bevor Suchbegriffe eingegeben wurden. Standardmäßig ist dies Bestseller, kann aber auch personalisiert werden, z. B. mit Visitor Recommendations.

Design abschließen #

Das Design zum Rendern des Element-Blocks. Wählen Sie das von Ihnen erstellte Design aus.

Wenn Ihr Design Variablen enthält, können diese hier ebenfalls gesetzt werden.

Sie können die Anzahl der Ergebnisse steuern, die jedes Mal für jeden Typ angezeigt werden, wenn eine Suche durchgeführt wird. Wir empfehlen in der Regel folgende Mengen:

• Produkte: 20–60
• Vorschläge: 5
• Kategorien & Seiten: 10

Wählen Sie abschließend die Attribute, die Sie als Facetten einbinden möchten, und legen Sie fest, unter welchen Namen sie in den Suchergebnissen angezeigt werden sollen. Wenn Sie ein bestimmtes Attribut nicht in der Liste finden, fügen Sie es in der Liste der „filterbaren Attribute“ in der Search Configuration hinzu.

In die Website einfügen #

Sichtbarkeit steuert, wer die Omnisearch sehen kann.

• Im Vorschaumodus können Sie Ihr Element testen, ohne Ihre Live-Website zu beeinflussen. Sie können Ihre Website in der Vorschau öffnen, indem Sie auf „Seite in Vorschau öffnen“ klicken oder ?clerk_content_mode=preview an die URL Ihrer Website anhängen.

• Auf meiner Live-Website wird verwendet, wenn Sie mit dem Testen fertig sind und es öffentlich machen möchten.

Verwendung der Injection-Methode #

Dies ist der einfachste Weg zur Installation. Clerk fügt den Omnisearch-Code automatisch Ihrer Website hinzu, indem ein Suchfeld Ihrer Wahl gezielt angesteuert und auf ein Ereignis reagiert wird.

• Event steuert, was der Benutzer tun muss, um die Omnisearch auszulösen. Wahrscheinlich möchten Sie, dass sie angezeigt wird, wenn Besucher auf das Suchsymbol oder das Suchfeld klicken.

• Element entscheidet, mit welchem Teil der Website der Benutzer interagieren soll. Wenn Sie beispielsweise möchten, dass Ihr Omnisearch-Element nur angezeigt wird, wenn Besucher mit Ihrer Suchleiste (Klick oder Fokus) interagieren, müssen Sie lediglich den eindeutigen CSS-Selektor dafür finden. Wenn Sie unterschiedliche Kennungen für Mobil- und Desktopgeräte haben, fügen Sie beide hinzu.

Finden Sie Ihren eindeutigen CSS-Selektor wie folgt:

1. Inspizieren Sie den Code Ihrer Website. In den meisten Browsern können Sie mit der rechten Maustaste irgendwo auf der Seite klicken und Untersuchen oder ähnlich auswählen.
2. Suchen Sie das Element, das Sie ansteuern möchten.
3. Rechtsklick darauf, und wählen Sie die Option „Kopieren > Selektor kopieren“.

Verwendung von Embedded Code #

Falls Sie ungespeicherte Änderungen haben, speichern Sie diese, um den Embedded Code zu generieren.

Kopieren Sie diesen Code und fügen Sie ihn in die Datei ein, die alle Seiten des Shops generiert, idealerweise kurz vor dem </body>-Tag.

Ersetzen Sie INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH durch den CSS-Selektor des HTML-Elements, das Ihre Omnisearch auslösen soll.

Nachfolgend finden Sie ein vollständiges Beispiel für einen Omnisearch-Embed-Code mit allen Konfigurationsoptionen:

<span class="clerk"
    data-template="@omnisearch"
    data-api="search/omni"
    data-trigger-element="INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH"
    data-limit="40"
    data-suggestions="6"
    data-categories="6"
    data-pages="6"
    data-omni-search-suggestions="6"
    data-omni-search-categories="6"
    data-omni-search-pages="6"
    data-omni-search-empty="recommendations/popular">
</span>

Design-Konfiguration #

Das meiste der Omni-search kann über die Änderung der Variablen in den Design-Dateien konfiguriert werden.

In der liquid template language hat eine Variable folgende Struktur:

{% assign variable_name = "variable value" %}

Als Faustregel gilt: Nur der Variablenwert sollte geändert werden, um die Omni-search zu konfigurieren.

Technisch versierte Nutzer können natürlich weiterhin einzelne HTML- und CSS-Zeilen anpassen, siehe diesen Abschnitt.

Logo #

Um das Logo in das Omni-search-Design einzufügen, ermitteln Sie einfach die Bild-URL und setzen Sie sie als Wert für die Variable: os_brand_logo.

Die Variable heißt typischerweise so etwas wie os_brand_logo, und so sollte es aussehen, sobald das Logo eingefügt wurde:

Unendliches/automatisches Laden #

Wenn Sie steuern möchten, ob die Omni-search automatisch weitere Produktergebnisse lädt, sobald der Benutzer zur letzten Reihe gescrollt hat, sollte die Variable auf true oder false gesetzt werden. Die Variable heißt typischerweise os_autoload. In diesem Beispiel lädt die Omni-search nicht automatisch weitere Produktergebnisse.

Übersetzungen #

Standardmäßig ist das Template auf Englisch. Wenn Ihr Shop eine andere Sprache verwendet, können Sie die Textelemente durch Änderung der Variablenwerte übersetzen.

Dieses Beispiel zeigt die Variablen für den Sortier-Button:

Protip: Nutzen Sie generative KI (z.B. chatGPT) zum Massenübersetzen, indem Sie schreiben: „Übersetze diese Variablenwerte von Englisch auf Dänisch. Gib den vollständigen Code zurück, damit er zum Ersetzen eingefügt werden kann: PASTE_VARIABLES_HERE“

Styling #

Um das Styling zu ändern, können Konfigurationen in den CSS-Variablen vorgenommen werden.

Die Templates verwenden CSS-Variablen, die so aufgebaut sind:

--variable_name: variable_value;

Technisch versierten Nutzern steht es frei, einzelne CSS-Regeln zu bearbeiten, um komplexere Designänderungen durchzuführen.

Farben #

Die konfigurierbaren Farben sind unter dem CSS-Kommentar „Colors“ /* Colors */ auffind- und konfigurierbar.

Schriftarten #

Ähnlich wie die Farben findet man die Schriftart-Variable unter dem Kommentar /* Font */.

Sie lautet typischerweise wie folgt: --font-family: 'Kumbh Sans', sans serif;

Standarddesign #

Das Standarddesign für Omnisearch umfasst:

• Varianten-Dropdown-Unterstützung: Kunden können vor dem Hinzufügen zum Warenkorb Varianten-Attribute (z.B. Größe, Farbe) wählen.

• Mengen-Auswahl.

• Native Add-to-Cart-Schaltfläche, die Clerk.js benachrichtigt, sodass Analysen und Merchandising synchron bleiben.

• Sauberes, gut strukturiertes Markup mit klaren Kommentaren.

• Zentrale Variablen für Styling und Verhalten, wodurch sich Farben, Abstände, Beschriftungen und gemeinsame Optionen einfach anpassen lassen, ohne den Kerncode zu ändern.

• Preisslider-Facette zur schnellen Bereichsfilterung.

• Anklickbare Vorschläge, die sofort eine Suche auslösen.

Für Entwickler #

Styling #

Designs bestehen aus einem Hauptlayout, CSS-Styling und einer Reihe von Sub-Designs, auf die im Hauptlayout verwiesen werden kann.

Sie können all dies für Desktop und Mobile separat bearbeiten. Standardmäßig verwendet die Omni-search für alle Bildschirmgrößen das gleiche HTML und wird per CSS vollständig responsiv gemacht. Deshalb enthält der Mobile-Tab zunächst keinen Code.

Falls nötig, können Sie ein komplett anderes HTML-Markup für Mobilgeräte erstellen, das auf kleineren Bildschirmen verwendet wird.

Zunächst möchten Sie vielleicht nur einige Dinge anpassen, um das Design an das Erscheinungsbild Ihrer Marke anzupassen – Sie können Ihr Design später jederzeit bearbeiten.

HTML #

Dies ist das Hauptlayout, das die Platzierung aller Elemente steuert. Es verwendet Liquid als Template-Sprache.

In unseren Startdesigns ist der erste Abschnitt den am häufigsten veränderten Elementen gewidmet, wie Sortierlabels, Währung und den diversen Texten, die Sie in Ihre Sprache übersetzen können.

CSS #

Styling, das zusammen mit dem HTML eingespritzt wird und Ihnen die volle Kontrolle über das Erscheinungsbild in einem abgeschlossenen Rahmen gibt.

Verfügbare Sub-Designs #

Alle hier hinzugefügten Designs können im allgemeinen Layout referenziert werden. Sie fungieren als Module, die separat bearbeitet und mit ihrer ID und ihrem Namen hinzugefügt werden: {{@247373 - TopBarSearchForm}}

Sie können jedes Sub-Design löschen, duplizieren und dessen Referenz kopieren, indem Sie auf die Drei-Punkte-Schaltfläche klicken.

Um ein Sub-Design zu bearbeiten, klicken Sie auf dessen Bearbeiten-Symbol. Nach Abschluss der Bearbeitung klicken Sie auf Speichern & schließen, um zum Hauptlayout-Editor zurückzukehren.

Einige Elemente benötigen spezifische Identifikatoren, wie zum Beispiel:

• Das Eingabefeld id="clerk-omnisearch-input"
• Der Content-Wrapper id="clerk-omnisearch-content"

Wann immer Sie Ihren Fortschritt überprüfen möchten, können Sie dies tun, indem Sie auf die Schaltfläche „Designvorschau“ klicken.

Die am häufigsten vorgenommenen Änderungen an Designs sind:

• Logo: Rufen Sie das TopBarSearchForm auf und ersetzen Sie das Standardlogo durch Ihres.

• Schriftarten: Passen Sie gegebenenfalls die Schriftarten an, um Ihrem Seitendesign zu entsprechen.

• Farben: Sie können Ihre Markenfarben bei den Elementen verwenden, die Sie hervorheben oder in den Rest Ihrer Seite integrieren möchten, wie Buttons und Tags.

• Buttons und Tag-Grenzen: Sie können deren Farbe, Radius, Breite anpassen …

• Links: Wenn Sie ein bestimmtes Styling für Ihre Links haben, können Sie dieses ebenfalls bearbeiten.

Overlay-Struktur #

Wird Omnisearch initiiert, wird ein Element mit der Klasse clerk-omnisearch-overlay erzeugt und unten im Body eingefügt.

Hier wird das Design injiziert, und da wir das Eingabeelement als Teil des Designs benötigen, muss eine strukturelle Vorgabe eingehalten werden, damit wir das Eingabefeld 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">
        Element!
    </div>
</div>

Eingabefeld #

Um das Eingabefeld zu finden, muss der folgende Identifikator vorhanden sein: clerk-omnisearch-input. Nach Auslösen des Triggers wird der Cursorfokus auf dieses Element gesetzt und die Suchanfrage eingefügt, sodass das Nutzererlebnis nahtlos bleibt.

Content Wrapper #

Im Content Wrapper geschieht das Meiste; der Wrapper darum benötigt den Identifikator clerk-omnisearch-content. Dort sollten sich die Facets, die Slider und alles weitere außer dem Eingabefeld befinden.

Klassen #

Funktionen können durch Hinzufügen bestimmter Klassen zu Elementen in das Design eingebracht werden.

Schließen-Button #

clerk-omnisearch-close

Wird die Klasse einem Element im Design zugefügt, blendet dieses das Overlay aus.

Sortierung #

clerk-omnisearch-sort

Findet Sortier-Dropdowns und fügt ihnen Listener hinzu.

Um ein Sortier-Element im Design zu haben, fügen Sie diese Klasse dem entsprechenden Auswahl-Element, z.B. einem Dropdown, hinzu. Damit es funktioniert, benötigt das Element folgendes value:[desc|asc], also der Wert, nach dem sortiert werden soll, dann ein Doppelpunkt, dann desc oder asc. Optional kann das Attribut data-sort-type hinzugefügt werden, falls nach Kategorien oder Seiten sortiert werden soll.

Search Facet #

clerk-facet-search

Wenn eine Facet-Suche vorhanden ist, wird ein Listener erstellt und solche Facets ausgeblendet, die der Anfrage nicht entsprechen.

Die Klasse prüft bei Vorhandensein auf das Dasein von Facet-Such-Elementen. Facet-Suchen bieten den Nutzern die Möglichkeit, Facets zu durchsuchen. Damit das funktioniert, muss das Element einen String-Wert haben.

Vollständiges Zurücksetzen #

clerk-omnisearch-full-reset

Elemente mit dieser Klasse löschen beim Klicken alle ausgewählten Facets und setzen die Suchanfrage zurück.

Facets Löschen #

clerk-omnisearch-facet-full-reset

Beim Klick werden alle aktiven Facets deaktiviert. Dies ist z.B. auf einem „Alle löschen“-Button in einer Facet-Gruppe üblich, damit Nutzer ihre ausgewählten Filter in einem Schritt zurücksetzen können.

Gruppen-Zurücksetzen #

clerk-omnisearch-facet-group-reset

Wenn angeklickt, werden mit dieser Klasse alle darunterliegenden Elemente der Gruppe deaktiviert.

Um das Feature zu bieten, eine komplette Facet-Gruppe zu deaktivieren, kann ein Element mit dieser Klasse versehen werden. Sobald das Element aktiviert wird (z.B. angeklickt), werden alle Elemente innerhalb der Gruppe deaktiviert, sodass die Gruppe zurückgesetzt wird. Damit es funktioniert, muss das Element das zu löschende Attribut data-facet-group tragen.

Facet-Löschen #

clerk-omnisearch-facet-reset

Elemente mit dieser Klasse deaktivieren ein einzelnes Element mit dem angegebenen Attributpaar group/value.

Diese Klasse dient Szenarien, in denen ein einzelner Facet deaktiviert werden soll. Ein Element mit dieser Klasse kann einem bestimmten Facet in einer Gruppe zugewiesen werden, indem es sowohl ein data-facet-group als auch ein data-facet-value bekommt. Nach der Aktivierung wird nur das assoziierte Facet gemäß dem Attributpaar gelöscht, andere bleiben unangetastet.

Facet-Klick #

clerk-facet

Elemente mit dieser Klasse werden als auswählbare Facets behandelt.

Alle Facets sollten mit der Klasse sowie den Attributen data-facet-group und data-facet-value versehen sein, damit wir wissen, was der Kunde klickt.