Omnisearch

• Live-Ergebnisse werden Ihren Besuchern während des Tippens angezeigt und enthalten Produkte, Kategorien und Seiten.
• Sortierung und Filterung: Damit Ihre Besucher ihre Suche auf intuitive und einfache Weise verfeinern können.
• Einfache Integration in Ihre Website mit einer unserer großartigen Startvorlagen.
• Es passt sich Ihrer Marke an, indem Sie einige Standardeinstellungen wie Logo, Schriftarten, Farben und mehr ändern.
• Es ist vollständig anpassbar mit HTML, CSS und Liquid für Entwickler.

Einstieg #

Omnisearch besteht aus einem anpassbaren Design für die Optik und einem Element-Block, der es ermöglicht, es auf Ihrer Website zu installieren.

Design erstellen #

Dies erfolgt 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 bearbeitet werden. Das Bearbeiten erfordert Kenntnisse in HTML, CSS und Liquid. Weitere Informationen finden Sie unter Styling in diesem Leitfaden.

Ein Element erstellen #

Dies erfolgt in Search > Element > New Element

Element-Blö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. Die Logik für den Leeren Zustand kann auch über Rules gesteuert werden.

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

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

• Leeren Zustand Logik ermöglicht Ihnen die Auswahl des Produkttyps, der angezeigt werden soll, wenn Omnisearch zunächst geöffnet wird, bevor Wörter eingegeben werden. Standardmäßig ist dies Bestseller, kann aber auch z. B. mit Visitor Recommendations personalisiert werden.

Design abschließen #

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

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

Sie können die Anzahl der Ergebnisse festlegen, die bei jeder Suche für jeden Typ angezeigt werden sollen. Wir empfehlen in der Regel folgende Mengen:

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

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

In die Website einfügen #

Sichtbarkeit wird verwendet, um zu steuern, wer die Omnisearch sehen kann.

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

• Auf meiner Live-Seite wird verwendet, wenn Sie mit dem Testen fertig sind und es veröffentlichen möchten.

Verwendung von Injection #

Dies ist der einfachste Installationsweg. Clerk fügt automatisch den Omnisearch-Code zu Ihrer Seite hinzu, indem ein Suchfeld Ihrer Wahl angesprochen und durch ein Ereignis ausgelöst wird.

• Event steuert, was der Benutzer tun soll, um die Omnisearch auszulösen. Am wahrscheinlichsten möchten Sie, dass sie angezeigt wird, wenn Ihre Besucher auf das Suchsymbol oder das Eingabefeld klicken.

• Element bestimmt den Teil der Website, mit dem der Benutzer interagieren soll. Wenn Sie beispielsweise möchten, dass Ihr Omnisearch-Element nur angezeigt wird, wenn Ihre Besucher mit Ihrer Suchleiste interagieren (klicken oder fokussieren), müssen Sie lediglich den eindeutigen CSS-Selektor finden, der darauf angewendet wird. Wenn Sie unterschiedliche Bezeichner für Mobile und Desktop verwenden, fügen Sie beide hinzu.

So finden Sie Ihren einzigartigen CSS-Selektor:

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

Verwendung des Embedcodes #

Wenn Sie nicht gespeicherte Änderungen haben, speichern Sie diese, um den Embedcode zu generieren.

Kopieren Sie diesen Code und fügen Sie ihn in die Datei ein, die alle Seiten des Webshops generiert, idealerweise am Ende des </body>-Tags.

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

Unten finden Sie ein vollständiges Beispiel für einen Omnisearch-Embedcode 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>

Anzeige-Modi #

Omnisearch unterstützt zwei Anzeige-Modi, die steuern, wie die Suchoberfläche auf Ihrer Website erscheint. Diese konfigurieren Sie im Tab Insert, wenn Sie Ihr Omnisearch-Element bearbeiten.

Full Overlay #

Dies ist der Standardmodus. Wenn ausgelöst, überdeckt Omnisearch den gesamten Viewport mit einer Vollbildüberlagerung. Die Suchoberfläche übernimmt die Seite und bietet ein fokussiertes Sucherlebnis.

Verwenden Sie diesen Modus, wenn Sie möchten:

