Omnisearch

• Live-Ergebnisse werden Ihren Besuchern angezeigt, während sie tippen, und umfassen Produkte, Kategorien und Seiten.
• Sortierung und Filterung: um Ihren Besuchern zu ermöglichen, ihre Suche auf intuitive und einfache Weise zu verfeinern.
• Einfach zu integrieren in Ihre Website mit einer unserer großartigen Startvorlagen.
• Es passt zu Ihrer Marke durch das Ändern einiger Standard-Einstellungen wie Logo, Schriftarten, Farben und mehr.
• Es ist vollständig anpassbar mit HTML, CSS und Liquid für Entwickler.

Erste Schritte #

Omnisearch besteht aus einem anpassbaren Design für visuelle Elemente und einem Inhaltsblock, der es ermöglicht, auf Ihrer Website installiert zu werden.

Ein Design erstellen #

Dies geschieht in Search > Designs > New Design

Wählen Sie den Omnisearch-Typ, wählen Sie ein Startdesign aus 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. Die Bearbeitung erfordert Kenntnisse in HTML, CSS und Liquid. Überprüfen Sie Styling in diesem Leitfaden für weitere Informationen.

Einen Inhalt erstellen #

Dies geschieht in Search > Content > New Content

Inhaltsblöcke sind Container für Elemente, die Sie in Ihrem my.clerk.io-Konto erstellen. Sie enthalten die Logik, um Ergebnisse anzuzeigen und Einstellungen dafür, wie viele Ergebnisse angezeigt werden sollen.

• Name hilft Ihnen, Ihren Inhalt zu identifizieren, falls Sie mehr als einen erstellen möchten. Er kann später geändert werden.

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

• Leere Statuslogik ermöglicht es Ihnen, den Typ der Produkte auszuwählen, die angezeigt werden sollen, wenn Omnisearch zunächst geöffnet wird, bevor irgendwelche Wörter eingegeben werden. Standardmäßig ist dies Bestseller, kann aber auch personalisiert werden, z.B. mit Besucherempfehlungen.

Design abschließen #

Das Design, um den Inhaltsblock darzustellen. Wählen Sie das Design aus, das Sie erstellt haben.

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

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

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

Wählen Sie schließlich die Attribute aus, die Sie als Facetten einbeziehen möchten, und legen Sie die Namen fest, unter denen sie in den Suchergebnissen angezeigt werden sollen. Wenn Sie ein bestimmtes Attribut in der Liste nicht finden können, fügen Sie es in die Liste der „filterbaren Attribute“ in der Suchkonfiguration hinzu.

In die Website einfügen #

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

• In der Vorschau können Sie Ihren Inhalt testen, ohne Ihre Live-Website zu beeinträchtigen. Sie können Ihre Website in der Vorschau öffnen, indem Sie auf „Website in der Vorschau öffnen“ klicken oder ?clerk_content_mode=preview an die URL Ihrer Website anhängen.

• In meiner Live-Website wird verwendet, wenn Sie mit dem Testen fertig sind und bereit sind, es öffentlich zu machen.

Verwendung von Injection #

Dies ist der einfachste Weg zur Installation. Clerk fügt automatisch den Omnisearch-Code zu Ihrer Website hinzu, indem es ein Suchfeld Ihrer Wahl anvisiert und basierend auf einem Ereignis auslöst.

• Ereignis steuert, was der Benutzer tun sollte, um die Omnisearch auszulösen. Höchstwahrscheinlich möchten Sie, dass sie angezeigt wird, wenn Ihre Besucher auf Ihr Suchsymbol oder Eingabefeld klicken.

• Element entscheidet, mit welchem Teil der Website der Benutzer interagieren sollte. Wenn Sie möchten, dass Ihr Omnisearch-Inhalt nur angezeigt wird, wenn Ihre Besucher mit Ihrer Suchleiste interagieren (klicken oder den Fokus darauf legen), müssen Sie nur den einzigartigen CSS-Selektor finden, der darauf angewendet wird. Wenn Sie unterschiedliche Identifikatoren auf Mobilgeräten und Desktop haben, fügen Sie beide hinzu.

Finden Sie Ihren einzigartigen CSS-Selektor auf diese Weise:

1. Untersuchen Sie den Code Ihrer Website. In den meisten Browsern können Sie mit der rechten Maustaste irgendwo auf Ihrer Seite klicken und Untersuchen oder ähnliches wählen.
2. Finden Sie das Element, das Sie anvisieren möchten.
3. Klicken Sie mit der rechten Maustaste darauf und suchen Sie die Option kopieren > Selektor kopieren.

Verwendung von eingebettetem Code #

