Omnisearch

• Live-Ergebnisse Die Suchergebnisse werden Ihren Besuchern während der Eingabe angezeigt und umfassen Produkte, Kategorien und Seiten.
• Sortierung und FilterungOmnisearch ist eine Suchfunktion, die es Ihren Besuchern ermöglicht, ihre Suche auf intuitive und einfache Weise zu verfeinern.
• Leicht zu integrieren in Ihrer Website mit einer unserer großartigen Startvorlagen.
• Es passt zu Ihrer Marke durch ein paar Standardeinstellungen wie Logo, Schriftarten, Farben und mehr zu ändern.
• Es ist vollständig anpassbar mit HTML, CSS und Liquid für Entwickler.

Erste Schritte #

Omnisearch besteht aus einem anpassbaren Gestaltung für die visuelle Darstellung und einem Inhalt Block, mit dem es auf Ihrer Website installiert werden kann.

Design erstellen #

Dies geschieht in Search > Designs > New Design

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

Klicken Sie auf Save & Close, um das Standardmuster fertig zu stellen.

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

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, mit der die Ergebnisse angezeigt werden sollen, und die Einstellungen, wie viele Ergebnisse angezeigt werden sollen.

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

• Art des Inhalts 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 Konfigurationen ist dies nicht notwendig.

• Leerzustand Logik ermöglicht es Ihnen, die Art der Produkte auszuwählen, die beim ersten Öffnen von Omnisearch angezeigt werden sollen, bevor irgendwelche Wörter eingegeben werden. Standardmäßig ist dies Verkaufsschlager, kann aber auch personalisiert werden, z.B. mit Besucher-Empfehlungen.

Entwurf fertigstellen #

Das Design, durch das der Inhaltsblock gerendert werden soll. Wählen Sie das von Ihnen erstellte Design aus.

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

Sie können die Anzahl der Ergebnisse steuern, die für jeden Typ bei jeder Suche angezeigt werden soll. Wir empfehlen im Allgemeinen diese Beträge:

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

Wählen Sie schließlich die Attribute aus, die Sie als Facetten einschließen 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 in der Liste “filterbare Attribute” unter Suche Konfiguration hinzu.

Einfügen in die Website #

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

• In der Vorschau ermöglicht es Ihnen, Ihre Inhalte zu testen, ohne Ihre Live-Site zu beeinträchtigen. Sie können Ihre Website in der Vorschau öffnen, indem Sie auf “Website in der Vorschau öffnen” klicken oder indem Sie ?clerk_content_mode=preview zur URL Ihrer Website hinzufügen.

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

Injektion verwenden #

Dies ist die einfachste Art der Installation. Clerk fügt den Omnisearch-Code automatisch in Ihre Website ein, indem er auf ein Suchfeld Ihrer Wahl abzielt und auf der Grundlage eines Ereignisses ausgelöst wird.

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

• Element bestimmt den Teil der Website, mit dem der Benutzer interagieren soll. Wenn Sie beispielsweise möchten, dass Ihre Omnisearch-Inhalte nur dann angezeigt werden, wenn Ihre Besucher mit Ihrer Suchleiste interagieren (darauf klicken oder den Fokus darauf richten), müssen Sie nur die eindeutige CSS-Selektor finden, die darauf angewendet wird. Wenn Sie unterschiedliche Bezeichner für Mobilgeräte und Desktops haben, fügen Sie sie beide hinzu.

Finden Sie Ihren eindeutigen CSS-Selektor auf diese Weise:

1. Überprüfen Sie den Code Ihrer Website. In den meisten Browsern können Sie mit der rechten Maustaste auf eine beliebige Stelle Ihrer Seite klicken und Untersuchen Sie oder ähnliches wählen.
2. Suchen Sie das Element, auf das Sie abzielen möchten
3. Klicken Sie mit der rechten Maustaste darauf, und wählen Sie die Option Kopieren > Selektor kopieren

Eingebetteten Code verwenden #

Wenn Sie noch nicht gespeicherte Änderungen haben, speichern Sie diese, um den eingebetteten Code zu erzeugen.

Kopieren Sie diesen Code und fügen Sie ihn in die Datei ein, die alle Seiten des Webshops generiert, idealerweise in der Nähe des Endes 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.

Design-Konfiguration #

Der größte Teil der Omni-Suche kann durch Ändern der Variablen in den Designdateien konfiguriert werden.

In der Sprache für flüssige Vorlagen 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 versiertere Benutzer können natürlich noch bestimmte HTML- und CSS-Zeilen ändern, siehe dieser Abschnitt.

Logo #

Um das Logo zum Omni-Search-Design hinzuzufügen, suchen Sie einfach die Bild-URL und fügen Sie sie in den Wert für die Variable ein: os_brand_logo.

Die Variable hat normalerweise einen Namen wie os_brand_logo und sollte nach dem Einfügen des Logos so aussehen:

Infinite/auto load #

Wenn Sie steuern möchten, ob die Omni-Suche automatisch weitere Produktergebnisse laden soll, sobald der Benutzer zur letzten Produktreihe gescrollt hat, sollte die Variable auf true oder false gesetzt werden. Die Variable hat normalerweise den Namen os_autoload. In diesem Beispiel lädt die Omni-Suche nicht automatisch weitere Produktergebnisse.

Übersetzungen #

