Omnisearch

• Live-Ergebnisse werden Ihren Besuchern während der Eingabe angezeigt und umfassen Produkte, Kategorien und Seiten.
• Sortieren und Filtern: ermöglicht es Ihren Besuchern, ihre Suche auf intuitive und einfache Weise zu verfeinern.
• Einfache Integration in Ihre Website mit einer unserer großartigen Startvorlagen.
• Es passt sich Ihrer Marke an, indem Sie nur wenige Standardeinstellungen wie Logo, Schriftarten, Farben und mehr anpassen.
• Vollständig anpassbar mit HTML, CSS und Liquid für Entwickler.

Erste Schritte #

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

Ein Design erstellen #

Dies geschieht unter Search > Designs > New Design

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

Klicken Sie auf Save & Close, um das Standarddesign fertigzustellen.

Unsere Standarddesigns funktionieren sofort nach dem Auspacken und können jederzeit später bearbeitet werden. Die Bearbeitung erfordert Kenntnisse in HTML, CSS und Liquid. Lesen Sie Styling in diesem Leitfaden für weitere Informationen.

Ein Element erstellen #

Dies wird unter Search > Element > New Element gemacht.

Element-Blöcke sind Container für Elemente, die Sie in Ihrem my.clerk.io-Konto erstellen. Sie enthalten die Logik, Ergebnisse anzuzeigen, sowie Einstellungen dafür, wie viele Ergebnisse angezeigt werden sollen. Die Logik für den Leeren Zustand kann auch über Rules angepasst 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, falls benötigt, aber für die meisten Setups ist dies nicht notwendig.

• Logik für leeren Zustand ermöglicht die Auswahl der Produkttypen, die angezeigt werden, wenn Omnisearch ursprünglich geöffnet wird, bevor etwas eingegeben wurde. Standardmäßig ist dies Bestseller, kann aber z.B. auch mit Visitor Recommendations personalisiert werden.

Design finalisieren #

Das Design, über das der Element-Block gerendert wird. Wählen Sie das von Ihnen erstellte Design aus.

Falls Ihr Design Variablen enthält, können diese hier ebenfalls festgelegt werden.

Sie können steuern, wie viele Ergebnisse für jeden Typ angezeigt werden, jedes Mal wenn eine Suche durchgeführt wird. Wir empfehlen generell folgende Mengen:

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

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

Einfügen in die Website #

Sichtbarkeit steuert, wer die Omnisearch sehen kann.

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

• Auf meiner Live-Seite wird verwendet, wenn Sie mit dem Testen fertig sind und Omnisearch live schalten möchten.

Verwendung der Injection #

Dies ist der einfachste Weg zur Installation. Clerk fügt den Omnisearch-Code automatisch auf Ihrer Website hinzu, indem ein Suchfeld Ihrer Wahl angesprochen und ein Event ausgelöst wird.

• Event steuert, was der Nutzer tun muss, um Omnisearch auszulösen. Höchstwahrscheinlich möchten Sie, dass es angezeigt wird, wenn Ihre Besucher auf Ihr Suchsymbol oder das Eingabefeld klicken.

• Element entscheidet, mit welchem Teil Ihrer Website der Benutzer interagieren soll. Wenn Sie z. B. möchten, dass Ihr Omnisearch-Element nur dann 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 auf Mobilgeräten und Desktop verschiedene Bezeichner haben, fügen Sie beide hinzu.

So finden Sie Ihren eindeutigen CSS-Selektor:

1. Untersuchen Sie den Code Ihrer Website. In den meisten Browsern können Sie mit Rechtsklick an einer beliebigen Stelle auf der Seite Untersuchen oder eine ähnliche Option wählen.
2. Finden Sie das gewünschte Element.
3. Klicken Sie mit der rechten Maustaste darauf und wählen Sie die Option Kopieren > Selektor kopieren.

Verwendung des eingebetteten Codes #

Falls Sie ungespeicherte Änderungen haben, speichern Sie diese, um den eingebetteten 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 Omnisearch auslösen soll.

