Ein einziges ganzseitiges Fenster, das Ihren Besuchern die Ergebnisse liefert, die am ehesten zu einer Konversion führen.
Omnisearch basiert auf der neuesten Suchtechnologie von Clerks und bietet Ihnen die Flexibilität, die Sie benötigen, um die beste moderne Sucherfahrung anzubieten:
Live-Ergebnisse werden Ihren Besuchern während der Eingabe angezeigt und umfassen Produkte, Kategorien und Seiten.
Vorschläge für Suchanfragen inspirieren Ihre Besucher dazu, Ihren Katalog durch beliebte Suchanfragen zu entdecken.
Sortieren und Filtern: damit Ihre Besucher ihre Suche auf intuitive und einfache Weise verfeinern können.
Einfache Integration in Ihre Website mit einer unserer großartigen Startvorlagen.
Anpassung an Ihre Marke durch Änderung einiger Standardeinstellungen wie Logo, Schriftarten, Farben und mehr.
Es ist vollständig anpassbar mit HTML, CSS und Liquid für Entwickler.
Omnisearch besteht aus einem anpassbaren Design für die visuelle Gestaltung und einem Inhaltsblock, mit dem es auf Ihrer Website installiert werden kann.
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.
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.
Der 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.
Das Muster, durch das der Inhaltsblock gerendert werden soll. Wählen Sie das von Ihnen erstellte Muster aus.
Wenn Ihr Entwurf Variablen enthält, können diese hier ebenfalls festgelegt werden.
Sie können die Anzahl der Ergebnisse festlegen, die für jeden Typ bei jeder Suche angezeigt werden sollen. Wir empfehlen im Allgemeinen diese Werte:
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 in der Liste nicht finden können, fügen Sie es in der Liste “filterbare Attribute” unter Suchkonfiguration hinzu.
Die empfohlene Methode hierfür ist injection, aber Sie können den Inhalt auch mit einem Embedcode in Ihre Website einfügen.
Die Sichtbarkeit wird verwendet, um zu kontrollieren, wer die Omnisearch sehen kann.
Mit Vorschau können Sie Ihren Inhalt testen, ohne Ihre Live-Site zu beeinträchtigen. Sie können Ihre Seite in der Vorschau öffnen, indem Sie auf “Seite in Vorschau öffnen” klicken oder indem Sie ?clerk_content_mode=preview zur URL Ihrer Seite hinzufügen.
In meiner Live-Site wird verwendet, wenn Sie die Tests abgeschlossen haben und bereit sind, sie zu veröffentlichen.
Dies ist der einfachste Weg zur Installation. Clerk fügt den Omnisearch-Code automatisch zu Ihrer Website hinzu, indem er ein Suchfeld Ihrer Wahl anvisiert und auf der Grundlage eines Ereignisses auslöst.
Das Ereignis bestimmt, was der Benutzer tun muss, um die Omnisearch 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 z. B. möchten, dass Ihr Omnisearch-Inhalt nur dann angezeigt wird, wenn Ihre Besucher mit Ihrer Suchleiste interagieren (darauf klicken oder den Fokus darauf richten), müssen Sie nur den eindeutigen CSS-Selektor finden, der 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:
Ü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 Inspect oder ähnlich wählen.
Finden Sie das Element, auf das Sie abzielen möchten
Klicken Sie mit der rechten Maustaste darauf, und wählen Sie die Option Kopieren > Selektor kopieren
Damit können Sie Omnisearch mit einem Snippet hinzufügen. Dazu müssen Sie in der Lage sein, die HTML-Dateien Ihres Webshops zu bearbeiten oder Code mit einem Editor hinzuzufügen.
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 “
"-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.
Designs bestehen aus einem Hauptlayout, CSS-Styling und einer Reihe von Unterdesigns, die im Hauptlayout referenziert werden können. Sie können alle diese Designs für Desktop und Mobile getrennt voneinander bearbeiten.
Anfänglich möchten Sie vielleicht nur ein paar Dinge anpassen, damit das Design dem Erscheinungsbild Ihrer Marke entspricht - Sie können Ihr Design später immer noch bearbeiten.
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 den Verweis 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 spezifische Bezeichner, damit Ihr Entwurf funktioniert, wie z. B. das Eingabefeld id="clerk-omnisearch-input" oder 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 “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 hervorheben oder mit dem Rest Ihrer Website abstimmen möchten, z. B. Schaltflächen und Tags.
Schaltflächen und Tag-Ränder: Sie können deren Farbe, Radius, Breite… anpassen.
Links: Wenn Sie ein bestimmtes Styling für Ihre Links haben, können Sie es ebenfalls bearbeiten.
Wenn die Omnissuche gestartet wird, wird ein Element mit der Klasse clerk-omnisearch-overlay erstellt und am unteren Ende des Bodys eingefügt.
Dies ist der Ort, an dem wir das Design einfügen werden. 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:
When omnisearch is initiated, it creates an element with the class clerk-omnisearch-overlay and is injected into the bottom of the body.
This is where we will inject the design, as we have the input element as part of the design we need to have a structual demands to ensure we don’t re-render the input element on each load.
The structure should look like the following underneath the overlay:
Um das Eingabefeld zu finden, muss es den folgenden Bezeichner “clerk-omnisearch-input” haben. Sobald das Trigger-Element 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.
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.
Findet Sortier-Dropdowns und fügt ihnen Listener hinzu.
Um ein sortierendes Element im Entwurf zu erhalten, fügen Sie dies dem auswählenden Element, z.B. einem Dropdown, hinzu. Um zu funktionieren, muss das Element wie folgt aussehen: value:[desc|asc], also der 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.
Wenn eine Facettensuche vorhanden ist, wird ein Listener erstellt und Facetten, die nicht mit der Abfrage übereinstimmen, werden ausgeblendet.
Die Klasse prüft, wenn sie in einer Webseite vorhanden ist, auf das Vorhandensein von Facettensuchelementen. Die Facettensuche bietet den Benutzern die Möglichkeit, in den Facetten zu suchen. Damit sie funktioniert, muss das Element einen String-Wert haben.
Wenn sie angeklickt werden, heben Elemente mit dieser Klasse die Auswahl aller aktiven Facetten auf. Dies würde typischerweise auf einer Schaltfläche im Stil von “Alle löschen” innerhalb einer Gruppe von Facetten zu sehen sein, so dass Benutzer ihre ausgewählten Filter mit einer einfachen Aktion zurücksetzen können.
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.
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 einen data-facet-value gibt. Bei der Aktivierung wird nur die zugehörige Facette auf der Grundlage des angegebenen Gruppe/Wert-Attributpaares abgewählt, während andere ausgewählte Facetten unverändert bleiben.
