Omnisearch

• Resultados en vivo se muestran a tus visitantes mientras escriben e incluyen productos, categorías y páginas.
• Ordenar y filtrar: para que tus visitantes refinen su búsqueda de manera intuitiva y sencilla.
• Fácil de integrar en tu sitio utilizando una de nuestras excelentes plantillas iniciales.
• Se adapta a tu marca cambiando algunos ajustes estándar como el logo, fuentes, colores y más.
• Es totalmente personalizable con HTML, CSS y Liquid para desarrolladores.

Primeros pasos #

Omnisearch consta de un Diseño personalizable para lo visual y un bloque Element que permite instalarlo en tu sitio.

Creando un diseño #

Esto se realiza en Search > Designs > New Design

Selecciona el tipo Omnisearch, elige un diseño inicial y asígnale un nombre.

Haz clic en Save & Close para finalizar el diseño estándar.

Nuestros diseños estándar funcionan de inmediato y siempre pueden ser editados después. Editar requiere conocimiento de HTML, CSS y Liquid. Consulta Estilos en esta guía para más información.

Creando un Elemento #

Esto se realiza en Search > Element > New Element

Los bloques Element son contenedores para los elementos que creas en tu cuenta de my.clerk.io. Contienen la lógica para mostrar resultados y los ajustes de cuántos resultados mostrar. La lógica de Estado Vacío también puede modificarse mediante Rules.

• Name te ayuda a identificar tu elemento en caso de que quieras crear más de uno. Se puede modificar más adelante.

• Element type es Omnisearch por defecto y no debería ser cambiado. Aquí también puedes añadir filtros si es necesario, aunque para la mayoría de las configuraciones no hace falta.

• Empty State Logic te permite seleccionar el tipo de productos a mostrar cuando Omnisearch se abre inicialmente, antes de que se haya escrito ninguna palabra. Por defecto es Bestsellers pero también puede personalizarse, por ejemplo, con Visitor Recommendations.

Finalizar Diseño #

El diseño para renderizar el bloque Element. Selecciona el diseño que hayas creado.

Si tu diseño incluye variables, también pueden establecerse aquí.

Puedes controlar la cantidad de resultados a mostrar para cada tipo, cada vez que se realiza una búsqueda. Generalmente recomendamos estas cantidades:

• Productos: 20-60
• Sugerencias: 5
• Categorías y páginas: 10

Por último, elige los atributos que quieras incluir como Facetas y define los nombres como deberían mostrarse en los resultados de búsqueda. Si no encuentras un atributo específico en la lista, agrégalo en la lista de “atributos filtrables” en Search Configuration.

Insertando en el sitio #

La Visibilidad se usa para controlar quién puede ver el Omnisearch.

• In preview te permite probar tu elemento sin impactar tu sitio en vivo. Puedes abrir tu sitio en modo de previsualización haciendo clic en “Open site in preview” o añadiendo ?clerk_content_mode=preview a la URL de tu sitio.

• In my live site se usa cuando ya terminaste de probar y estás listo para hacerlo público.

Usando injection #

Esta es la forma más sencilla de instalarlo. Clerk añadirá automáticamente el código de Omnisearch a tu sitio, apuntando a un campo de búsqueda de tu elección y activándolo en función de un evento.

• Event controla lo que debe hacer el usuario para activar Omnisearch. Lo más probable es que quieras que se muestre cuando tus visitantes hagan clic en tu icono de búsqueda o campo de entrada.

• Element decide la parte del sitio web con la que debe interactuar el usuario. Por ejemplo, si quieres que tu elemento Omnisearch se muestre solo cuando tus visitantes interactúan con tu barra de búsqueda (clic o focus), solo debes encontrar el selector CSS único que tiene aplicado. Si tienes diferentes identificadores para móvil y escritorio, añade ambos.

Así encuentras tu selector CSS único:

1. Inspecciona el código de tu sitio. En la mayoría de los navegadores puedes hacer clic derecho en cualquier parte de la página y elegir Inspect o similar.
2. Encuentra el elemento que quieres apuntar
3. Haz clic derecho sobre él y busca la opción copiar > copiar selector

Usando código embebido #

Si tienes cambios sin guardar, guárdalos para generar el código embebido.