Wenn 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 Webshops generiert, idealerweise nahe dem Ende des </body>-Tags.

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

Designkonfiguration #

Die meisten der Omni-Suche können konfiguriert werden, indem die Variablen in den Design-Dateien geändert werden.

In der Liquid-Template-Sprache hat eine Variable eine Struktur wie diese:

{% assign variable_name = "variable value" %}

Als Faustregel gilt, dass nur der Variablenwert geändert werden sollte, um die Omni-Suche zu konfigurieren.

Technisch versierte Benutzer können natürlich auch spezifische HTML- und CSS-Zeilen ändern, siehe diesen Abschnitt.

Logo #

Um das Logo zum Omni-Suchdesign hinzuzufügen, finden Sie einfach die Bild-URL und setzen Sie sie in den Wert für die Variable: os_brand_logo.

Die Variable wird typischerweise etwas wie os_brand_logo genannt und sollte so aussehen, nachdem das Logo eingefügt wurde:

Unendliches/automatisches Laden #

Wenn Sie steuern möchten, ob die Omni-Suche automatisch mehr Produkt Ergebnisse laden soll, sobald der Benutzer zur letzten Reihe von Produkten gescrollt ist, sollte die Variable auf true oder false gesetzt werden. Die Variable wird typischerweise os_autoload genannt. In diesem Beispiel lädt die Omni-Suche keine weiteren Produkt Ergebnisse automatisch.

Übersetzungen #

Standardmäßig ist die Vorlage auf Englisch. Wenn Sie einen Shop haben, der eine andere Sprache hat, können Sie die Textelemente übersetzen, indem Sie die Variablenwerte ändern.

Dieses Beispiel zeigt die Variablen für die Schaltfläche zum Sortieren:

Profi-Tipp: Verwenden Sie generative KI (z.B. chatGPT), um in großen Mengen zu übersetzen, indem Sie schreiben: „Übersetzen Sie diese Variablenwerte von Englisch nach Dänisch. Geben Sie den vollständigen Code zurück, damit er kopiert/eingefügt werden kann, um den vorhandenen Code zu ersetzen: PASTE_VARIABLES_HERE“

Styling #

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

Die Vorlagen verwenden CSS-Variablen, die eine Struktur wie diese haben:

--variable_name: variable_value;

Für technisch versierte Benutzer können individuelle CSS-Regeln geändert werden, um komplexere Designänderungen vorzunehmen.

Farben #

Die konfigurierbaren Farben können in dem Abschnitt unter dem CSS-Kommentar „Farben“ identifiziert und konfiguriert werden. /* Farben */

Schriftarten #

Ähnlich wie bei den Farben kann die Schriftart-Variable unter dem Kommentar /* Schriftart */ gefunden werden.

Sie hat typischerweise eine Variable wie: --font-family: 'Kumbh Sans', sans serif;

Für Entwickler #

Styling #

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

Sie können all dies für Desktop und Mobilgeräte separat bearbeiten. Standardmäßig verwendet die Omni-Suche dasselbe HTML für alle Bildschirmgrößen und verwendet CSS, um vollständig responsiv zu sein. Deshalb hat der Mobile-Tab zu Beginn keinen Code.

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

Anfangs möchten Sie möglicherweise nur einige Dinge anpassen, um das Design an das Erscheinungsbild und Gefühl Ihrer Marke anzupassen - Sie können Ihr Design später immer noch 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 geänderten Elementen gewidmet, wie Sortierlabels, Währung und den verschiedenen Texten, die Sie in Ihre Sprache übersetzen können.

CSS #

Styling, das mit dem HTML injiziert wird und Ihnen die volle Kontrolle über die visuellen Elemente in einer abgeschotteten Weise gibt.

Verfügbare Unterdesigns #

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

Sie können das Referenzdesign eines Unterdesigns löschen, duplizieren und kopieren, indem Sie auf die Schaltfläche mit den drei Punkten klicken.

Um ein Unterdesign zu bearbeiten, klicken Sie auf das Bearbeiten-Symbol. Wenn Sie mit der Bearbeitung fertig sind, klicken Sie auf Speichern & schließen, um zum Hauptlayout-Editor zurückzukehren.

Einige Elemente benötigen spezifische Identifikatoren, wie:

• Das Eingabefeld id="clerk-omnisearch-input"
• Der Inhaltswrapper 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 häufigsten Änderungen, die an Designs vorgenommen werden, sind diese:

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

• Schriftarten: Passen Sie gegebenenfalls die Schriftarten an, um das Erscheinungsbild und Gefühl Ihrer Website zu entsprechen.

