Live Search & Autocomplete — Documentación

Instalación

Requisitos

Magento 2.4.x (Open Source o Adobe Commerce), PHP 8.1–8.5. Funciona con cualquier motor de búsqueda compatible con Magento (OpenSearch, Elasticsearch o MySQL). Compatible con los temas Hyvä y Luma. Requiere el gratuito codingrow/module-core. No se necesita ningún proveedor de IA ni clave de API — el módulo es pura búsqueda en el catálogo.

Configuración inicial

Instala vía Composer, activa el módulo y ejecuta la actualización/compilación estándar:

composer require codingrow/module-live-search-autocomplete
bin/magento module:enable Codingrow_LiveSearchAutocomplete
bin/magento setup:upgrade && bin/magento setup:di:compile
bin/magento cache:flush

Después ve a Tiendas → Configuración → Codingrow → Live Search & Autocomplete, pega tu clave de licencia, establece Activar = Sí y vacía la caché.

Configuración

Todas las opciones se encuentran en Tiendas → Configuración → Codingrow → Live Search & Autocomplete.

Desinstalación

Establece Activar = No para desactivarlo sin eliminar nada, o elimina el módulo por completo:

bin/magento module:disable Codingrow_LiveSearchAutocomplete
composer remove codingrow/module-live-search-autocomplete
bin/magento setup:upgrade && bin/magento cache:flush

Búsqueda y sinónimos

Cómo funciona

Un pequeño script independiente del tema se acopla a tu campo de búsqueda existente (detecta automáticamente las barras de búsqueda de Hyvä y Luma). A medida que el cliente escribe, aplica un antirrebote a la entrada y pide al módulo los productos coincidentes, luego renderiza un desplegable con una miniatura, nombre, precio y cualquier descuento para cada resultado, más un enlace de «ver todos los resultados» a la página de búsqueda completa. Cada resultado enlaza directamente a la ficha del producto. Los resultados respetan la visibilidad del producto, el stock y el ámbito de la tienda.

Rendimiento

Las sugerencias se obtienen del propio motor de búsqueda indexado de Magento — el mismo motor que impulsa la página de resultados (OpenSearch, Elasticsearch o MySQL) — a través de la petición nativa quick_search_container. Como la coincidencia la hace el índice y no el escaneo de la base de datos, el tiempo de respuesta se mantiene bajo y no crece con el tamaño del catálogo. En una tienda en vivo de 67.000 productos, las sugerencias se devuelven en aproximadamente un segundo y se mantienen estables a medida que crece el catálogo.

Búsqueda en campos ampliados

Que el autocompletado busque solo en el nombre/SKU o también en la descripción y otros campos lo controla el propio Magento, por atributo — no un interruptor del módulo. En Tiendas → Atributos → Producto, cada atributo tiene un indicador «Usar en búsqueda» y un peso de búsqueda. De forma predeterminada, name, sku, description y short_description son consultables, por lo que el autocompletado ya los busca. Para incluir o excluir un campo, o para que uno pese más, cambia los ajustes de búsqueda de ese atributo y reindexa — el autocompletado sigue la misma configuración que la página de resultados, y se mantiene rápido independientemente del tamaño del catálogo.

Sinónimos de búsqueda nativos

El módulo siempre usa los Sinónimos de búsqueda nativos de Magento. Añádelos o edítalos desde el panel de administración estándar en Marketing → SEO & Search → Sinónimos de búsqueda; el autocompletado los detecta de inmediato. Cuando una consulta no devuelve nada, el módulo la amplía con los sinónimos coincidentes y lo intenta de nuevo.

Sinónimos de AI Personal Shopper

Si el módulo Codingrow AI Personal Shopper también está instalado (opcional, dependencia blanda), el autocompletado aprovecha además su registro de sinónimos autoaprendidos — los términos regionales, dialectales y mal escritos que el asistente ha aprendido de conversaciones reales. Esto hace que incluso las búsquedas «equivocadas» coincidan con los productos correctos. Actívalo con Usar sinónimos de AI Personal Shopper = Sí. Sin ese módulo, el autocompletado funciona perfectamente solo con los sinónimos nativos.

Uso

Cómo se muestra

El desplegable se inyecta debajo de tu barra de búsqueda existente y se estiliza para no interferir con tu tema. Cada fila muestra la miniatura del producto (si está activada), el nombre y el precio con cualquier descuento; el color de acento (precios y el enlace «ver todos los resultados») es configurable. La navegación con teclado (teclas de flecha y Enter) y el diseño móvil se gestionan automáticamente.

Barra de busqueda fija

Convierte la busqueda de la tienda en una cabecera compacta siempre visible: cuando el cliente se desplaza, una barra fina se fija arriba con el logo de la tienda, el menu, los enlaces de cuenta y carrito y — sobre todo — el campo de busqueda con el mismo autocompletado en tiempo real. La busqueda queda a un vistazo en cada pagina, como hacen los grandes marketplaces. Independiente del tema: funciona en Hyva y Luma y reutiliza la accion de busqueda nativa, por lo que el envio y el autocompletado se comportan igual que la busqueda normal.

En escritorio la barra es una sola fila. En movil nunca supera dos filas — el menu hamburguesa, el logo, la cuenta y el carrito en la primera fila, el campo de busqueda en la segunda — asi cabe en pantallas pequenas sin empujar el contenido. Aparece cuando el cliente supera un umbral de desplazamiento configurable y se oculta de nuevo arriba.

Se activa en Stores → Configuration → Codingrow → Live Search & Autocomplete → Appearance con Sticky search bar = Yes (con un umbral de desplazamiento opcional en pixeles). La barra tambien expone un espacio para el boton de busqueda con IA del modulo AI Personal Shopper, si esta instalado.

La barra fija y lo que no debe tapar

Con la barra de búsqueda fija activa, superado el umbral de desplazamiento aparece arriba una barra compacta. Al estar fija, tapa lo que queda debajo: en la ficha de producto suele ser el título, la primera línea del bloque de compra que el tema mantiene a la vista. Y quedaría tapado durante toda la página, no solo de paso.

Keep pinned content clear of the sticky bar (activa por defecto) lo resuelve: la barra publica su altura medida en la propiedad CSS --crls-sticky-h del elemento <html> — 0px mientras está oculta — y todo lo anclado arriba baja exactamente esa cantidad, y vuelve a su sitio cuando la barra desaparece. Los enlaces con ancla también aterrizan debajo. La altura se mide, nunca se fija en el código: unos 57px en escritorio, unos 107px por debajo de 768px, donde el campo de búsqueda pasa a su propia línea.

Los elementos anclados dentro de un contenedor que realmente se desplaza no se tocan: están anclados a ese contenedor, no al viewport. Tus propias plantillas pueden leer la misma propiedad: top: calc(1.5rem + var(--crls-sticky-h, 0px)), cuyo valor de reserva mantiene el desplazamiento original donde el módulo no está instalado.

Licencia

El módulo usa una licencia por dominio (una clave de módulo único, o una clave de suscripción de Codingrow que desbloquea todos los módulos de Codingrow). La clave se verifica localmente: nunca ralentiza el escaparate ni expone tus datos. El autocompletado no se muestra sin una licencia válida. Tu licencia cubre la versión actual más 1 año de actualizaciones y soporte; puedes seguir usando para siempre las versiones cubiertas y renovar el soporte (−35%) para actualizar a versiones más nuevas.

Resolución de problemas