Search

FAQ

De mest almindeligt stillede spørgsmål om Search
Denne kode er tænkt som et udgangspunkt, der kan tilpasses dine behov.

Mange browsere understøtter stemmesøgning som standard, hvilket gør det ret ligetil for udviklere at implementere i Clerk.io’s Search-funktioner.

Nedenfor er et eksempel på et script, der kan bruges til at transskribere tekst ved hjælp af en mikrofon. Specifikt vil det indsætte tekst i Clerk.io’s Omnisearch inputfelt.

Det tilføjer en knap, som, når den klikkes, aktiverer browserens stemmegenkendelses-API og indsætter teksten i inputfeltet.

Du kan tilføje dette script som en code block til et design editor design for en Instant Search eller direkte i et code design for Instant Search eller Omnisearch.


<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>

Dynamiske bannere #

Dette bruger Pages med type: "banner", og viser det første banner, der findes. Tilpas HTML/CSS, så det passer til dit design.

Tilføj dynamiske kampagnebannere i Omnisearch ved at tilføje Pages, hvor type er banner og image peger på din bannerfil. Når en Page som denne findes i en søgning, vises banneret over resultaterne.

  • Datasynkronisering skal inkludere Pages. Se Data Feeds › Pages.
  • Hvert kampagnebanner skal være en Page med:
    • type: banner
    • url: Banner landing page
    • title: Kort beskrivelse for tilgængelighed/alt
    • image: Direkte link til bannerfilen (JPG/PNG/WEBP)
    • Brug text eller keywords, så din Page vises ved matchende søgninger

Eksempel på Page-objekt:

{
  "id": 9876,
  "type": "banner",
  "url": "https://yourstore.com/campaigns/spring-sale",
  "title": "Spring Sale – Op til 30% på Adidas",
  "text": "spring sale adidas sko sneakers træningssko",
  "image": "https://yourstore.com/cdn/banners/spring-sale-adidas.webp"
}

I din Omnisearch hovedlayout (code design), tilføj øverst for at vise den første banner Page:

{% 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; 
}

Godt at vide #

  • Ingen ekstra API-kald; Omnisearch inkluderer pages. Filtrer efter type.
  • Behold gerne din normale Pages-sektion. Dette tilføjer blot et banner.
  • Sørg for, at dit Omnisearch-element returnerer nok pages (anbefalet: 6–10) for at banner Pages kan vises. Dette konfigureres via elementindstillingerne (f.eks. data-omni-search-pages).

Ukendt nøgleordsfejl #

Hvis du bruger det standard Omnisearch-design og støder på en Unknown Keyword in template fejl, skyldes det sandsynligvis et forkert opsat Liquid-kodeblok brugt til os-banner.

For at rette dette skal du opdatere os-banner kodeblokken i dit Omnisearch-design.

Hvad skal rettes #

Find følgende kode i dit Omnisearch design:

{% 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 %}

Udskift den med denne opdaterede 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 %}

Denne side er oversat af en hjælpsom AI, og der kan derfor være sproglige fejl. Tak for forståelsen.