Omnisearch

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

Primeros pasos #

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

Crear 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 listos para usar y siempre pueden editarse más tarde. Editarlos requiere conocimientos de HTML, CSS y Liquid. Consulta Estilización en esta guía para más información.

Crear un Elemento #

Esto se realiza en Search > Element > New Element

Los bloques de Elemento son contenedores para los elementos que creas en tu cuenta de my.clerk.io. Contienen la lógica para mostrar resultados y configuraciones sobre cuántos resultados mostrar. La lógica de Estado Vacío también puede manipularse a través de Rules.

• Nombre te ayuda a identificar tu elemento si quieres crear más de uno. Puede modificarse más tarde.

• Tipo de Elemento es Omnisearch por defecto, y no debe ser cambiado. Aquí también puedes agregar filters si es necesario, pero para la mayoría de configuraciones esto no es necesario.

• Lógica de Estado Vacío te permite seleccionar el tipo de productos a mostrar cuando Omnisearch se abre inicialmente, antes de escribir palabras. Por defecto esto es Bestsellers pero también puede ser personalizado, por ejemplo, con Visitor Recommendations.

Finalizar Diseño #

El diseño a través del cual se renderiza el bloque Element. Selecciona el diseño que creaste.

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

Puedes controlar el número de resultados para mostrar de cada tipo, cada vez que se realice una búsqueda. Generalmente recomendamos estas cantidades:

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

Finalmente, elige los atributos que deseas incluir como Facetas y define los nombres bajo los cuales deben aparecer 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.

Insertar en el sitio #

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

• En vista previa te permite probar tu elemento sin afectar tu sitio en vivo. Puedes abrir tu sitio en vista previa haciendo clic en “Open site in preview” o agregando ?clerk_content_mode=preview a la url de tu sitio.

• En mi sitio en vivo se utiliza cuando terminas de probar y estás listo para hacerlo público.

Uso de inyección #

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

• Evento controla qué 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.

• Elemento determina 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úen con tu barra de búsqueda (clic o foco sobre ella), solo necesitas encontrar el selector CSS único aplicado a ella. Si tienes identificadores distintos en móvil y escritorio, agrégalos ambos.

Encuentra tu selector CSS único de esta manera:

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 Inspeccionar o similar.
2. Encuentra el elemento que deseas apuntar
3. Haz clic derecho sobre él, y busca la opción copiar > copiar selector

Uso de código incrustado #

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

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

Reemplaza INSERT_CSS_SELECTOR_FOR_ELEMENT_THAT_SHOULD_TRIGGER_OMNISEARCH con el selector CSS del elemento html que debe activar tu Omnisearch.

A continuación hay 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 se muestra la interfaz de búsqueda en tu sitio. Configura esto en la pestaña Insert al editar tu Elemento Omnisearch.

Superposición completa #

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

Utiliza este modo cuando deseas:

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

Superposición parcial #

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 del encabezado, manteniendo el encabezado visible y funcional.

Utiliza este modo cuando deseas:

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

Opciones de configuración #

Cuando se selecciona Superposición Parcial, estarán disponibles opciones adicionales:

Selector del encabezado

El selector CSS para el elemento del encabezado de tu sitio. Omnisearch lo utiliza para posicionar la superposición directamente debajo del encabezado, asegurando el alineamiento adecuado.

Ejemplos de selectores:

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

Selector de input de búsqueda

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

Ejemplos de selectores:

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

Ancho

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

• Ancho completo: Ocupa todo el ancho de la ventana
• Ancho de contenido: Coincide con el ancho de un elemento contenedor que especifiques con un selector CSS
• Ancho fijo: Un ancho específico en píxeles que definas

Alto

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

• Desde el encabezado hasta el fondo: Llena el espacio desde debajo del encabezado hasta el final de la ventana
• Porcentaje de la ventana: Un porcentaje de la altura de la ventana (ej. 80%)
• Alto fijo: Una altura específica en píxeles
• Altura máxima: Define un máximo permitiendo que la superposición sea menor si hay menos contenido

Alineación horizontal

Controla dónde aparece la superposición horizontalmente:

• Izquierda: Alinea al lado izquierdo de la ventana
• Centro: Centra la superposición horizontalmente
• Derecha: Alinea al lado derecho de la ventana

Posición vertical

Controla la ubicación vertical respecto al encabezado:

• Debajo del encabezado: Coloca la superposición justo debajo del elemento de encabezado
• Fijo desde la parte superior: Un offset específico en píxeles desde la parte superior de la ventana

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 esta estructura:

{% assign variable_name = "variable value" %}

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

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

Logo #

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

La variable suele llamarse 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 al desplazarte hasta la última fila de productos, la variable debe configurarse como true o false. Suele llamarse os_autoload. En este ejemplo, Omni-search no carga más resultados automáticamente.

Traducciones #

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

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

Protip: Usa IA generativa (por ejemplo, chatGPT) para traducir en lote escribiendo “Traduce estos valores de variable de inglés a danés. Devuelve el código completo para copiar/pegar y sustituir el código existente: PASTE_VARIABLES_HERE”

Estilización #

Para cambiar el estilo, la configuración puede hacerse 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 individuales de CSS para realizar cambios de diseño más complejos.

