FAQ

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

## Zeigen Sie ein Banner oben in Omnisearch aus Page-Ergebnissen an

  Dieses Beispiel verwendet Pages mit type: "banner" und rendert das erste passende Banner über den Ergebnissen. Passen Sie das HTML/CSS an Ihr Design an.



Sie können dynamische Kampagnenbanner in Omnisearch integrieren, indem Sie Pages mit dem `type` auf `banner` und ein `image`, das auf Ihr Banner-Asset verweist, senden. Wenn ein Besucher sucht und ein passendes Page dieses Typs zurückgegeben wird, wird es im Design ganz oben angezeigt.

### 1) Banner-Pages erstellen
- Stellen Sie sicher, dass Ihr Datensync Pages beinhaltet. Siehe den Objektaufbau unter [Data Feeds › Pages](/integrations/any-webshop/data-feeds/#pages).
- Für jedes Kampagnenbanner senden Sie ein Page mit mindestens:
  - `type`: `banner`
  - `url`: Ziel-URL für das Banner
  - `title`: Kurzer Titel für Barrierefreiheit/Alt-Text
  - `image`: Vollständige URL zum Bannerbild (JPG/PNG/WEBP)
  - Fügen Sie relevante Keywords in `text` oder `keywords` hinzu, damit das Page zu den gewünschten Suchanfragen passt

Beispiel-Page-Objekt (Ausschnitt):

```json
{
  "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"
}

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

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