Omnisearch

• Resultados en vivo se muestran a tus visitantes mientras escriben, e incluyen productos, categorías y páginas.
• Ordenación y filtrado: para permitir que tus visitantes refinen su búsqueda de una manera intuitiva y fácil.
• Fácil de integrar en tu sitio utilizando una de nuestras excelentes plantillas de inicio.
• Se adapta a tu marca a través de cambiar algunos ajustes estándar como el logo, fuentes, colores y más.
• Es completamente personalizable con HTML, CSS y Liquid para desarrolladores.

Comenzando #

Omnisearch consiste en un Diseño personalizable para visuales y un bloque de Contenido que permite que se instale en tu sitio.

Creando un diseño #

Esto se hace en Search > Designs > New Design

Selecciona el tipo Omnisearch, elige un diseño inicial y dale un nombre.

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

Nuestros diseños estándar funcionan directamente y siempre se pueden editar más tarde. La edición requiere conocimientos de HTML, CSS y Liquid. Consulta Estilo en esta guía para más información.

Creando un Contenido #

Esto se hace en Search > Content > New Content

Los bloques de contenido son contenedores para elementos que creas en tu cuenta de my.clerk.io. Contienen la lógica para mostrar resultados y configuraciones sobre cuántos resultados mostrar.

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

• Tipo de contenido es Omnisearch por defecto, y no debe ser cambiado. Aquí, también puedes agregar filtros si es necesario, pero para la mayoría de las 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 que se escriban palabras. Por defecto, esto es Más Vendidos, pero también puede ser personalizado, por ejemplo, con Recomendaciones para Visitantes.

Finalizar Diseño #

El diseño para renderizar el bloque de Contenido. Selecciona el diseño que creaste.

Si tu diseño incluye variables, 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 establece los nombres que deberían mostrarse en los resultados de búsqueda. Si no puedes encontrar un atributo específico en la lista, agrégalo en la lista de “atributos filtrables”, en Configuración de Búsqueda.

Insertando en el sitio #

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

• En vista previa te permite probar tu contenido sin afectar tu sitio en vivo. Puedes abrir tu sitio en vista previa haciendo clic en “Abrir sitio en vista previa” o añadiendo ?clerk_content_mode=preview a la URL de tu sitio.

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

Usando inyección #

Esta es la forma más fácil de instalar. 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ándose basado en un evento.

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

• Elemento decide la parte del sitio web con la que el usuario debe interactuar. Por ejemplo, si deseas que tu contenido de Omnisearch se muestre solo cuando tus visitantes interactúan con tu barra de búsqueda (hacen clic o se enfocan en ella), solo necesitas encontrar el selector CSS único aplicado a ella. Si tienes diferentes identificadores en móvil y escritorio, agrégales 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 tu página y elegir Inspeccionar o similar.
2. Encuentra el elemento que deseas apuntar
3. Haz clic derecho sobre él, y encuentra la opción copiar > copiar selector

Usando código embebido #

Si tienes cambios no guardados, 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.

Configuración del diseño #

La mayoría de la Omni-búsqueda se puede configurar cambiando las variables que están en los archivos de diseño.

En el lenguaje de plantillas Liquid, una variable tiene una estructura como esta:

{% assign variable_name = "variable value" %}

Como regla general, solo se debe cambiar el valor de la variable para configurar la Omni-búsqueda.

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

Logo #

Para agregar el logo al diseño de Omni-búsqueda, simplemente encuentra la URL de la imagen y ponla en el valor de la variable: os_brand_logo.

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

Carga infinita/automática #

Si deseas controlar si la Omni-búsqueda debería cargar más resultados de productos automáticamente, una vez que el usuario haya desplazado hasta la última fila de productos, la variable debe establecerse en true o false. La variable generalmente se llama os_autoload. En este ejemplo, la Omni-búsqueda no carga más resultados de productos automáticamente.

Traducciones #

Por defecto, la plantilla está en inglés. Si tienes una tienda que tiene un idioma diferente, puedes traducir los elementos de texto cambiando los valores de las variables.

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

Consejo: Usa IA generativa (por ejemplo, chatGPT) para traducir en masa escribiendo “Traduce estos valores de variable del inglés al danés. Devuelve el código completo para que pueda ser copiado/pegado para reemplazar el código existente: PASTE_VARIABLES_HERE”

Estilo #

Para cambiar cualquier estilo, se puede configurar en las variables CSS.

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

--variable_name: variable_value;

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

Colores #

Los colores configurables se pueden identificar y configurar en la sección bajo el comentario CSS “Colores” /* Colores */

Fuentes #

Similar a los colores, la variable de fuente se puede encontrar bajo el comentario /* Fuente */.

Generalmente tiene una variable como: --font-family: 'Kumbh Sans', sans serif;