Copia este código y pégalo en el archivo que genera todas las páginas de la tienda, idealmente cerca del final de la etiqueta </body>.

Reemplaza INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH con el selector CSS del elemento html que debería activar tu Omnisearch.

A continuación, un ejemplo completo de un código embebido de Omnisearch con todas las opciones de configuración:

<span class="clerk"
    data-template="@omnisearch"
    data-api="search/omni"
    data-trigger-element="INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH"
    data-limit="40"
    data-suggestions="6"
    data-categories="6"
    data-pages="6"
    data-omni-search-suggestions="6"
    data-omni-search-categories="6"
    data-omni-search-pages="6"
    data-omni-search-empty="recommendations/popular">
</span>

Modos de visualización #

Omnisearch admite dos modos de visualización que controlan cómo aparece la interfaz de búsqueda en tu sitio. Configura esto en la pestaña Insert al editar tu Element de Omnisearch.

Full overlay #

Este es el modo por defecto. Cuando se activa, Omnisearch cubre toda la pantalla con una superposición a pantalla completa. La interfaz de búsqueda toma el control de la página y proporciona una experiencia enfocada.

Utiliza este modo cuando quieras:

• Un entorno de búsqueda sin distracciones
• Control total sobre el diseño de búsqueda
• Que la interfaz de búsqueda sea completamente independiente del encabezado de tu sitio

Partial overlay #

Este modo integra Omnisearch con el encabezado existente de tu sitio. En lugar de cubrir toda la pantalla, la superposición de búsqueda aparece debajo de tu encabezado manteniendo este visible y funcional.

Utiliza este modo cuando quieras:

• Que tu encabezado y navegación sigan accesibles durante la búsqueda
• Una integración más fluida con el diseño existente de tu sitio
• Que la búsqueda se sienta como una parte natural del sitio

Opciones de configuración #

Cuando seleccionas Partial Overlay, aparecen configuraciones adicionales:

Header selector

El selector CSS para el elemento header de tu sitio. Omnisearch lo utiliza para posicionar la superposición justo debajo del encabezado, asegurando una alineación adecuada.

Ejemplos de selectores:

• header
• .site-header
• #main-header

Search input selector

El selector CSS para tu campo de búsqueda actual. Cuando se proporciona, Omnisearch se sincroniza con el campo de búsqueda de tu encabezado, creando una experiencia unificada donde escribir en el campo de búsqueda del encabezado actualiza los resultados de Omnisearch.

Ejemplos de selectores:

• #search-input
• .header-search input
• [name="search"]

Width

Controla el tamaño horizontal de la superposición:

• Full width: Abarca todo el ancho de la pantalla
• Content width: Coincide con el ancho de un elemento contenedor que especificas con un selector CSS
• Fixed width: Un ancho fijo en píxeles que defines

Height

Controla el tamaño vertical de la superposición:

• From header to bottom: Rellena el espacio desde debajo del encabezado hasta la parte inferior de la pantalla
• Viewport percentage: Un porcentaje de la altura de la pantalla (por ejemplo, 80%)
• Fixed height: Una altura fija en píxeles
• Max height: Establece un límite superior permitiendo que la superposición sea más pequeña si el contenido requiere menos espacio

Horizontal alignment

Controla la posición horizontal de la superposición:

• Left: Alinea a la izquierda de la pantalla
• Center: Centra la superposición horizontalmente
• Right: Alinea a la derecha de la pantalla

Vertical position

Controla la posición vertical en relación al encabezado:

• Below header: Posiciona la superposición directamente debajo del header
• Fixed from top: Un desplazamiento fijo en píxeles desde la parte superior de la pantalla

Configuración de diseño #

La mayor parte de Omni-search puede configurarse cambiando las variables que están en los archivos de diseño.

En el lenguaje de plantillas liquid, una variable tiene una estructura así:

{% assign variable_name = "variable value" %}

Como regla general, solo debe cambiarse el valor de la variable para configurar Omni-search.

Los usuarios más técnicos pueden modificar líneas de HTML y CSS específicas, ver esta sección.

Logo #

Para agregar el logo al diseño de Omni-search, simplemente encuentra la URL de la imagen y colócala en el valor de la variable: os_brand_logo.

La variable normalmente se llama algo como os_brand_logo, y debería verse así una vez pegado el logo:

Carga infinita/automática #

Si quieres controlar si Omni-search debe cargar más productos automáticamente, una vez que el usuario llega a la última fila de productos, la variable debe establecerse en true o false. La variable normalmente se llama os_autoload. En este ejemplo, Omni-search no carga más productos automáticamente.

Traducciones #

Por defecto, la plantilla está en inglés. Si tienes una tienda en otro idioma, puedes traducir los textos cambiando los valores de las variables.

Este ejemplo muestra las variables para el botón de ordenamiento:

Protip: Usa inteligencia artificial generativa (por ejemplo, chatGPT) para traducir masivamente escribiendo “Translate these variable values from English to Danish. Return the full code back so it can be copy/pasted to replace the existing code: PASTE_VARIABLES_HERE”

Estilos #

Para cambiar los estilos, la configuración se hace en las variables CSS.

Las plantillas usan variables CSS que tienen una estructura como esta:

--variable_name: variable_value;

Para usuarios técnicos, se pueden modificar reglas CSS individuales para realizar cambios más complejos de diseño.

Colores #

Los colores configurables pueden identificarse y configurarse en la sección bajo el comentario CSS “Colors” /* Colors */

Fuentes #

Al igual que los colores, la variable de fuente se encuentra bajo el comentario /* Font */.

Normalmente es una variable así: --font-family: 'Kumbh Sans', sans serif;

Diseño estándar #

El diseño estándar para Omnisearch incluye:

• Soporte para selector de variantes: Permite a los compradores elegir atributos de variante (por ejemplo, talla, color) antes de añadir al carrito.

• Selector de cantidad.

• Botón nativo de añadir al carrito que notifica a Clerk.js, asegurando que los análisis y la mercadotecnia estén sincronizados.

• Código limpio y bien estructurado con comentarios claros.

• Variables centralizadas para estilos y comportamientos, permitiendo ajustar colores, espaciado, etiquetas y opciones comunes fácilmente sin cambiar el código principal.

• Faceta deslizador de precio para filtrar por rango fácilmente.

• Sugerencias clicables que disparan una búsqueda inmediatamente.

Para desarrolladores #

Estilos #

Los diseños constan de un layout principal, estilo CSS y un conjunto de sub-diseños que pueden referenciarse en el layout principal.

Puedes editar todo esto por separado para escritorio y móvil. Por defecto, Omni-search usa el mismo HTML para todos los tamaños de pantalla y usa CSS para ser completamente responsivo. Por eso la pestaña de móvil no tiene código al inicio.

Si es necesario, puedes crear un marcado HTML completamente distinto para móvil, que se utilizará solo en pantallas pequeñas.

Inicialmente, quizá solo quieras ajustar unas pocas cosas para adaptar el diseño a la apariencia y estilo de tu marca. Siempre puedes editar tu diseño cuando quieras.

HTML #

Este es el layout principal que controla la ubicación de todos los elementos. Usa Liquid como lenguaje de plantillas.

En nuestros diseños iniciales, la primera sección se dedica a los elementos que más se cambian, como etiquetas de ordenamiento, moneda y los diversos textos que puedes traducir a tu idioma.

CSS #

El estilo que se inyecta junto con el HTML, dándote control total sobre los aspectos visuales de forma contenida.

Sub-diseños disponibles #

Cualquier diseño añadido aquí puede referenciarse desde el layout general. Funcionan como módulos que se editan por separado y se agregan con su ID y nombre: {{@247373 - TopBarSearchForm}}

Puedes eliminar, duplicar o copiar la referencia de cualquier sub-diseño haciendo clic en el botón de tres puntos.

Para editar un sub-diseño, haz clic en su icono Edit. Una vez termines de editar, haz clic en Save & close para volver al editor de layout principal.

Algunos elementos necesitan identificadores específicos, como:

• El campo de entrada id="clerk-omnisearch-input"
• El contenedor de contenido id="clerk-omnisearch-content"

Siempre que quieras ver tu progreso, puedes hacerlo haciendo clic en el botón “Preview design”.

Los cambios más comunes en los diseños son los siguientes:

• Logo: Accede al TopBarSearchForm y reemplaza el logo predeterminado por el tuyo.

• Fuentes: Si es necesario, ajusta las fuentes para que coincidan con tu sitio.

