equipos Equipo base de ejemplo para catálogo
Ficha de producto DEMO que muestra cómo se ve un equipo en el catálogo: título, descripción, categoría, imagen y precio editorial. Reemplaza este contenido por un producto real.
Ver detallesGuía · Topbar
Barra utilitaria superior (la franja por encima del menú). Cada punto se alimenta de
src/config/site.ts (fuente única); no se escribe a mano. Esto es lo que va en cada lugar:
Propuesta principal
Lo primero que se lee: una frase corta que posiciona la marca. El logotipo NO va aquí — va en el Header, justo debajo.
Dato SITE.tagline
Horario
Señal de disponibilidad y confianza. Se oculta en móvil para priorizar el teléfono y WhatsApp.
Dato CONTACT.schedule.display
Teléfono
Contacto directo con clic-para-llamar. El enlace tel: lo construye telUrl(), no se escribe a mano.
Dato CONTACT.phone · telUrl()
CTA principal de contacto. El enlace SIEMPRE se arma con waUrl(); el mensaje precargado sale de WA_MESSAGES.
Dato waUrl(WA_MESSAGES.cotizar)
Edita en src/components/TopBar.astro · src/config/site.ts
Guía · Header
Barra de navegación principal (logotipo + menú), bajo el topbar. Todo el menú
—escritorio, paneles y móvil— se genera desde NAV en
src/config/site.ts (fuente única); no se escribe a mano. Esto es lo que va en cada lugar:
Logotipo
La marca, a la izquierda, enlazando a la home. Es el ancla de identidad y el «volver al inicio» que todos esperan. Aquí SÍ va el logo (en el topbar no).
Dato SITE.brand · SITE.name
Navegación
Las secciones del sitio. No se hardcodea ningún enlace: se itera NAV, la misma fuente para escritorio y móvil. En móvil colapsa en el menú ☰.
Dato NAV
Paneles (mega / dropdown)
Las secciones con hijos despliegan un panel al pasar el cursor o con el teclado; su contenido sale de la taxonomía, no de una lista aparte.
Dato NAV[].panel · items
CTA · Cotizar
El botón de conversión a WhatsApp, siempre visible a la derecha. El enlace se arma con waUrl(); el mensaje precargado sale de WA_MESSAGES.
Dato waUrl(WA_MESSAGES.cotizacion)
Edita en src/components/Header.astro · src/config/site.ts
Guía · Migas de pan
La ruta que muestra dónde está el visitante dentro de la jerarquía del sitio, justo debajo del header.
Sirve para dos cosas a la vez: orientar y dejar volver a cualquier nivel superior, y alimentar el
BreadcrumbList de schema.org que el buscador usa para mostrar la ruta en sus resultados.
Cada página define su ruta una sola vez con la prop breadcrumbs; el JSON-LD lo emite
buildSchema (no este componente, para no duplicarlo). Esto es cada eslabón:
Raíz (Inicio)
El primer eslabón: siempre enlaza a la home. Es el punto de partida de la ruta y el «volver al inicio» que todos esperan de la jerarquía.
Dato items[0] · href '/'
Eslabón intermedio
Cada nivel ancestro entre la home y la página actual (categoría, subcategoría). Son enlaces: dejan saltar a cualquier nivel superior.
Dato items[].href
Separador
El icono (›) entre eslabones. Es decorativo —va con aria-hidden— y solo marca la dirección de la jerarquía; nunca es un enlace.
Dato SVG · aria-hidden
Página actual
El último eslabón: la página donde estás. No enlaza (ya estás ahí) y se marca con aria-current="page" para los lectores de pantalla.
Dato item sin href · aria-current
Edita en src/components/Breadcrumbs.astro · prop breadcrumbs de cada página
Página de categoría de la plantilla-guía: lista automáticamente cada ficha de la colección de productos. Todos los datos son DEMO.
Catálogo
Cada tarjeta enlaza a su ficha de producto (L4). El badge muestra la subcategoría del esquema: equipos · accesorios · general.
equipos Ficha de producto DEMO que muestra cómo se ve un equipo en el catálogo: título, descripción, categoría, imagen y precio editorial. Reemplaza este contenido por un producto real.
Ver detalles
accesorios Segundo producto de ejemplo, en la categoría accesorios, para demostrar cómo el grid de catálogo lista múltiples entradas de la misma colección sin tocar código.
Ver detalles
general Tercer producto DEMO en la categoría general. Muestra una ficha mínima válida: solo los campos obligatorios del esquema (título, descripción, categoría e imagen).
Ver detallesNo. Es una plantilla-guía; los productos son DEMO. Reemplázalos en src/content/productos/ antes de publicar cualquier sitio real.
Crea un archivo .md en src/content/productos/ con el frontmatter requerido (título, descripción, categoría e imagen). El grid de esta página y su ficha individual se generan solos.
El campo price es opcional. Si se omite, el sistema usa el modelo "bajo cotización" por WhatsApp en lugar de inventar una cifra.