Colores #

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

Fuentes #

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

Típicamente tiene una variable así: --font-family: 'Kumbh Sans', sans serif;

Diseño estándar #

El diseño estándar para Omnisearch incluye:

• Soporte para menú desplegable 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 la analítica y la mercadotecnia estén sincronizadas.

• Marcado limpio y bien estructurado con comentarios claros.

• Variables centralizadas para estilo y comportamiento, facilitando ajustar colores, espacios, etiquetas y opciones comunes sin cambiar el código central.

• Facet de deslizador de precios para filtrar rangos rápidamente.

• Sugerencias clicables que activan una búsqueda de inmediato.

Para developers #

Estilización #

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

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

Si se necesita, puedes crear un HTML completamente distinto para Móvil, que se usará en pantallas pequeñas.

Inicialmente, tal vez solo quieras ajustar algunas cosas para adaptar el diseño a la apariencia de tu marca. Siempre puedes editar tu diseño más tarde.

HTML #

Es el layout principal que controla la ubicación de todos los elementos. Utiliza Liquid como lenguaje de plantillas.

En nuestros diseños iniciales, la primera sección está dedicada a los elementos más cambiados, como las etiquetas de ordenación, la moneda y varios textos que puedes traducir a tu idioma.

CSS #

Estilización que se inyecta junto con el HTML, ofreciéndote control total sobre lo visual de forma contenida.

Sub-diseños disponibles #

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

Puedes borrar, duplicar y 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 de Editar. Cuando termines de editar, haz clic en Guardar y cerrar para volver al editor de layout principal.

Algunos elementos requieren identificadores específicos, tales como:

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

Cuando desees revisar tu progreso, puedes hacerlo haciendo clic en el botón “Vista previa del diseño”.

Los cambios más habituales en los diseños son estos:

• Logo: Accede a TopBarSearchForm y sustituye el logo predeterminado por el tuyo.

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

• Colores: Puedes añadir los colores de tu marca en los elementos que desees destacar o alinear con el resto del sitio, como botones y etiquetas.

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

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

Estructura de la superposición #

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

Aquí es donde inyectaremos el diseño, y como el campo de entrada es parte del diseño, necesitamos ciertas exigencias estructurales para asegurarnos de no volver a renderizar el input cada vez que se carga. La estructura debe verse así debajo de la superposición:

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

Campo de entrada #

Para encontrar el campo de entrada necesita tener el siguiente identificador clerk-omnisearch-input. Una vez que el elemento desencadenante ha sido accionado, el foco del cursor se mueve a este elemento y se le añade la consulta que tengamos, para mantener una experiencia fluida.

Contenedor de contenido #

El contenedor de contenido es donde sucede la mayoría de las cosas, el contenedor alrededor debe tener el identificador clerk-omnisearch-content. Aquí deben estar las facetas, los selectores y todo lo que no sea el campo de entrada.

Clases #

Puedes añadir funcionalidad al diseño añadiendo clases específicas a los elementos.

Botón de cierre #

clerk-omnisearch-close

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

Ordenación #

clerk-omnisearch-sort

Identifica menús desplegables de ordenación y les añade listeners.

Para tener un elemento de ordenación en el diseño, agrégalo al elemento de selección, por ejemplo, un dropdown. Para funcionar, el elemento debe tener el siguiente value:[desc|asc], es decir, el valor que queremos ordenar, dos puntos y luego desc o asc. Opcionalmente puedes añadir el atributo data-sort-type si deseas ordenar por 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, cuando está presente en la página, verifica la existencia de elementos de búsqueda de facetas. Las búsquedas de facetas permiten a los usuarios buscar dentro de las facetas. Para funcionar, el elemento debe tener un valor de tipo texto.

Limpieza total #

clerk-omnisearch-full-reset

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

Limpiar facetas #

clerk-omnisearch-facet-full-reset

Al hacer clic, los elementos con esta clase deseleccionarán todas las facetas activas. Esto normalmente se ve en un botón tipo ‘Limpiar todo’ en un grupo de facetas, permitiendo a los usuarios restablecer todos 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 secundarios dentro del grupo.

Para ofrecer la función de deseleccionar un grupo completo de facetas, un elemento puede tener esta clase. Una vez activado (por ejemplo, al hacer clic), todos los elementos de su grupo se deseleccionarán, restableciendo ese grupo de facetas. Para funcionar, el elemento debe tener el grupo que queremos limpiar como atributo con el nombre data-facet-group.

Limpiar faceta #

clerk-omnisearch-facet-reset

Los elementos con esta clase deben deseleccionar un solo elemento con el par de atributos group/value indicado.

Esta clase está pensada para casos en los que hay que deseleccionar una sola faceta. Un elemento con esta clase puede asociarse a una faceta específica en un grupo dándole ambos atributos data-facet-group y data-facet-value. Al activarse, solo deseleccionará su faceta asociada según el grupo/valor dados, sin afectar otras seleccionadas.

Clic en faceta #

clerk-facet

Los elementos con esta clase serán tratados como una faceta seleccionable.

Todas las facetas deben llevar la clase y los atributos data-facet-group y data-facet-value, así sabremos qué opción ha seleccionado el cliente.