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 puedan refinar su búsqueda de manera intuitiva y sencilla.
• Fácil de integrar en tu sitio utilizando una de nuestras excelentes plantillas de inicio.
• Se adapta a tu marca cambiando algunos ajustes estándar como el logo, las fuentes, los colores y más.
• Es completamente personalizable con HTML, CSS y Liquid para desarrolladores.

Primeros pasos #

Omnisearch consiste en un Diseño personalizable para los aspectos visuales 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 de inmediato y siempre pueden ser editados más tarde. Editarlos requiere conocimientos de HTML, CSS y Liquid. Consulta Estilos 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 ajustes sobre cuántos resultados mostrar. La Lógica de Estado Vacío también puede ser manipulada mediante Rules.

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

• Tipo de Elemento es Omnisearch por defecto, y no debe cambiarse. Aquí también puedes añadir filtros si es necesario, pero para la mayoría de configuraciones no es necesario.

• Lógica de Estado Vacío te permite seleccionar el tipo de productos que se mostrarán cuando Omnisearch se abra inicialmente, antes de que se escriba alguna palabra. Por defecto es Bestsellers, pero también puede ser personalizado por ejemplo con Visitor Recommendations.

Finalizar Diseño #

El diseño para renderizar a través del bloque de Elemento. Selecciona el diseño que creaste.

Si tu diseño incluye alguna variable, también se pueden establecer aquí.

Puedes controlar el número 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 deseas incluir como Facetas y configura los nombres que deberían mostrarse en los resultados de búsqueda. Si no puedes encontrar un atributo específico en la lista, añádelo en la lista de “filterable attributes”, en Search Configuration.

Insertar en el sitio #

La Visibilidad se usa 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 añadiendo ?clerk_content_mode=preview a la url de tu sitio.

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

Usar inyección #

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

• Evento controla lo que el usuario debe hacer para activar Omnisearch. Lo más común es mostrarlo cuando tus visitantes hacen clic en el icono de búsqueda o el campo de entrada.

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

Encuentra tu selector CSS único así:

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

Usar 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, idealmente cerca de la etiqueta </body>.

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

A continuación hay un ejemplo completo de un código de integración 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>

Configuración del diseño #

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

En el liquid template language, una variable tiene la siguiente estructura:

{% assign variable_name = "variable value" %}

Como regla general, sólo 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 agregar el logo al diseño de Omni-search, simplemente encuentra la URL de la imagen y colócala como valor para la variable: os_brand_logo.

La variable suele llamarse algo parecido a 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 resultados automáticamente, una vez que el usuario haya hecho scroll hasta la última fila de productos, la variable debe establecerse en true o false. La variable suele llamarse os_autoload. En este ejemplo, Omni-search no carga más resultados de productos automáticamente.

Traducciones #

Por defecto, la plantilla está en inglés. Si tienes una tienda en otro idioma, puedes traducir los elementos de texto 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 bloque escribiendo “Traduce estos valores de variable de inglés a danés. Devuélveme el código completo para que pueda copiar/pegar y sustituir el código existente: PASTE_VARIABLES_HERE”

Estilos #

Para cambiar cualquier estilo, la configuración se puede hacer en las variables CSS.

Las plantillas usan variables CSS que tienen la siguiente estructura:

--variable_name: variable_value;

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

Colores #

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

Fuentes #

De manera similar a los colores, la variable de fuente puede encontrarse bajo el comentario /* Font */.

Suele tener una variable como: --font-family: 'Kumbh Sans', sans serif;

Para desarrolladores #

Estilos #

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

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

Si lo necesitas, puedes crear un marcado HTML completamente diferente para móvil, que se usará en pantallas más pequeñas.

Inicialmente, es posible que solo quieras ajustar algunas cosas para hacer que el diseño coincida con la imagen de tu marca – siempre puedes editar tu diseño más tarde.

HTML #

Es el diseño 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 que más comúnmente cambian, como las etiquetas de ordenación, la moneda y los diferentes textos que puedes traducir a tu idioma.