Standardmäßig ist die Vorlage in Englisch. Wenn Sie ein Geschäft haben, das eine andere Sprache hat, können Sie die Textelemente übersetzen, indem Sie die Variablenwerte ändern.

Dieses Beispiel zeigt die Variablen für die Sortierschaltfläche:

Styling #

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

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

--variable_name: variable_value;

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

Farben #

Die konfigurierbaren Farben können im Abschnitt unter dem CSS-Kommentar “Farben” identifiziert und konfiguriert werden /* Colors */

Schriftarten #

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

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

Für Entwickler #

Styling #

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

Sie können alle diese Designs für Desktop und Mobile getrennt voneinander bearbeiten. Standardmäßig verwendet die Omni-Suche den gleichen HTML-Code für alle Bildschirmgrößen und nutzt CSS, um vollständig responsiv zu sein. Aus diesem Grund enthält die Registerkarte “Mobil” zu Beginn keinen Code.

Bei Bedarf können Sie ein völlig anderes HTML-Markup für Mobile erstellen, das auf kleineren Bildschirmen verwendet wird.

Vielleicht möchten Sie zunächst nur einige wenige Dinge an Passen Sie das Design an das Erscheinungsbild Ihrer Marke an anpassen - Sie können Ihr Design später immer noch bearbeiten.

HTML #

Dies ist das Hauptlayout, das die Platzierung aller Elemente steuert. Es verwendet Flüssig als Schablonensprache.

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

CSS #

Styling, das in den HTML-Code eingefügt wird und Ihnen die volle Kontrolle über das Erscheinungsbild gibt.

Verfügbare Unterentwürfe #

Alle hier hinzugefügten Designs 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 die Referenz eines jeden Unterentwurfs löschen, duplizieren und kopieren, indem Sie auf die Schaltfläche mit den drei Punkten klicken.

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

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

• 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 auf die Schaltfläche “Entwurfsvorschau” klicken.

Die am häufigsten vorgenommenen Änderungen an Entwürfen sind die folgenden:

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

• Schriftarten: Passen Sie bei Bedarf die Schriftarten an das Erscheinungsbild Ihrer Website an.

• Farben: Sie können die Farben Ihrer Marke in die Elemente einfügen, die Sie betonen oder mit dem Rest Ihrer Website abstimmen möchten, wie Schaltflächen und Tags.

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

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

Überlagerungsstruktur #

Wenn die Omnisuche gestartet wird, wird ein Element mit der Klasse clerk-omnisearch-overlay erstellt und in den unteren Teil des Body eingefügt.

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">
        Content!
    </div>
</div>

Eingabefeld #

Um das Eingabefeld zu finden, muss es den folgenden Bezeichner haben: clerk-omnisearch-input. Sobald das Triggerelement 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 #

Funktionalität kann dem Design hinzugefügt werden, indem man den Elementen bestimmte Klassen hinzufügt.

Schaltfläche “Schließen #

clerk-omnisearch-close

Wenn Sie die Klasse an ein Element innerhalb des Entwurfs anhängen, blendet dieses Element das Overlay aus.

Sortierung #

clerk-omnisearch-sort

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

Um ein Sortierelement im Entwurf zu erhalten, fügen Sie dies dem auswählenden Element, z. B. einem Dropdown, hinzu. Um zu funktionieren, muss das Element den folgenden value:[desc|asc], also den 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 #

clerk-facet-search

Wenn eine Facettensuche vorhanden ist, wird ein Listener erstellt und Facetten, die nicht mit der Abfrage übereinstimmen, werden ausgeblendet.

Wenn die Klasse auf einer Webseite vorhanden ist, prüft sie, ob es Elemente für die Facettensuche gibt. Die Facettensuche bietet den Benutzern die Möglichkeit, in den Facetten zu suchen. Damit sie funktioniert, muss das Element einen String-Wert haben.

Vollständig löschen #

clerk-omnisearch-full-reset

Wenn Sie auf ein Element mit dieser Klasse klicken, werden alle ausgewählten Facetten gelöscht und die Abfrage zurückgesetzt.

Facetten löschen #

clerk-omnisearch-facet-full-reset

Wenn sie angeklickt werden, heben Elemente mit dieser Klasse die Auswahl aller aktiven Facetten auf. Dies ist typischerweise bei einer Schaltfläche im Stil von “Alle löschen” innerhalb einer Gruppe von Facetten zu sehen, so dass Benutzer ihre ausgewählten Filter mit einer einfachen Aktion zurücksetzen können.

Gruppe löschen #

clerk-omnisearch-facet-group-reset

Wenn sie angeklickt werden, heben Elemente mit dieser Klasse die Auswahl aller untergeordneten Elemente innerhalb der Gruppe auf.

Um eine ganze Gruppe von Facetten abwählen zu können, kann ein Element mit dieser Klasse versehen 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 #

clerk-omnisearch-facet-reset

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

Diese Klasse ist für Szenarien gedacht, in denen es notwendig ist, eine einzelne Facette abzuwählen. Ein Element mit dieser Klasse kann mit einer bestimmten Facette in einer Gruppe assoziiert werden, indem man ihm sowohl eine data-facet-group als auch eine data-facet-value gibt. Bei der Aktivierung wird nur die assoziierte Facette basierend auf dem gegebenen Gruppe/Wert-Attribut-Paar abgewählt, wobei 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 gerade drückt.