Search

FAQ

Die am häufigsten gestellten Fragen zu Search
Dieser Code dient als Ausgangspunkt und kann an Ihre Bedürfnisse angepasst werden.

Viele Browser unterstützen die Sprachsuche nativ, wodurch es für Entwickler recht einfach ist, die Suchfunktionen von Clerk.io damit zu erweitern.

Unten finden Sie ein Beispielscripts, das zum Transkribieren von Text über ein Mikrofon verwendet werden kann. Insbesondere wird der Text in das Clerk.io Omnisearch Eingabefeld eingefügt.

Es fügt einen Button hinzu, der beim Anklicken die Spracherkennungs-API des Browsers auslöst und den Text in das Eingabefeld einfügt.

Dieses Script können Sie als Codeblock in einem Design-Editor-Design für die Instant Search oder direkt in einem Code-Design für Instant Search oder Omnisearch einfügen.


<button class="mic-button" onclick="startVoiceSearch()">🎙️</button>

<script>
function startVoiceSearch() {
    if (!('webkitSpeechRecognition' in window)) {
        alert("Your browser does not support voice recognition.");
        return;
    }

    let recognition = new webkitSpeechRecognition();
    recognition.lang = "en-US";
    recognition.interimResults = false;
    recognition.maxAlternatives = 1;
    recognition.onstart = () => console.log("Listening...");
    recognition.onerror = (event) => console.error("Speech Recognition Error:", event);
    recognition.onend = () => console.log("Speech recognition ended.");
    recognition.onresult = function(event) {
        let transcript = event.results[0][0].transcript;
        updateSearchInput(transcript);
    };
    recognition.start();
}

function updateSearchInput(text) {
    let input = document.getElementById("clerk-omnisearch-input");
    input.value = text;
    // Trigger events for search to update properly
    ['input', 'change', 'keydown', 'keyup'].forEach(eventType => {
        let event = new Event(eventType, { bubbles: true });
        input.dispatchEvent(event);
    });
    console.log("Voice input added:", text);
}
</script>

Dynamische Banner #

Dies verwendet Pages mit type: "banner" und rendert das erste gefundene Banner. Passen Sie HTML/CSS an Ihr Design an.

Fügen Sie dynamische Kampagnenbanner in Omnisearch hinzu, indem Sie Pages mit type als banner bereitstellen und image auf Ihre Bannerdatei verweisen. Wenn eine solche Page bei einer Suche gefunden wird, erscheint das Banner oberhalb der Ergebnisse.

  • Das Daten-Sync muss Pages beinhalten. Siehe Data Feeds › Pages.
  • Jedes Kampagnenbanner sollte eine Page mit folgenden Attributen sein:
    • type: banner
    • url: Banner-Landingpage
    • title: Kurze Beschreibung für Barrierefreiheit / Alt-Text
    • image: Direkter Link zur Bannerdatei (JPG/PNG/WEBP)
    • Verwenden Sie text oder keywords, damit Ihre Page bei passenden Suchanfragen erscheint

Beispiel eines Page-Objekts:

{
  "id": 9876,
  "type": "banner",
  "url": "https://yourstore.com/campaigns/spring-sale",
  "title": "Spring Sale – Bis zu 30% auf Adidas",
  "text": "spring sale adidas shoes sneakers trainers",
  "image": "https://yourstore.com/cdn/banners/spring-sale-adidas.webp"
}

Fügen Sie im Hauptlayout (Code Design) Ihrer Omnisearch diesen Code zu Beginn hinzu, um das erste Banner anzuzeigen:

{% assign bannerShown = false %}
{% for page in pages %}
  {% if page.type == "banner" and bannerShown == false %}
    <a class="os-banner" href="{{ page.url }}" aria-label="{{ page.title }}">
      <img src="{{ page.image }}" alt="{{ page.title }}" loading="lazy" />
    </a>
    {% assign bannerShown = true %}
  {% endif %}
{% endfor %}

Banner-Styling:

.os-banner { 
  display: block; 
  margin: 0 0 16px 0; 
}
.os-banner img { 
  width: 100%; 
  height: auto; 
  border-radius: 8px; 
  display: block; 
}

Gut zu wissen #

  • Kein zusätzlicher API-Call; Omnisearch beinhaltet pages. Filtern Sie nach type.
  • Falls gewünscht, behalten Sie Ihren normalen Pages-Bereich. Dies ergänzt nur ein Banner.
  • Stellen Sie sicher, dass Ihr Omnisearch-Element genug pages (empfohlen: 6–10) zurückliefert, sodass Banner-Pages verfügbar sind. Dies konfigurieren Sie über die Element-Einstellungen (z.B. data-omni-search-pages).

Unbekannter Keyword-Fehler #

Wenn Sie das Standard-Omnisearch-Design verwenden und auf einen Unknown Keyword in template-Fehler stoßen, liegt dies wahrscheinlich an einem fehlerhaften Liquid-Code-Block für das os-banner.

Um dies zu beheben, müssen Sie den os-banner-Codeblock in Ihrem Omnisearch-Design aktualisieren.

Das müssen Sie anpassen #

Suchen Sie in Ihrem Omnisearch-Design nach folgendem Code:

{% if top_banner %}
  <a
    class="os-banner"
    {% if os_banner_link == '' %}
      href="#"
    {% else %}
      href="{{ os_banner_link }}"
    {% endif %}
  >
    <img width="auto" height="auto" src="{{ top_banner }}">
  </a>
{% endif %}

Ersetzen Sie ihn durch dieses aktualisierte Snippet:

{% if top_banner %}
  {% assign banner_href = os_banner_link %}
  {% if os_banner_link == '' %}{% assign banner_href = '#' %}{% endif %}
  <a class="os-banner" href="{{ banner_href }}">
    <img width="auto" height="auto" src="{{ top_banner }}">
  </a>
{% endif %}

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.