fix(ecommerce): mostrar mensaje cuando el buscador no tiene resultados

Encontrado probando en vivo con navegador real (Docker + Playwright): una búsqueda de 2+ caracteres sin coincidencias no mostraba nada -- ni "Buscando…" ni ningún mensaje. El usuario quedaba sin feedback de que su búsqueda de verdad corrió. Se agrega un estado vacío con el botón de buscar en todo el catálogo (esa búsqueda completa puede usar criterios más amplios que el autocompletado). Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_01THZFwPzrwv6VAbuwmaf5vR
2026-09-11 13:08:50 +00:00
1 changed files with 12 additions and 0 deletions
@@ -87,6 +87,18 @@ export function PredictiveSearch() {
          Buscando…
        </div>
      )}
+      {/* Encontrado probando en vivo con navegador real: sin este bloque,
+          una busqueda de 2+ caracteres sin coincidencias no mostraba nada
+          (ni "buscando" ni un mensaje) -- el usuario se quedaba sin ningun
+          feedback de que su busqueda de verdad corrio. Se ofrece igual el
+          boton de buscar en todo el catalogo porque esa busqueda completa
+          puede usar criterios mas amplios que el autocompletado. */}
+      {!loading && normalized.length >= 2 && matches.length === 0 && (
+        <div className="absolute left-0 right-0 top-[calc(100%+10px)] z-50 rounded-2xl border border-slate-200 bg-white p-2 text-center shadow-2xl">
+          <p className="p-3 text-sm text-slate-500">No encontramos resultados para “{query.trim()}”.</p>
+          <button type="submit" className="w-full rounded-xl bg-ari-marino px-4 py-3 text-sm font-black text-white hover:brightness-110">Buscar “{query.trim()}” en todo el catálogo</button>
+        </div>
+      )}
      {matches.length > 0 && (
        <div className="absolute left-0 right-0 top-[calc(100%+10px)] z-50 overflow-hidden rounded-2xl border border-slate-200 bg-white p-2 shadow-2xl">
          {matches.map((product) => (