• Ein ablenkungsfreies Suchumfeld
• Die vollständige Kontrolle über das Suchlayout
• Dass die Suchoberfläche völlig unabhängig von Ihrem Seitenheader ist

Partial Overlay #

Dieser Modus integriert Omnisearch in Ihren bestehenden Seitenheader. Anstatt den gesamten Bildschirm zu überdecken, erscheint die Suchüberlagerung unter Ihrem Header, während der Header sichtbar und funktional bleibt.

Verwenden Sie diesen Modus, wenn Sie möchten:

• Dass Header und Navigation beim Suchen zugänglich bleiben
• Eine nahtlose Integration in das bestehende Layout Ihrer Seite
• Dass das Sucherlebnis wie ein natürlicher Teil Ihrer Website wirkt

Konfigurationsoptionen #

Wenn Partial Overlay ausgewählt ist, stehen zusätzliche Einstellungen zur Verfügung:

Header-Selector

Der CSS-Selektor für das Header-Element Ihrer Seite. Omnisearch verwendet diesen, um die Überlagerung direkt unter Ihrem Header zu positionieren und eine korrekte Ausrichtung zu gewährleisten.

Beispiel-Selektoren:

• header
• .site-header
• #main-header

Search Input Selector

Der CSS-Selektor für Ihr bestehendes Suchfeld. Wird dies angegeben, synchronisiert Omnisearch mit dem Suchfeld Ihres Headers, sodass beim Tippen im Suchfeld Ihres Headers die Omnisearch-Ergebnisse aktualisiert werden.

Beispiel-Selektoren:

• #search-input
• .header-search input
• [name="search"]

Breite

Steuert die horizontale Größe der Überlagerung:

• Volle Breite: Deckt die ganze Seitenbreite ab
• Inhaltsbreite: Entspricht der Breite eines Container-Elements, das Sie mit einem CSS-Selektor angeben
• Feste Breite: Eine von Ihnen definierte Pixelbreite

Höhe

Steuert die vertikale Größe der Überlagerung:

• Vom Header bis zum unteren Rand: Füllt den Bereich vom unteren Rand des Headers bis zum unteren Rand des Viewports aus
• View-Port-Prozentsatz: Ein Prozentsatz der Viewport-Höhe (z.B. 80%)
• Feste Höhe: Eine konkrete Höhe in Pixel
• Maximale Höhe: Setzt eine Obergrenze, lässt die Überlagerung aber kleiner sein, falls weniger Platz benötigt wird

Horizontale Ausrichtung

Steuert, wo die Überlagerung horizontal erscheint:

• Links: Am linken Rand des Viewports
• Zentriert: Horizontale Zentrierung der Überlagerung
• Rechts: Am rechten Rand des Viewports

Vertikale Positionierung

Steuert die vertikale Platzierung relativ zum Header:

• Unter dem Header: Positioniert die Überlagerung direkt unterhalb Ihres Headers
• Fester Abstand von oben: Ein bestimmter Pixelabstand vom oberen Rand des Viewports

Design-Einstellungen #

Der Großteil der Omni-search kann durch Anpassung der Variablen in den Design-Dateien konfiguriert werden.

In der liquid template language hat eine Variable folgenden Aufbau:

{% assign variable_name = "variable value" %}

Grundsätzlich sollte nur der Wert der Variable geändert werden, um die Omni-search zu konfigurieren.

Technisch versierte Nutzer können selbstverständlich spezifische HTML- und CSS-Zeilen ändern, siehe diesen Abschnitt.

Logo #

Um das Logo zum Design der Omni-search hinzuzufügen, suchen Sie einfach die Bild-URL und tragen Sie sie als Wert für die Variable os_brand_logo ein.

Die Variable heißt typischerweise os_brand_logo und sollte so aussehen, nachdem das Logo eingefügt wurde:

Infinite/Auto-Load #

Wenn Sie steuern möchten, ob die Omni-search automatisch weitere Produktergebnisse lädt, sobald der Benutzer zur letzten Produktreihe 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 keine weiteren Produktergebnisse automatisch.

Übersetzungen #

Standardmäßig ist das Template auf Englisch. Wenn Ihr Shop eine andere Sprache hat, können Sie die Textelemente übersetzen, indem Sie die Variablenwerte anpassen.

