Search

Richten Sie Search ein, nachdem Sie Ihre Daten importiert und überprüft haben. Identifizieren Sie zuerst, wie Ihr Theme Search auf Desktop und Mobilgerät öffnet, und wählen Sie dann die passende Experience.

Search inspizieren #

Ein Theme kann separate Desktop-Eingabefelder, mobile Icons, verborgene Panels und Suchfelder auf der Startseite haben. Inspizieren Sie jedes, bevor Sie Trigger wählen.

1. Öffnen Sie den Webshop auf Desktop und Mobilgerät. Finden Sie alle Eingabefelder oder Steuerelemente, die Search öffnen.
2. Verwenden Sie Entwicklertools, um stabile Selektoren zu inspizieren und zu bestätigen, welches Eingabefeld getippten Text entgegennimmt.
3. Testen Sie das native Dropdown, das mobile Panel, die Enter-Taste und das Abschicken des Formulars. Notieren Sie, welche Verhaltensweisen ersetzt oder beibehalten werden müssen.
4. Prüfen Sie einen anderen Seitentyp; ein Suchfeld auf der Startseite kann sich vom Header-Eingabefeld unterscheiden.

Fodmagasinets Beispiel-Trigger sind .search-bar #search-overlay-input und #frontpage_search_container. Prüfen Sie, ob diese Selektoren existieren und dieselbe Funktion in Ihrem Webshop haben. Ein Trigger-Container ist nicht zwangsläufig das Texteingabefeld selbst.

Experience wählen #

Verwenden Sie Omnisearch für eine kombinierte Search-Experience, oder behalten Sie ein separates Dropdown und eine Suchseite, wenn das besser zu Ihrem Theme passt.

Omnisearch erstellen #

1. Gehen Sie zu Search > Designs > New Design und wählen Sie eine Omnisearch-Vorlage.
2. Benennen und speichern Sie das Design, und passen Sie dann die Produktkarten mit den card-data-Checks an. Produktseiten-Links ermöglichen Produkte, die Variantenauswahlen benötigen.
3. Gehen Sie zu Search > Elements > New Element, benennen Sie das Element und wählen Sie als Typ Omni-search.
4. Wählen Sie das Design, speichern Sie in In preview, und öffnen Sie die Einbetteinstellungen.
5. Konfigurieren Sie den verifizierten Trigger-Selektor per Injection oder kopieren Sie einmal den generierten Embed-Code in Ihr Theme.
6. Wählen Sie Full Overlay oder Partial Overlay und testen Sie alle vorgesehenen Trigger.

Für Partial Overlay setzen Sie den Header selector auf den nativen Header-Wrapper und den Search input selector auf das echte Texteingabefeld. Stellen Sie Breite und Höhe des Overlays passend zum Layout ein. Siehe Omnisearch für diese Optionen.

Fodmagasinets Partial-Konfiguration verwendet den nativen Header und das Eingabefeld statt eines geklonten Headers oder Warenkorbs. Dessen Selektoren, Header-Struktur, Breakpoints, Farben und Abstände sind Beispiele zum Prüfen, keine Anforderungen für andere Themes.

Separate Search #

Für ein Dropdown erstellen Sie ein Instant Search Design und ein Live-search Element. In den Einbetteinstellungen wählen Sie das verifizierte Feld und die Dropdown-Position aus.

Für eine Ergebnisseite erstellen Sie ein Search Page Design und Element, und fügen es in das Suchergebnisseiten-Template Ihres Themes ein. Übergeben Sie die aktuelle Query mit dem generierten Embed-Code und leiten Sie das native Formular auf diese Seite weiter.

Nutzen Sie die Anleitungen zu Instant Search und Search Page für die gemeinsame Konfiguration. Ersetzen Sie native Ergebnisse nur innerhalb ihres Ergebnis-Containers; belassen Sie Navigation und Seitenlayout außen herum erhalten.

Native Verhalten #