CSS #

El estilo que se inyectará junto al HTML, dándote control total sobre los aspectos visuales de manera contenida.

Sub-diseños disponibles #

Cualquier diseño añadido aquí puede ser referenciado en el diseño 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. Una vez hayas terminado de editarlo, haz clic en Guardar y cerrar para volver al editor de diseño 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 comprobar tu progreso, puedes hacerlo haciendo clic en el botón “Preview design”.

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

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

• Fuentes: Si es necesario, ajusta las fuentes para que coincidan con el aspecto y sensación de tu sitio.

• Colores: Puedes añadir los colores de tu marca en los elementos que quieras resaltar o integrar 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 del overlay #

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

Ahí es donde inyectaremos el diseño; como tenemos el campo de entrada como parte del diseño, necesitamos requisitos estructurales para asegurar que no volvamos a renderizar el campo de entrada en cada carga. La estructura debe verse de la siguiente manera bajo el overlay:

<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 identificador clerk-omnisearch-input. Una vez que se ha activado el elemento disparador, movemos el foco del cursor a este elemento y añadimos cualquier consulta que tengamos, para que la experiencia de usuario sea fluida.

Contenedor de contenido #

El contenedor de contenido es donde suceden la mayoría de las cosas. El contenedor alrededor debe tener el identificador clerk-omnisearch-content. Aquí deben estar las facetas, los deslizadores 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 cerrar #

clerk-omnisearch-close

Al añadir la clase a un elemento dentro del diseño, ese elemento ocultará el overlay.

Ordenación #

clerk-omnisearch-sort

Busca menús desplegables de ordenación y les agrega escuchas de eventos.

Para tener un elemento de ordenación en el diseño, añade esto al elemento seleccionador, por ejemplo un desplegable. Para funcionar, el elemento debe tener el siguiente value:[desc|asc], o sea, el valor por el que se quiere ordenar, dos puntos y luego desc o asc. Opcionalmente puedes añadir un atributo data-sort-type si quieres que ordene categorías o páginas.

Faceta de búsqueda #

clerk-facet-search

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

La clase, cuando está presente en una página web, comprueba si existen elementos de búsqueda de facetas. Las búsquedas de facetas permiten a los usuarios buscar en las facetas. Para que funcione, el elemento debe tener un valor de cadena.

Reset completo #

clerk-omnisearch-full-reset

Cuando se hace clic, los elementos con la clase limpiarán todas las facetas seleccionadas y restablecerán la consulta.

Reset de facetas #

clerk-omnisearch-facet-full-reset

Cuando se hace clic, los elementos con la clase deseleccionarán todas las facetas activas. Esto suele verse en un botón de ‘Borrar todo’ dentro de un grupo de facetas, permitiendo a los usuarios restablecer sus filtros seleccionados de forma sencilla.

Reset de grupo #

clerk-omnisearch-facet-group-reset

Cuando se hace clic, los elementos con esta clase deseleccionarán todos los elementos hijos dentro del grupo.

Para ofrecer la función de deseleccionar un grupo entero de facetas, un elemento puede tener esta clase. Una vez que el elemento es activado (por ejemplo, clic), todos los elementos dentro de su grupo se deseleccionan, restableciendo ese grupo de facetas. Para que funcione, el elemento debe tener como atributo el grupo que se quiere borrar bajo el nombre data-facet-group.

Reset de faceta #

clerk-omnisearch-facet-reset

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

Esta clase está diseñada para escenarios donde sea necesario deseleccionar una sola faceta. Un elemento con la clase puede asociarse a una faceta específica dentro de un grupo mediante los atributos data-facet-group y data-facet-value. Al activarse, solo deseleccionará su faceta asociada según dicho par de atributos, dejando las demás seleccionadas intactas.

Facet Click #

clerk-facet

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

Todas las facetas deben tener la clase junto con los atributos data-facet-group y data-facet-value, de modo que sepamos qué está presionando el cliente.