Dieses Beispiel zeigt die Variablen für die Sortier-Schaltfläche:

Profi-Tipp: Verwenden Sie generative KI (z. B. chatGPT) für eine Massenübersetzung, indem Sie schreiben: „Translate these variable values from English to Danish. Return the full code back so it can be copy/pasted to replace the existing code: PASTE_VARIABLES_HERE“

Styling #

Um ein beliebiges Styling zu ändern, kann die Konfiguration in den CSS-Variablen vorgenommen werden.

Die Templates verwenden CSS-Variablen mit folgendem Aufbau:

--variable_name: variable_value;

Für technisch versierte Nutzer können einzelne CSS-Regeln geändert werden, um komplexere Design-Änderungen durchzuführen.

Farben #

Die konfigurierbaren Farben sind im Abschnitt unter dem CSS-Kommentar “Colors” /* Colors */ zu finden und können dort angepasst werden.

Schriftarten #

Ähnlich wie die Farben kann die Schriftart unter dem Kommentar /* Font */ gefunden werden.

Typischerweise gibt es eine Variable wie: --font-family: 'Kumbh Sans', sans serif;

Standard Design #

Das Standard-Design für Omnisearch umfasst:

• Varianten-Dropdown-Unterstützung: Lassen Sie Käufer Variantenattribute (z. B. Größe, Farbe) wählen, bevor sie zum Warenkorb hinzufügen.

• Mengenauswahl

• Nativer „In den Warenkorb“-Button, der Clerk.js benachrichtigt, wodurch Analytics und Merchandising synchron bleiben.

• Sauberes, gut strukturiertes Markup mit klaren Kommentaren

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

• Preisschieber Facet zur schnellen Bereichsfilterung

• Anklickbare Vorschläge, die sofort eine Suche triggern

Für Entwickler #

Styling #

Designs bestehen aus einem Hauptlayout, CSS-Styling und einer Reihe von Sub-Designs, die im Hauptlayout referenziert werden können.

Sie können alle diese für Desktop und Mobile separat bearbeiten. Standardmäßig verwendet die Omni-search für alle Bildschirmgrößen das gleiche HTML und wird mit CSS vollständig responsiv gemacht. Deshalb hat der Mobile-Tab zu Beginn keinen Code.

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

Zunächst möchten Sie vielleicht nur einige wenige Dinge anpassen, um das Design dem Look & Feel Ihrer Marke anzupassen – Sie können Ihr Design natürlich jederzeit weiter bearbeiten.

HTML #

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

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

CSS #

Styling, das zusammen mit dem HTML injiziert wird und Ihnen die volle Kontrolle über die Optik auf begrenztem Bereich gibt.

Verfügbare Sub-Designs #

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

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

Zum Bearbeiten eines Sub-Designs klicken Sie auf das Edit-Symbol. Nach dem Bearbeiten klicken Sie auf Save & close, um zum Hauptlayout-Editor zurückzukehren.

Einige Elemente benötigen spezifische Bezeichner, wie z.B.:

• Das Eingabefeld id="clerk-omnisearch-input"
• Den Inhalts-Wrapper id="clerk-omnisearch-content"

Wenn Sie Ihren Fortschritt überprüfen möchten, können Sie dies jederzeit über die Schaltfläche „Preview design“ tun.

Die häufigsten Änderungen am Design sind diese:

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

• Schriftarten: Passen Sie die Schriftarten an, falls erforderlich, um das Look & Feel Ihrer Website zu übernehmen.

• Farben: Sie können Ihre Markenfarben für Elemente verwenden, die Sie hervorheben oder mit dem Rest Ihrer Website angleichen möchten, wie beispielsweise Buttons und Tags.

• Button- und Tag-Rahmen: Sie können deren Farbe, Radius, Breite usw. anpassen.

• Links: Wenn Sie einen bestimmten Linkstil haben, können Sie diesen ebenfalls bearbeiten.

Overlay-Struktur #

Wenn Omnisearch gestartet wird, wird ein Element mit der Klasse clerk-omnisearch-overlay erzeugt und am unteren Rand des Body eingefügt.

