Search

FAQ

Le domande più frequenti su Search
Questo codice è pensato come punto di partenza che può essere personalizzato in base alle tue esigenze.

Molti browser supportano la ricerca vocale nativamente, rendendo abbastanza semplice per gli sviluppatori implementarla nelle funzionalità di ricerca di Clerk.io.

Di seguito è riportato uno script di esempio che può essere utilizzato per trascrivere il testo utilizzando un microfono. In particolare, inserirà il testo nel campo di input Omnisearch di Clerk.io.

Aggiunge un pulsante che, quando viene cliccato, attiva l’API di riconoscimento vocale del browser e inserisce il testo nel campo di input.

Puoi aggiungere questo script come blocco di codice a un design dell’editor per una Instant Search oppure direttamente in un code design per Instant Search o 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>
Questo utilizza le Pages con type: "banner", mostrando il primo banner trovato. Modifica HTML/CSS per adattarli al tuo design.

Aggiungi banner dinamici per le campagne in Omnisearch fornendo Pages dove type è banner e image indica il file del tuo banner. Quando una Page di questo tipo viene trovata in una ricerca, il banner appare sopra i risultati.

Configurazione Banner Page #

  • La sincronizzazione dei dati deve includere le Pages. Vedi Data Feeds › Pages.
  • Ogni banner di campagna deve essere una Page con:
    • type: banner
    • url: Pagina di atterraggio del banner
    • title: Breve descrizione per accessibilità/alt
    • image: Link diretto al file banner (JPG/PNG/WEBP)
    • Utilizza text o keywords così la tua Page appare per le ricerche corrispondenti

Esempio di oggetto Page:

{
  "id": 9876,
  "type": "banner",
  "url": "https://yourstore.com/campaigns/spring-sale",
  "title": "Saldi di primavera – Fino al 30% su Adidas",
  "text": "saldi primavera adidas scarpe sneakers trainers",
  "image": "https://yourstore.com/cdn/banners/spring-sale-adidas.webp"
}

Codice Render Banner #

Nel layout principale di Omnisearch (code design), aggiungi vicino alla cima per mostrare la prima Page banner:

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

Stile per il banner:

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

Cosa Sapere #

  • Nessuna chiamata API aggiuntiva; Omnisearch include pages. Filtra per type.
  • Mantieni la tua sezione Pages normale se lo desideri. Questo aggiunge solo un banner.
  • Assicurati che il tuo elemento Omnisearch restituisca abbastanza pages (consigliato: 6–10) affinché le Pages banner siano disponibili. Puoi configurarlo tramite le impostazioni dell’elemento (ad es. data-omni-search-pages).

Errore Keyword Sconosciuta #

Se stai utilizzando il design standard di Omnisearch e incontri un errore Unknown Keyword in template, è probabile che sia causato da un blocco di codice Liquid errato usato per os-banner.

Per risolvere, devi aggiornare il blocco di codice os-banner nel tuo design di Omnisearch.

Cosa correggere #

Individua questo codice nel tuo design Omnisearch:

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

Sostituiscilo con la seguente versione aggiornata:

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

Questa pagina è stata tradotta da un'utile intelligenza artificiale, quindi potrebbero esserci errori linguistici. Grazie per la comprensione.