devopsandClaude Sonnet 5
8742ce714c
Sub-fase 2 de Etapa 2 (ADR 0005 seccion 6). Navbar y CategoryTiles usaban arrays hardcodeados (Figuras/Peluches/Mochilas/Marvel) que ya no coinciden con los nombres reales de categoria en Medusa desde que se elimino legacyProductMeta (PR #29) -- todos esos links de navegacion quedaron rotos silenciosamente (0 productos al filtrar). - lib/headless: nuevo tipo Category + metodo getCategories() en CatalogProvider (medusa via /store/product-categories, mock deriva de su catalogo plano, shopify sin implementar como el resto de sus metodos). - Navbar: arbol real de categorias (6 raices/21 nodos), dropdown de hijos por raiz en desktop, lista anidada en el sheet movil. Colecciones del sheet ahora se derivan de los productos reales en vez de un array hardcodeado con 2 nombres obsoletos (Marvel/Frozen vs. los reales Universo Marvel/Reino de Frozen). - CategoryTiles: tiles de home por categoria raiz real; imagen solo donde ya existe asset, gradiente honesto donde no (no hay fotografia para las 6 raices todavia, deuda explicita del ADR). - catalog-client/catalog page: cuando el query param `category` es una raiz con hijos, se expande a los nombres reales de sus hijos para que el filtro (igualdad exacta de producto.category) siga funcionando -- sin esto, tiles/nav apuntando a una raiz mostrarian 0 productos porque ningun producto tiene la raiz asignada directamente. Co-Authored-By: Claude Sonnet 5 <[email protected]> Claude-Session: https://claude.ai/code/session_013dunTcReWMKhWgCPkvAVHD
ARI Shopping Headless Storefront v4.1
Actualización enfocada en UX, interactividad y rendimiento sobre Next.js 15.5.10.
Correcciones principales
- Encabezado blanco premium con acentos cyan, violeta, fucsia y navegación negra.
- Imágenes promocionales sin
opacity,mix-blendni filtros de color. - Menú principal funcional mediante Drawer accesible de Radix UI.
- Cuenta y favoritos funcionales.
- Carrusel con flechas, teclado, scroll suave y
scroll-snap. - Zoom real de producto entre 100% y 300%, rueda, botones, doble clic y arrastre.
- Thumbnails WebP dedicados para tarjetas, búsqueda, carrito y favoritos.
- Recursos originales recomprimidos y caché HTTP para
/images. next/imageen modounoptimizedporque los recursos ya vienen procesados; evita latencia del optimizador durante la primera visita.- Menos componentes animados con JavaScript; las tarjetas usan transiciones CSS.
content-visibilitypara contenido fuera de pantalla.- Pantalla
loading.tsxpara transiciones de ruta.
Validación
npm ci
npm run typecheck
npm run build
Flujo
Gitea → Gitea Actions → Registry → actualización de frontend.yaml → Argo CD → Kubernetes.