Hier 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>

Design-Konfiguration #

Das meiste bei Omni-search kann durch 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 zur Konfiguration der Omni-search geändert werden.

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

Logo #

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

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

Unendliches/automatisches Laden #

Falls Sie steuern möchten, ob Omni-search automatisch mehr Produktergebnisse lädt, sobald der Nutzer zur letzten Produktzeile gescrollt ist, 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 in einer anderen Sprache ist, können Sie die Textelemente übersetzen, indem Sie die Variablenwerte ändern.

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

Protip: Verwenden Sie generative KI (z.B. ChatGPT) zur Massenübersetzung, indem Sie schreiben: „Übersetze diese Variablenwerte von Englisch auf Dänisch. Gib den vollständigen Code zurück, damit er kopiert und anstelle des bestehenden Codes eingefügt werden kann: PASTE_VARIABLES_HERE“

Styling #

Um Styling anzupassen, können Konfigurationen in den CSS-Variablen vorgenommen werden.

Die Vorlagen nutzen CSS-Variablen, die wie folgt aufgebaut sind:

--variable_name: variable_value;

Technisch versierte Nutzer können einzelne CSS-Regeln ändern, um komplexere Design-Anpassungen vorzunehmen.

Farben #

Konfigurierbare Farben sind im Abschnitt mit dem CSS-Kommentar „Colors“ /* Colors */ identifizierbar und konfigurierbar.

Schriftarten #

Ähnlich wie bei den Farben ist die Schriftartvariable unter dem Kommentar /* Font */ zu finden.

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

Für Entwickler #

Styling #

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

Sie können all dies für Desktop und Mobile separat bearbeiten. Standardmäßig verwendet die Omni-search dasselbe HTML für alle Bildschirmgrößen und verwendet CSS, um vollständig responsiv zu sein. Aus diesem Grund enthält der Mobile-Tab anfangs keinen Code.

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

Zu Beginn möchten Sie wahrscheinlich nur einige Dinge anpassen, um das Design an das Erscheinungsbild Ihrer Marke anzupassen – Ihr Design kann jederzeit später bearbeitet werden.

HTML #

Dies ist das Haupt-Layout, das die Platzierung aller Elemente steuert. Es nutzt Liquid als Template-Sprache.

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

CSS #

Das Styling wird zusammen mit dem HTML injiziert und gibt Ihnen die volle Kontrolle über das Erscheinungsbild auf eine abgeschlossene Weise.

Verfügbare Sub-Designs #

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

Sie können jedes Sub-Design löschen, duplizieren und die Referenz kopieren, indem Sie auf die Schaltfläche mit den drei Punkten klicken.

Um ein Sub-Design zu bearbeiten, klicken Sie auf das Bearbeiten-Symbol. Nach dem Bearbeiten klicken Sie auf Save & close, um zum Haupteditor zurückzukehren.

Einige Elemente benötigen bestimmte Bezeichner, wie:

• Das Eingabefeld id="clerk-omnisearch-input"
• Die Inhalts-Umrahmung id="clerk-omnisearch-content"

Wann immer Sie Ihren Fortschritt testen möchten, können Sie dies mit dem Button „Preview design“ tun.

Die häufigsten Änderungen an Designs sind die folgenden:

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

• Schriftarten: Falls nötig, passen Sie die Schriftarten an das Look & Feel Ihrer Website an.

• Farben: Sie können Ihre Markenfarben in denjenigen Elementen festlegen, die Sie hervorheben oder an den Rest Ihrer Seite angleichen möchten – etwa Buttons und Tags.

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

• Links: Wenn Sie für Ihre Links ein bestimmtes Styling haben, können Sie dies auch anpassen.

Overlay-Struktur #

Bei der Initialisierung von Omnisearch wird ein Element mit der Klasse clerk-omnisearch-overlay erstellt und ans Ende des Bodys injiziert.