Lösen Sie sich überlappende Handler, bevor Sie Search für Besucher aktivieren. Das alleinige Verbergen eines nativen Dropdowns kann Tastatur- oder Formular-Handler aktiv lassen.

Geben Sie während der Vorschau echte Zeichen ein und prüfen Sie, ob native und Clerk.io-Ergebnisse gleichzeitig erscheinen. Inspizieren Sie Icon und Panel auf Mobilgeräten separat; das falsche Panel kann das Eingabefeld verbergen oder im Verlauf navigieren.

Wenn native Handler konkurrieren, soll der Theme-Entwickler nur das relevante Eingabefeld, Panel oder Formular anpassen. Beschränken Sie jeden temporären Ersatz auf den gedachten Search-Zustand, damit die normale Seite nach dem Schließen nutzbar bleibt.

Testen Sie die Pfade keydown, keyup und Formular-submit. Enter muss entweder das ausgewählte Clerk.io-Ergebnis öffnen oder die vorgesehene Suche ausführen. Setzen Sie Enter nicht global außer Kraft und entfernen Sie nicht alle Tastatur-Listener: Die Auswahl per Pfeiltaste muss weiter funktionieren.

Close und Escape müssen die darunterliegende Seite, Fokus und Scrollen wiederherstellen, ohne eine Rücknavigation oder leere Seite zu verursachen. Wiederholen Sie Öffnen/Schließen, navigieren Sie zu einem Ergebnis und testen Sie Zurück/Vor-Zurück auf Desktop und Mobilgerät.

Facetten #

Wählen Sie Filter aus Attributen, die bei importierten Produkten tatsächlich vorhanden sind. Felder wie vendor, brand oder Kategorie können von Ihrer Datenquelle abweichen.

Durchsuchen Sie mehrere Datensätze, wählen Sie die verfügbaren Attribute in der Search-Konfiguration aus, und geben Sie ihnen lokalisierte Bezeichnungen. Prüfen Sie, ob jede Facette die Ergebnisse korrekt ändert – auch für Produkte, denen ein optionales Attribut fehlt.

Vergleichen Sie zur Sortierung die importierten Werte mit den angezeigten Kartenpreisen. Ein visuelles niedrigstes Variantenpreis-Label korrigiert keinen falschen Parent-Preis, der für das Sortieren verwendet wird.

Siehe Search best practices für die Wahl nützlicher Filter und Ergebnisslayouts.

Content Results #

Importieren Sie Artikel und andere Seiten, bevor Sie diese in Search aktivieren. Folgen Sie Import Pages, wenn der native Feed sie nicht enthält.

Prüfen Sie dann die Ergebnisseinstellungen des Elements und den Page-Results-Abschnitt des Designs. Importierte Artikel können ausgeblendet bleiben, wenn der Abschnitt fehlt oder das Layout die Spalte versteckt.

Suchen Sie einen eindeutigen Artikeltitel und prüfen Sie dessen Link und Inhalt. Testen Sie dies unabhängig von Produktsuche und seitenbasierten Empfehlungen.

Sicheres Styling #

Halten Sie Search-CSS in seiner Komponente, damit es keine Recommendation-Slider an anderen Stellen auf der Seite beeinflussen kann.

Geben Sie beispielsweise Ihrem benutzerdefinierten Search-Karten-Wrapper eine eigene Klasse und beschränken Sie alle Regeln darauf:

.ideal-clerk-search .ideal-clerk-card {
  display: flex;
  flex-direction: column;
}

Wenden Sie Search-Layoutregeln nicht auf globale .clerk-slider, button oder .active Selektoren an. Überprüfen Sie Homepage- und Produkt-Slider, nachdem Sie Search geöffnet und geschlossen haben – inklusive Pfeilen, Breiten und Überlauf.

Zum Schluss die Setup-Checkliste durchgehen. Siehe die Search conflicts FAQ, wenn native Controls weiterhin stören.