Dort wird das Design injiziert, da das Eingabefeld Teil des Designs ist, müssen wir bestimmte Strukturvorgaben einhalten, damit wir das Eingabefeld nicht bei jedem Laden neu rendern. Die Struktur sollte unterhalb des Overlays so aussehen:

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

Eingabefeld #

Um das Eingabefeld zu finden, muss es den Bezeichner clerk-omnisearch-input haben. Wenn das Trigger-Element aktiviert wurde, setzen wir den Fokus auf dieses Feld und fügen jede vorhandene Suchanfrage ein, sodass das Nutzererlebnis nahtlos bleibt.

Inhalts-Wrapper #

Der Inhalts-Wrapper ist der Bereich, in dem das meiste passiert; er muss den Bezeichner clerk-omnisearch-content haben. Dort sollten die Facets, Slider und alles Weitere platziert werden, das nicht das Eingabefeld selbst ist.

Klassen #

Durch das Hinzufügen spezifischer Klassen zu Elementen kann dem Design Funktionalität hinzugefügt werden.

Schließen-Button #

clerk-omnisearch-close

Wird diese Klasse einem Element im Design hinzugefügt, blendet dieses Element das Overlay aus.

Sortierung #

clerk-omnisearch-sort

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

Um ein Sortier-Element im Design zu haben, fügen Sie dem entsprechenden Element diese Klasse hinzu, z. B. einem Dropdown. Damit es funktioniert, muss das Element folgendes Format haben: value:[desc|asc], also der Sortierwert, Doppelpunkt und anschließend desc oder asc. Optional können Sie ein data-sort-type-Attribut hinzufügen, falls Sie Kategorien oder Seiten sortieren möchten.

Suche Facet #

clerk-facet-search

Wenn eine Facet-Suche vorhanden ist, wird ein Listener erstellt und Facets, die nicht zur Suchanfrage passen, werden ausgeblendet.

Die Klasse prüft beim Vorhandensein auf der Webseite, ob Facet-Suche-Elemente existieren. Facet-Suchen ermöglichen es Benutzern, in den Facets zu suchen. Damit dies funktioniert, muss das Element einen String-Wert haben.

Vollständiges Zurücksetzen #

clerk-omnisearch-full-reset

Durch Klicken auf Elemente mit dieser Klasse werden alle ausgewählten Facets gelöscht und die Anfrage zurückgesetzt.

Facets zurücksetzen #

clerk-omnisearch-facet-full-reset

Durch Klicken auf Elemente mit dieser Klasse werden alle aktiven Facets deaktiviert. Dies sieht man typischerweise bei einem “Alles löschen”-Button innerhalb einer Facet-Gruppe, wodurch alle ausgewählten Filter eines Nutzers auf einmal zurückgesetzt werden können.

Gruppe zurücksetzen #

clerk-omnisearch-facet-group-reset

Durch Klicken auf Elemente mit dieser Klasse werden alle Kindelemente der Gruppe deaktiviert.

Um das Deaktivieren einer ganzen Facet-Gruppe zu ermöglichen, kann ein Element diese Klasse erhalten. Wenn das Element aktiviert wird (z. B. angeklickt), werden alle Elemente der Gruppe deaktiviert und die Gruppe zurückgesetzt. Damit es funktioniert, muss das Element das zu löschende Attribut als data-facet-group haben.

Facet zurücksetzen #

clerk-omnisearch-facet-reset

Elemente mit dieser Klasse müssen ein einzelnes Element mit der Gruppen-/Wert-Attributkombination deaktivieren.

Diese Klasse ist für Situationen gedacht, in denen es notwendig ist, einen einzelnen Facet zu deaktivieren. Ein Element mit dieser Klasse kann einem bestimmten Facet in einer Gruppe zugewiesen werden, indem es sowohl das Attribut data-facet-group als auch data-facet-value erhält. Nach Aktivierung wird nur der zugewiesene Facet deaktiviert, andere aktuelle Auswahlen werden nicht beeinflusst.

Facet-Klick #

clerk-facet

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

Alle Facets sollten eine Klasse mit den Attributen data-facet-group und data-facet-value haben, damit erkannt wird, welches Element der Kunde auswählt.