Para desarrolladores #

Estilo #

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, la Omni-búsqueda utiliza el mismo HTML para todos los tamaños de pantalla y utiliza CSS para ser completamente responsiva. Por eso la pestaña de Móvil no tiene código para empezar.

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

Inicialmente, es posible que solo desees ajustar algunas cosas para hacer que el diseño coincida con la apariencia y sensación de tu marca - Siempre puedes editar tu diseño más tarde.

HTML #

Este es el diseño principal que controla la colocación de todos los elementos. Utiliza Liquid como lenguaje de plantillas.

En nuestros diseños de inicio, la primera sección está dedicada a los elementos que se cambian más comúnmente, como etiquetas de ordenación, moneda y los varios textos que puedes traducir a tu idioma.

CSS #

Estilo que se inyectará con el HTML, dándote control total sobre los visuales de una manera contenida.

Sub-diseños disponibles #

Cualquier diseño agregado 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 eliminar, 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 ícono de Editar. Una vez que hayas terminado de editar, haz clic en Guardar y cerrar, para volver al editor de diseño principal.

Algunos elementos necesitan identificadores específicos, tales como:

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

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

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

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

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

• Colores: Puedes agregar los colores de tu marca en aquellos elementos que deseas enfatizar o armonizar 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 tus enlaces, también puedes editarlo.

Estructura de superposición #

Cuando se inicia omnisearch, crea un elemento con la clase clerk-omnisearch-overlay y se inyecta en la parte inferior del cuerpo.

Aquí es donde inyectaremos el diseño, ya que tenemos el elemento de entrada como parte del diseño, necesitamos tener demandas estructurales para asegurar que no volvamos a renderizar el elemento de entrada en cada carga. La estructura debería verse como la siguiente debajo de la superposición:

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

Campo de entrada #

Para encontrar el campo de entrada, necesita tener el siguiente identificador clerk-omnisearch-input. Una vez que se ha activado el elemento desencadenante, movemos el enfoque del cursor a este elemento y añadimos cualquier consulta que tengamos a él, para que podamos mantener la experiencia del usuario algo fluida.

Contenedor de contenido #

El contenedor de contenido es donde suceden la mayoría de las cosas, el contenedor alrededor necesita tener el identificador clerk-omnisearch-content. Aquí deberían estar las facetas, los deslizadores y todo lo demás que no sea el campo de entrada.

Clases #

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

Botón de cerrar #

clerk-omnisearch-close

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

Ordenación #

clerk-omnisearch-sort

Encuentra menús desplegables de ordenación y les añade oyentes.

Para obtener un elemento de ordenación en el diseño, añade esto al elemento seleccionado, por ejemplo, un menú desplegable. Para funcionar, el elemento necesita ser el siguiente value:[desc|asc], así que el valor que queremos ordenar, con un colon y luego ya sea desc o asc. Opcionalmente puedes añadir un atributo data-sort-type si deseas que ordene categorías o páginas.

Faceta de búsqueda #

clerk-facet-search

Si hay una búsqueda de facetas presente, crea un oyente y oculta facetas que no coinciden con la consulta.

La clase, cuando está presente en una página web, verifica la existencia de cualquier elemento de búsqueda de facetas. Las búsquedas de facetas proporcionan una manera para que los usuarios busquen en las facetas. Para que funcione, el elemento necesita tener un valor de cadena.

Borrado completo #

clerk-omnisearch-full-reset

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

Borrado de facetas #

clerk-omnisearch-facet-full-reset

Cuando se hace clic, los elementos con la clase deseleccionarán todas las facetas activas. Esto se vería típicamente en un botón de estilo ‘Borrar todo’ dentro de un grupo de facetas, permitiendo a los usuarios restablecer sus filtros seleccionados en una acción fácil.

Borrado de grupo #

clerk-omnisearch-facet-group-reset

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

Para proporcionar la función de deseleccionar un grupo completo de facetas, se puede dar a un elemento la clase. Una vez que el elemento se activa (por ejemplo, se hace clic), todos los elementos dentro de su grupo se deseleccionan, restableciendo ese grupo de facetas. Para que funcione, el elemento debe tener el grupo que queremos borrar como un atributo con el nombre data-facet-group.

Borrado de faceta #

clerk-omnisearch-facet-reset

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

Esta clase está diseñada para escenarios donde es necesario deseleccionar una sola faceta. Un elemento con la clase puede asociarse con una faceta específica en un grupo dándole tanto un data-facet-group como un data-facet-value. Al activarse, solo deseleccionará su faceta asociada según el par de atributos de grupo/valor dado, dejando otras facetas seleccionadas sin cambios.

Clic en faceta #

clerk-facet

Los elementos con esta clase se tratarán como una faceta seleccionable.

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