Buscador del nav y sugerencias

El buscador del nav ahora cierra el panel al hacer clic afuera, usa íconos de línea y muestra sugerencias y categorías como chips para dejar lugar a los productos. Los tres cambios están en src/modules/search/component/SearchBar.tsx.

Para el índice de sugerencias hay una configuración propuesta que todavía no se aplicó. Lo principal: idioma español, mínimo de 2 letras y sugerencias generadas desde las categorías del catálogo.

Cierre al hacer clic afuera

En escritorio, al escribir "notebook" y hacer clic fuera del buscador, el panel de resultados quedaba abierto.

Causa. El nav monta dos buscadores: uno para escritorio (nav/index.tsx:48) y otro para celular (nav/index.tsx:74), y siempre hay uno oculto por CSS. Algolia Autocomplete 1.19.9 guarda el manejador de clic afuera en un único lugar por ventana (window._listeners.mousedown). El último en montarse, el de celular, pisa al de escritorio. Como el de celular está cerrado, ignora el clic, y el de escritorio nunca se cierra. La librería lo reconoce en su código: "@TODO: support cases where there are multiple Autocomplete instances".

Corrección. Cada buscador escucha pointerdown en el documento. Si el clic no cae dentro de su contenedor ni dentro de un .aa-Panel, cierra con instance.setIsOpen(false). El panel se agrega al body, fuera del contenedor, y por eso se lo busca por su clase. El texto escrito se conserva: al volver a hacer clic en el buscador, los resultados reaparecen.

Íconos y altura

Los emoji del desplegable se cambiaron por íconos de línea de @medusajs/icons, que el proyecto ya usa en otros componentes. No se agregaron dependencias.

Dónde	Antes	Ahora
Sugerencias, según type	Emoji por tipo	category: SquaresPlus · brand: Tag · specific y generic: MagnifyingGlass · intent: Sparkles · combo: Bolt · product: ShoppingBag
Categorías	Emoji de carpeta	Folder
Producto sin foto	SVG a mano	Photo
Tipo en inglés bajo cada sugerencia	Visible	Quitado: lo indica el ícono

Al pasar el mouse, el ícono toma el rojo del token brand (#E30613). Cuando el token pase al rojo nuevo del documento de marca (#ff151f), el buscador cambia solo.

@medusajs/icons no está declarada en package.json: llega a través de @medusajs/ui. Ya era así antes de este cambio.

Sugerencias y categorías en chips

Las dos secciones ocupaban casi todo el panel y los productos quedaban abajo. Ahora son chips que se ordenan de izquierda a derecha y bajan de línea cuando no entran. Los productos siguen en lista, con foto y precio.

• Cada chip lleva ícono, texto y, en las categorías, el conteo. Borde gris, radio de 4 px, máximo 16rem de ancho; el texto largo se corta con "…".
• El hover y la selección con teclado se pintan por CSS sobre aria-selected, que es como la librería marca el ítem elegido.
• El estilo se aplica sólo a las secciones suggestions y categories, a través del atributo data-autocomplete-source-id de cada una.
• 5 sugerencias y 5 categorías.

Qué probar:

• [ ] Las dos secciones ocupan pocas líneas y los productos aparecen enseguida.
• [ ] Las flechas del teclado marcan el chip en rojo y Enter lo abre.
• [ ] Clic en una sugerencia busca ese texto; clic en una categoría abre la tienda filtrada.
• [ ] Con la ventana angosta, los chips bajan de línea sin salirse del panel.

Diagnóstico del índice de sugerencias

El índice product_items_view_index_dev_query_suggestions (aplicación TEIMEI80G9, generador en la región EU) tenía 24 sugerencias al 2026-09-30, con popularidad de 1 a 9. Salen de las búsquedas reales en dev, que son pocas. El storefront lo lee por NEXT_PUBLIC_ALGOLIA_SUGGESTIONS_INDEX, y el índice se genera desde product_items_view_index_dev.

Opción	Valor actual	Problema
languages	[]	No junta plurales ni palabras vacías: smart tv y tv smart salen como dos sugerencias
minLetters	4	Deja afuera tv, hp, lg, jbl, ps5
minHits	5	Razonable
generate	null	No siembra desde el catálogo; con poco tráfico el índice queda casi vacío
facets	null	No guarda la categoría de cada sugerencia
exclude	[]	No hay lista de búsquedas a excluir

Ningún registro trae type, así que en el desplegable todas las sugerencias muestran la lupa. En el índice de productos, brand no es faceta; category sí.

Configuración a aplicar

Se edita en el panel de Algolia: aplicación TEIMEI80G9 → Search → Query Suggestions → product_items_view_index_dev_query_suggestions → Edit. Primero en dev; en staging y producción, después de revisar el resultado.

Campo	Valor	Por qué
Índice de origen	product_items_view_index_dev (sin cambios)	De ahí salen las búsquedas y los productos que validan cada sugerencia
Idioma (languages)	es	Une singular y plural, ignora "de", "para" y "con", y elimina duplicados en otro orden. Es el cambio de mayor impacto
minLetters	2 (antes 4)	Entran tv, hp, lg, jbl, ps5. Con 1 entrarían letras sueltas
minHits	5 (sin cambios)	Evita sugerir búsquedas que llevan a páginas casi vacías
facets	category, cantidad 1	Guarda la categoría principal de cada sugerencia; es la base para mostrar "notebook en Notebooks"
generate	category	Crea sugerencias con los nombres de las categorías aunque nadie las haya buscado
exclude	Vacío por ahora	Se carga con lo que se vea mal después de regenerar
Personalización y caracteres especiales	Desactivados (sin cambios)	—

{
  "sourceIndices": [{
    "indexName": "product_items_view_index_dev",
    "minHits": 5,
    "minLetters": 2,
    "facets": [{ "attribute": "category", "amount": 1 }],
    "generate": [["category"]],
    "replicas": false
  }],
  "languages": ["es"],
  "exclude": [],
  "enablePersonalization": false,
  "allowSpecialCharacters": false
}

El índice se regenera en unos minutos y después una vez por día. Su configuración (por ejemplo attributesForFaceting) no se toca a mano: el generador la reescribe.

Pendientes

• [ ] Probar en pantalla los chips y el cierre al hacer clic afuera.
• [ ] Aplicar la configuración en dev, regenerar y revisar cuántas sugerencias quedan y cuáles son.
• [ ] Confirmar con negocio si macrovip es una marca o una búsqueda de prueba, para decidir si va en exclude.
• [ ] Repetir la configuración en staging y producción.
• [ ] Opcional: agregar brand como faceta en el índice de productos y sumar generate: [["brand"]]. Afecta al índice que usa toda la tienda, así que va aparte.

La aplicación de Algolia es compartida: cualquier cambio en el generador lo ven todos los que usan el índice de dev.