• Colores: Puedes poner los colores de tu marca en los elementos que quieras destacar o igualar con el resto de tu sitio, como botones y etiquetas.

• Botones y bordes de etiquetas: Puedes ajustar su color, radio, ancho…

• Enlaces: Si tienes un estilo específico para los enlaces, puedes editarlo también.

Estructura del overlay #

Cuando se inicia omnisearch, se crea un elemento con la clase clerk-omnisearch-overlay y se inyecta al fondo del body.

Aquí es donde inyectaremos el diseño; como tenemos el campo de entrada como parte del diseño, necesitamos unas exigencias estructurales para asegurarnos de no volver a renderizar el campo de entrada en cada carga. La estructura debajo del overlay debería verse así:

<div>
    <input type="text" id="clerk-omnisearch-input"/>
    <div id="clerk-omnisearch-content">
        Element!
    </div>
</div>

Campo de entrada #

Para encontrar el campo de búsqueda necesita tener el identificador clerk-omnisearch-input. Una vez que el elemento disparador se activa, llevamos el focus del cursor a este elemento y añadimos cualquier consulta que tengamos, para mantener una experiencia fluida.

Contenedor de contenido #

El contenedor de contenido es donde ocurre todo; el contenedor alrededor debe tener el identificador clerk-omnisearch-content. Aquí deberían estar las facetas, los sliders y todo lo que no es el campo de entrada.

Clases #

Se puede agregar funcionalidad al diseño añadiendo clases específicas a los elementos.

Botón de cerrar #

clerk-omnisearch-close

Al adjuntar esta clase a un elemento dentro del diseño, ese elemento ocultará la superposición.

Ordenamiento #

clerk-omnisearch-sort

Encuentra los dropdowns de ordenamiento y les añade listeners.

Para obtener un elemento de ordenamiento en el diseño, añade esto al elemento selector, por ejemplo un dropdown. Para funcionar, el elemento debe tener el siguiente formato de valor: value:[desc|asc], el valor que queremos ordenar, luego dos puntos y desc o asc. Opcionalmente puedes añadir un atributo data-sort-type si quieres ordenar categorías o páginas.

Faceta de búsqueda #

clerk-facet-search

Si hay una faceta de búsqueda presente, crea un listener y oculta las facetas que no coincidan con la consulta.

La clase, al estar presente en un sitio web, verifica la existencia de facetas de búsqueda. Estas permiten a los usuarios buscar dentro de las facetas. Para funcionar, el elemento debe tener un valor de tipo string.

Limpiar todo #

clerk-omnisearch-full-reset

Al hacer clic, los elementos con esta clase limpiarán todas las facetas seleccionadas y reiniciarán la consulta.

Limpiar facetas #

clerk-omnisearch-facet-full-reset

Al hacer clic, los elementos con esta clase deseleccionarán todas las facetas activas. Usualmente se ve en un botón “Limpiar todo” dentro de un grupo de facetas, permitiendo a los usuarios reiniciar los filtros seleccionados fácilmente.

Limpiar grupo #

clerk-omnisearch-facet-group-reset

Al hacer clic, los elementos con esta clase deseleccionarán todos los elementos hijos dentro del grupo.

Para permitir la función de deseleccionar un grupo entero de facetas, un elemento puede tener la clase correspondiente. Una vez que se activa (por ejemplo, con un clic), todos los elementos de ese grupo se deseleccionan, reiniciando ese grupo de facetas. Para funcionar, el elemento debe tener el grupo que queremos limpiar como un atributo llamado data-facet-group.

Limpiar faceta #

clerk-omnisearch-facet-reset

Los elementos con esta clase deben deseleccionar un solo elemento con el par de atributos grupo/valor proporcionado.

Esta clase está diseñada para escenarios donde se debe deseleccionar una sola faceta. Un elemento con esta clase puede asociarse a una faceta concreta en un grupo dándole los atributos data-facet-group y data-facet-value. Al activarse, solo deseleccionará esa faceta asociada, dejando las demás seleccionadas.

Clic en faceta #

clerk-facet

Los elementos con esta clase se tratarán como facetas seleccionables.

Todas las facetas deben tener una clase junto con los atributos data-facet-group y data-facet-value, para saber qué está seleccionando el cliente.