Search

Preguntas frecuentes

Las preguntas más frecuentes sobre Search

Búsqueda por Voz #

Este código está pensado como punto de partida y puede adaptarse según tus necesidades.

Muchos navegadores admiten búsqueda por voz de forma nativa, lo que facilita bastante a los desarrolladores implementarla en las funciones de búsqueda de Clerk.io.

A continuación, se muestra un script de ejemplo que se puede usar para transcribir texto usando un micrófono. Específicamente, insertará texto en el campo de entrada Omnisearch de Clerk.io.

Añade un botón que, al hacer clic, activa la API de reconocimiento de voz del navegador e inserta el texto en el campo de entrada.

Puedes añadir este script como un bloque de código en un diseño del editor de diseño para una Búsqueda Instantánea o directamente en un diseño de código para Búsqueda Instantánea u 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>

Banners Dinámicos #

Esto usa Pages con type: "banner", mostrando el primer banner encontrado. Ajusta el HTML/CSS para adaptar a tu diseño.

Agrega banners de campaña dinámicos en Omnisearch proporcionando Pages donde type es banner y image apunta a tu archivo de banner. Cuando se encuentra una Page así en una búsqueda, el banner aparece sobre los resultados.

Configuración de Banner Page #

  • La sincronización de datos debe incluir Pages. Consulta Data Feeds › Pages.
  • Cada banner de campaña debe ser una Page con:
    • type: banner
    • url: Página de destino del banner
    • title: Descripción corta para accesibilidad/alt
    • image: Enlace directo al archivo de banner (JPG/PNG/WEBP)
    • Usa text o keywords para que tu Page aparezca en búsquedas coincidentes

Ejemplo de objeto Page:

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

Código para Mostrar el Banner #

En el layout principal de Omnisearch (diseño de código), añade cerca de la parte superior para mostrar la primera 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 %}

Estilos del banner:

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

Información Importante #

  • No se realiza una llamada adicional de API; Omnisearch incluye pages. Fíltralas por type.
  • Puedes mantener tu sección normal de Pages si lo deseas. Esto solo añade un banner.
  • Asegúrate de que tu elemento Omnisearch devuelva suficientes pages (sugerido: 6–10) para que haya Pages de banner disponibles. Esto se configura en los ajustes del elemento (por ejemplo, data-omni-search-pages).

Error de Keyword Desconocido #

Si estás usando el diseño estándar de Omnisearch y te aparece un error Unknown Keyword in template, probablemente sea por un bloque de código Liquid mal formado usado para el os-banner.

Para solucionarlo, debes actualizar el bloque de código os-banner en tu diseño Omnisearch.

Qué arreglar #

Ubica el siguiente código en tu diseño 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 %}

Reemplázalo por este fragmento actualizado:

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

Esta página ha sido traducida por una IA útil, por lo que puede contener errores de idioma. Muchas gracias por su comprensión.