Search

Configura Search después de importar y verificar tus datos. Primero identifica cómo tu tema abre Search en escritorio y móvil, luego elige la experiencia que se ajuste.

Inspecciona Search #

Un tema puede tener entradas separadas para escritorio, iconos móviles, paneles ocultos y campos de búsqueda en la página de inicio. Inspecciona cada uno antes de elegir los activadores.

1. Abre la tienda online en escritorio y móvil. Localiza todas las entradas o controles que abren Search.
2. Usa las herramientas de desarrollador para inspeccionar selectores estables y confirma qué entrada recibe el texto escrito.
3. Prueba el desplegable nativo, el panel móvil, la tecla Enter y el envío de formularios. Anota qué comportamientos deben ser reemplazados o retenidos.
4. Revisa otro tipo de página; el campo de búsqueda en la página de inicio puede ser diferente al de la cabecera.

Los activadores de ejemplo de Fodmagasinet son .search-bar #search-overlay-input y #frontpage_search_container. Comprueba si esos selectores existen y cumplen la misma función en tu tienda online. Un contenedor activador no es necesariamente el campo de texto en sí.

Elige la experiencia #

Usa Omnisearch para una experiencia de búsqueda combinada, o mantén un desplegable separado y una página de búsqueda donde esto se adapte mejor a tu tema.

Crear Omnisearch #

1. Ve a Search > Designs > New Design y elige una plantilla de Omnisearch.
2. Nombra y guarda el Design, luego adapta sus tarjetas de producto usando los controles de card-data. Los enlaces en la página de producto admiten productos que requieren elegir variantes.
3. Ve a Search > Elements > New Element, ponle nombre al Element y selecciona Omni-search como tipo.
4. Selecciona el Design, guarda en In preview, y abre la configuración de inserción.
5. Configura el selector activador verificado usando inyección, o copia el código embebido generado en tu tema una sola vez.
6. Elige Full Overlay o Partial Overlay y prueba todos los activadores previstos.

Para Partial Overlay, configura el Header selector al contenedor de cabecera nativo y Search input selector al campo de texto real. Ajusta el ancho y alto de la superposición según el diseño. Consulta Omnisearch para estas opciones.

La configuración parcial de Fodmagasinet usa la cabecera nativa y el campo de entrada en vez de clonar la cabecera o la cesta. Sus selectores, estructura de cabecera, puntos de corte, colores y espaciado son ejemplos a inspeccionar, no requisitos para otros temas.

Search separado #

Para un desplegable, crea un Design de Instant Search y un Element Live-search. En la configuración de inserción, selecciona la entrada verificada y elige la posición del desplegable.

Para una página de resultados, crea un Design y un Element de Search Page, luego inclúyelo en la plantilla de la página de resultados del tema. Pasa la consulta actual usando el código embebido generado y dirige el formulario nativo a esa página.

Utiliza las guías de Instant Search y Search Page para la configuración compartida. Reemplaza los resultados nativos solo dentro de su contenedor de resultados; conserva la navegación y el diseño de la página circundante.

Comportamiento nativo #

Resuelve manejadores superpuestos antes de habilitar Search para los visitantes. Ocultar solo el desplegable nativo puede dejar activos sus manejadores de teclado o formulario.

Durante la prueba Preview, escribe caracteres reales y comprueba si aparecen resultados nativos y de Clerk.io al mismo tiempo. Inspecciona el icono móvil y el panel por separado; abrir el panel incorrecto puede ocultar la entrada o cambiar el historial de navegación.

Si los manejadores nativos compiten, pide al desarrollador del tema que ajuste solo la entrada, panel o formulario relevante. Limita cualquier reemplazo temporal al estado previsto de Search para que la página normal siga siendo utilizable cuando se cierre.

Prueba rutas de keydown, keyup y envío de formulario submit. Enter debe abrir el resultado seleccionado de Clerk.io o realizar la búsqueda deseada. No canceles globalmente Enter ni elimines todos los listeners de teclado: la selección de resultados con las flechas debe seguir funcionando.

Cerrar y Escape deben restaurar la página, el enfoque y el desplazamiento subyacentes sin navegar atrás ni dejar una página en blanco. Repite abrir/cerrar, navega a un resultado y prueba Atrás/Adelante en escritorio y móvil.

Facetas #

Elige filtros de atributos que realmente existan en los productos importados. Un campo de plantilla como vendor, brand, o categoría puede no coincidir con tu feed.

Inspecciona varios registros, selecciona los atributos disponibles en la configuración de Search y asígnales etiquetas localizadas. Confirma que cada faceta cambie los resultados correctamente, incluidos productos sin un atributo opcional.

Para la ordenación, compara los valores importados con los precios mostrados en las tarjetas. Una etiqueta visual para el precio más bajo de la variante no corrige un precio principal incorrecto usado para ordenar.

Consulta Search best practices para elegir filtros útiles y diseños de resultados.

Resultados de contenido #

Importa artículos y otras páginas antes de habilitarlas en Search. Sigue Import Pages si el feed nativo no los incluye.

Luego revisa tanto la configuración de resultados de página del Element como la sección de resultados de página del Design. Los artículos importados pueden permanecer ocultos si el Design omite esa sección o su diseño oculta la columna.

Busca un título de artículo distintivo y verifica su enlace y contenido. Haz esto por separado de la coincidencia de productos y las recomendaciones basadas en página.

Estiliza de forma segura #

Mantén el CSS de Search dentro de su componente para que no afecte otros sliders de recomendaciones en la página.

Por ejemplo, dale a tu wrapper de tarjeta de Search personalizada una clase dedicada y limita todas las reglas a esta clase:

.ideal-clerk-search .ideal-clerk-card {
  display: flex;
  flex-direction: column;
}

No apliques reglas de diseño de Search a selectores globales como .clerk-slider, button, o .active. Vuelve a comprobar los sliders de inicio y producto después de abrir y cerrar Search, incluidos sus flechas, anchos y desbordamiento.

Finaliza con la lista de verificación. Consulta la Search conflicts FAQ si los controles nativos siguen interfiriendo.