• Farben: Sie können die Farben Ihrer Marke in den Elementen hinzufügen, die Sie hervorheben oder mit dem Rest Ihrer Website wie Schaltflächen und Tags harmonisieren möchten.

• Schaltflächen und Tag-Ränder: Sie können deren Farbe, Radius, Breite anpassen…

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

Overlay-Struktur #

Wenn Omnisearch initiiert wird, erstellt es ein Element mit der Klasse clerk-omnisearch-overlay und wird in den unteren Bereich des Bodys eingefügt.

Hier werden wir das Design injizieren, da wir das Eingabeelement als Teil des Designs haben und wir strukturelle Anforderungen haben müssen, um sicherzustellen, dass wir das Eingabeelement bei jedem Laden nicht neu rendern. Die Struktur sollte wie folgt unter dem Overlay 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 Identifikator haben clerk-omnisearch-input. Sobald das Auslöseelement aktiviert wurde, bewegen wir den Cursorfokus auf dieses Element und fügen die Abfrage hinzu, die wir haben, damit wir die Benutzererfahrung einigermaßen nahtlos halten können.

Inhaltswrapper #

Der Inhaltswrapper ist der Ort, an dem die meisten Dinge passieren, der Wrapper darum muss den Identifikator clerk-omnisearch-content haben. Hier sollten die Facetten, die Schieberegler und alles andere sein, was nicht das Eingabefeld ist.

Klassen #

Funktionalität kann dem Design hinzugefügt werden, indem spezifische Klassen zu Elementen hinzugefügt werden.

Schaltfläche schließen #

clerk-omnisearch-close

Wenn die Klasse einem Element innerhalb des Designs zugewiesen wird, wird dieses Element das Overlay ausblenden.

Sortierung #

clerk-omnisearch-sort

Findet Sortierdropdowns und fügt ihnen Listener hinzu.

Um ein Sortierungselement im Design zu erhalten, fügen Sie dies dem auswählenden Element hinzu, z.B. einem Dropdown. Damit es funktioniert, muss das Element folgendes sein value:[desc|asc], also der Wert, den wir sortieren möchten, 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 #

clerk-facet-search

Wenn eine Facettensuche vorhanden ist, erstellt sie einen Listener und blendet Facetten aus, die nicht mit der Abfrage übereinstimmen.

Die Klasse, wenn sie auf einer Webseite vorhanden ist, überprüft die Existenz von Facettensuchelementen. Facettensuchen bieten eine Möglichkeit für Benutzer, in den Facetten zu suchen. Damit es funktioniert, muss das Element einen Stringwert haben.

Vollständige Rücksetzung #

clerk-omnisearch-full-reset

Wenn darauf geklickt wird, werden Elemente mit der Klasse alle ausgewählten Facetten löschen und die Abfrage zurücksetzen.

Facetten-Rücksetzung #

clerk-omnisearch-facet-full-reset

Wenn darauf geklickt wird, werden Elemente mit der Klasse alle aktiven Facetten abwählen. Dies würde typischerweise auf einer ‘Alle löschen’-Schaltfläche innerhalb einer Gruppe von Facetten zu sehen sein, die es Benutzern ermöglicht, ihre ausgewählten Filter in einer einfachen Aktion zurückzusetzen.

Gruppen-Rücksetzung #

clerk-omnisearch-facet-group-reset

Wenn darauf geklickt wird, werden Elemente mit dieser Klasse alle untergeordneten Elemente innerhalb der Gruppe abwählen.

Um die Funktion zu bieten, eine gesamte Gruppe von Facetten abzuwählen, kann einem Element die Klasse zugewiesen werden. Sobald das Element aktiviert wird (z.B. durch Klicken), werden alle Elemente innerhalb seiner Gruppe abgewählt, wodurch diese Facettengruppe zurückgesetzt wird. Damit es funktioniert, muss das Element die Gruppe, die wir löschen möchten, als Attribut mit dem Namen data-facet-group haben.

Facetten-Rücksetzung #

clerk-omnisearch-facet-reset

Elemente mit dieser Klasse müssen ein einzelnes Element mit dem gegebenen Gruppen/Wert-Attributpaar abwählen.

Diese Klasse ist für Szenarien konzipiert, in denen es notwendig ist, eine einzelne Facette abzuwählen. Ein Element mit dieser Klasse kann mit einer bestimmten Facette in einer Gruppe verknüpft werden, indem es sowohl ein data-facet-group- als auch ein data-facet-value-Attribut erhält. Bei Aktivierung wird es nur die zugehörige Facette basierend auf dem gegebenen Gruppen/Wert-Attributpaar abwählen, während andere ausgewählte Facetten unverändert bleiben.

Facette klicken #

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 drückt.