FAQ

Le domande più frequenti su Search

Voice Search #

Questo codice è pensato come punto di partenza che può essere adattato alle tue esigenze.

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

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

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

Puoi aggiungere questo script come code block a un design editor design per una Instant Search o 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>

## Mostrare un banner in cima a Omnisearch dai risultati delle Page

  Questo esempio utilizza le Pages con type: "banner" e visualizza il primo banner corrispondente sopra i risultati. Adatta l’HTML/CSS alle tue esigenze di design.



Puoi alimentare banner di campagna dinamici in Omnisearch inviando Pages con il campo `type` impostato su `banner` e un campo `image` che punta alla risorsa del tuo banner. Quando un visitatore effettua una ricerca e viene restituita una Page di questo tipo, il design la mostra in cima.

### 1) Crea le Pages banner
- Assicurati che la sincronizzazione dei dati includa le Pages. Guarda la struttura dell’oggetto in [Data Feeds › Pages](/integrations/any-webshop/data-feeds/#pages).
- Per ogni banner di campagna, invia una Page con almeno:
  - `type`: `banner`
  - `url`: URL di destinazione per il banner
  - `title`: Titolo breve per accessibilità/testo alternativo
  - `image`: URL completo dell’immagine del banner (JPG/PNG/WEBP)
  - Aggiungi parole chiave pertinenti in `text` o `keywords` così che la Page corrisponda alle ricerche desiderate

Esempio di oggetto Page (estratto):

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

Aggiungi questo snippet vicino alla parte superiore del layout principale di Omnisearch (code design). Mostra la prima Page in cui type == "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 minimo:

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

Note #

Non è necessaria alcuna chiamata API aggiuntiva; Omnisearch già restituisce pages. È sufficiente filtrare in base al type.
Se vuoi, mantieni la tua sezione Pages regolare. Lo snippet sopra aggiunge solo un banner e non nasconde le altre Pages.
Assicurati che il tuo elemento Omnisearch restituisca un numero sufficiente di pages (es. 6–10) così che le Pages banner possano essere incluse. Puoi regolarlo nelle impostazioni dell’elemento (es. data-omni-search-pages).

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

FAQ

Voice Search #

2) Visualizza il banner nel tuo design Omnisearch #

Note #