Hier fügen wir das Design ein. Da das Eingabeelement Teil des Designs ist, haben wir strukturelle Anforderungen, um zu gewährleisten, dass das Eingabefeld nicht bei jedem Laden neu gerendert wird. Die Struktur sollte unter dem Overlay wie folgt aussehen:

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

Eingabefeld #

Damit das Eingabefeld gefunden wird, benötigt es den folgenden Bezeichner: clerk-omnisearch-input. Sobald das Trigger-Element ausgelöst wurde, verschieben wir den Cursor-Fokus auf dieses Element und fügen die aktuelle Abfrage ein, um das Benutzererlebnis möglichst nahtlos zu gestalten.

Content Wrapper #

Im Content Wrapper passiert das meiste. Die Umrahmung sollte den Bezeichner clerk-omnisearch-content haben. Hier befinden sich die Facetten, Slider und alles Andere, das nicht das Eingabefeld ist.

Klassen #

Funktionalität kann dem Design hinzugefügt werden, indem bestimmten Elementen bestimmte Klassen zugewiesen werden.

Schließen-Button #

clerk-omnisearch-close

Wenn Sie die Klasse einem Element im Design zuweisen, blendet das Element das Overlay aus.

Sortieren #

clerk-omnisearch-sort

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

Um ein Sortier-Element im Design zu erhalten, fügen Sie diese Klasse dem selektierenden Element (z.B. einem Dropdown) hinzu. Damit es funktioniert, muss das Element folgendes Format haben: value:[desc|asc], also der Wert, nach dem Sie sortieren möchten, gefolgt von einem Doppelpunkt und dann entweder desc oder asc. Optional können Sie ein data-sort-type-Attribut hinzufügen, falls Sie nach Kategorien oder Seiten sortieren möchten.

Search Facet #

clerk-facet-search

Wenn eine Facettensuche vorhanden ist, wird ein Listener erstellt und Facetten, die nicht zur Abfrage passen, werden ausgeblendet.

Die Klasse überprüft auf der Seite, ob Facettensuch-Elemente existieren. Facettensuchen bieten Nutzern die Möglichkeit, innerhalb der Facetten zu suchen. Damit es funktioniert, muss das Element einen Stringwert haben.

Vollständiges Zurücksetzen #

clerk-omnisearch-full-reset

Beim Klicken werden alle ausgewählten Facetten und die Abfrage gelöscht.

Facetten Zurücksetzen #

clerk-omnisearch-facet-full-reset

Beim Klicken werden alle aktiven Facetten des Elements abgewählt. Dies sieht man typischerweise auf einem „Alles löschen“-Button innerhalb einer Gruppe von Facetten, damit Nutzer ihre Filter schnell zurücksetzen können.

Gruppe zurücksetzen #

clerk-omnisearch-facet-group-reset

Beim Klicken werden alle Kind-Elemente innerhalb der Gruppe abgewählt.

Um diese Funktion bereitzustellen, kann einem Element die Klasse zugewiesen werden. Nach der Aktivierung (z.B. Klick) werden alle Elemente innerhalb der Gruppe abgewählt und die Gruppe zurückgesetzt. Damit dies funktioniert, muss das Element das zu löschende Attribut mit dem Namen data-facet-group besitzen.

Facette zurücksetzen #

clerk-omnisearch-facet-reset

Elemente mit dieser Klasse müssen ein einzelnes Element anhand des Gruppen-/Werte-Attributpaares abwählen.

Diese Klasse ist für Szenarien gedacht, in denen eine einzelne Facette abgewählt werden soll. Ein Element mit der Klasse kann mit einer bestimmten Facette innerhalb einer Gruppe verbunden werden, indem es sowohl ein data-facet-group als auch ein data-facet-value erhält. Bei Aktivierung wird damit nur die zugehörige Facette abgewählt, andere ausgewählte Facetten bleiben bestehen.

Facettenklick #

clerk-facet

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

Alle Facetten sollten eine Klasse mit den Attributen data-facet-group und data-facet-value haben, damit wir wissen, was der Kunde auswählt.