La tienda
Lo que hace la tienda para los clientes: sus páginas, el carrito y la lista de deseos, el pago, las cuentas, el seguimiento de pedidos, el probador, las etiquetas de analítica y los buscadores.
Para el paquete Full Stack
Páginas
Cada página existe en inglés en /en y en árabe en /ar. Una ruta sin idioma va a /en.
| Ruta | Qué muestra |
|---|---|
/en | La página de inicio: imagen principal, categorías, novedades, un banner de oferta, los más vendidos y secciones editoriales. |
/en/shop | Todos los productos, con búsqueda, filtros por categoría, precio y destacados, ordenación y paginación. Los filtros forman parte de la dirección, así que cada vista se puede compartir. |
/en/categories | Las categorías, con búsqueda y ordenación. |
/en/products/<slug> | Un producto: galería, variantes, precio, valoración, reseñas, productos relacionados y los botones de lista de deseos y del probador. |
/en/cart | El carrito y su resumen. |
/en/checkout | Los datos de envío y el pago en una sola página, junto al resumen del pedido. Abierta a invitados. |
/en/order-confirmation/<number> | El número de pedido que hay que guardar para el seguimiento, con enlaces para seguir comprando y para seguir el pedido. |
/en/track-order | Seguimiento del pedido por número de pedido y correo, sin cuenta. |
/en/about, /en/contact, /en/faq | Páginas de ayuda. |
/en/auth/login, /en/auth/register, /en/auth/forgot-password, /en/auth/reset-password | Inicio de sesión y creación de cuenta. Un cliente con sesión iniciada es redirigido fuera de ellas. |
/en/account | El área con sesión iniciada: un resumen, los pedidos y su detalle, las direcciones, el perfil, el seguimiento de pedidos y la lista de deseos. Un visitante sin sesión iniciada es enviado a la página de inicio de sesión. |
/en/wishlist redirige a /en/account/wishlist.
Conecta esto antes de pasar a producción
El formulario de contacto y el formulario de newsletter del pie de página confirman al comprador pero no envían nada hasta que los conectes, y la plantilla no tiene páginas de términos ni de privacidad, aunque el formulario de registro pide a los compradores que los acepten. Conecta ambos formularios a tu propio correo o servicio de soporte y añade esas páginas antes de vender.
Carrito y lista de deseos
- El carrito y la lista de deseos se guardan en el navegador del comprador, tanto para invitados como para clientes con sesión iniciada, así que sobreviven a una recarga y a una nueva visita desde el mismo dispositivo.
- Cualquiera puede añadir a la lista de deseos desde la tarjeta o la página de un producto. La página de la lista de deseos está en el área de la cuenta, así que para verla hay que iniciar sesión.
- El carrito muestra el subtotal, el envío (gratis a partir de $75; si no, $9.99) y el total. La API vuelve a calcular el precio de cada pedido a partir de su propio catálogo cuando se realiza, con la misma regla de envío, y el carrito nunca acompaña al comprador a otro dispositivo.
Pago
Una sola página: nombre y apellidos, correo, un teléfono opcional, dirección, ciudad, código postal y país, y luego el método de pago. Los invitados pagan con su correo.
- Contra reembolso está seleccionado por defecto y confirma el pedido al momento.
- Tarjeta funciona con Stripe, dentro de la página. Necesita la clave publicable en la tienda y la clave secreta y el webhook en la API.
- El resumen muestra el envío que cobra la API, gratis a partir de $75 y si no $9.99, sin impuestos.
- No hay campo para códigos promocionales.
NEXT_PUBLIC_DEMO_CHECKOUT=truerellena el pago con un comprador generado y añade un botón junto al título del envío que genera otro. Déjalo enfalsepara una tienda real.
Cuentas de cliente
- El registro pide nombre y apellidos, un correo y una contraseña de al menos 8 caracteres, y la casilla de los términos.
- El inicio de sesión funciona desde su página y desde una ventana de inicio de sesión que se abre en cualquier parte de la tienda. Los clientes y el personal son cuentas separadas: un cliente no puede iniciar sesión en el panel de administración.
- El perfil tiene dos pestañas: los datos del cliente y el cambio de contraseña.
- Las direcciones se pueden añadir, editar y eliminar, y una se puede marcar como predeterminada.
- Los pedidos muestran los pedidos del cliente, cada uno con su estado, número de seguimiento, artículos, totales y direcciones.
El correo necesita tu propio sistema de envío
La plantilla no envía correos: ni confirmación de pedido, ni aviso de envío, ni mensaje de restablecimiento de contraseña. Fuera de producción, la API escribe el token de restablecimiento en su registro, y la página de restablecimiento se abre en /en/auth/reset-password?token= seguido de ese token. Con NODE_ENV=production el token no va a ningún sitio hasta que conectes un proveedor de correo en forgotPassword, en back-end/src/modules/customer-auth/customer-auth.controller.ts.
Reseñas
- Cada página de producto muestra sus reseñas y un resumen de la valoración. La reseña de un cliente que compró el producto lleva la insignia "Verified Purchase".
- Los compradores no pueden escribir reseñas: ni la tienda ni el panel de administración tienen un formulario para ello, así que la tienda muestra las reseñas de los datos iniciales.
- La API acepta reseñas de clientes con sesión iniciada en
POST /api/reviews, una por cliente y producto: volver a enviarla actualiza la primera.
Seguimiento de pedidos
/en/track-order pide el número de pedido y el correo con el que se hizo el pedido, así que un número adivinado no revela nada. Un enlace con ?order= rellena el número. Los clientes con sesión iniciada siguen sus pedidos desde su cuenta solo con el número de pedido.
La consulta permite 10 intentos por minuto desde una misma dirección.
El probador
Cuando la API tiene el probador activado, los compradores pueden ver un producto puesto antes de comprarlo. Sin él, nada de esto aparece.
- Una percha "Try it on" en cada tarjeta de producto, un botón en la galería del producto y un panel del probador fijo en cada página.
- El look se dibuja sobre un modelo, o sobre una foto de cuerpo entero del propio comprador (JPG, PNG o WebP, hasta 12 MB) con "Use my photo".
- Con la tienda de ejemplo muestra la foto del propio producto, con una nota de que el look no se ha dibujado.
Analítica y píxeles de seguimiento
Hay seis redes integradas. Pega un id en storefront/.env (con Docker Compose, el .env junto a docker-compose.yml) y reconstruye. Un id que se deja vacío no carga ningún script.
| Variable | Red |
|---|---|
NEXT_PUBLIC_GTM_ID | Google Tag Manager |
NEXT_PUBLIC_GA4_MEASUREMENT_ID | Google Analytics 4 |
NEXT_PUBLIC_META_PIXEL_ID | Facebook e Instagram |
NEXT_PUBLIC_TIKTOK_PIXEL_ID | TikTok |
NEXT_PUBLIC_SNAPCHAT_PIXEL_ID | Snapchat |
NEXT_PUBLIC_PINTEREST_TAG_ID |
NEXT_PUBLIC_ANALYTICS_CURRENCY (USD por defecto) se envía con cada valor, y NEXT_PUBLIC_ANALYTICS_DEBUG=true registra cada evento en la consola del navegador. Si configuras un solo id, que sea Tag Manager: puede cargar los demás desde su propia interfaz. Si GA4 funciona dentro de tu contenedor de Tag Manager, deja vacío NEXT_PUBLIC_GA4_MEASUREMENT_ID, o cada sesión se contará dos veces.
| Evento | Se lanza cuando |
|---|---|
page_view | Cada navegación, incluida la primera |
view_item | Una página de producto termina de cargarse |
add_to_cart | Add to cart, Buy now, o un aumento de cantidad en el carrito |
remove_from_cart | Se elimina una línea, o se reduce su cantidad |
add_to_wishlist | Se añade un producto a la lista de deseos |
view_cart | La página del carrito se abre con algo dentro |
begin_checkout | Se abre la página de pago |
purchase | Se crea el pedido y se completa el pago |
search | Un término de búsqueda se fija en el panel de búsqueda |
sign_up | Se crea una cuenta |
login | Un comprador inicia sesión |
Consentimiento
Las etiquetas se cargan en cuanto se carga la página. Si vendes en la UE o en el Reino Unido, pon un banner de consentimiento delante de ellas antes de pasar a producción: las etiquetas las monta <AnalyticsScripts /> en src/app/layout.tsx.
Buscadores y compartir
- Cada página pública tiene su propio título y descripción, de
messages/seo/, con un enlace canonical y alternativas en inglés, en árabe y en el idioma por defecto. /robots.txtmantiene fuera de los buscadores las páginas de la cuenta, de inicio de sesión, del carrito, del pago y de confirmación del pedido, y apunta al sitemap./sitemap.xmlenumera las páginas públicas en ambos idiomas, además de cada producto cuando el servidor puede llegar a la API.- Cada página incluye los datos de la organización y del sitio web de la tienda para los buscadores, incluida la búsqueda del sitio.
- Todo esto se construye a partir de
NEXT_PUBLIC_SITE_URL: ponle tu dirección real antes de pasar a producción, y reconstruye.
La tienda de ejemplo
Sin NEXT_PUBLIC_API_BASE_URL, la tienda funciona con una tienda de ejemplo en el navegador y muestra un aviso "Sample data" que el visitante puede cerrar hasta la siguiente carga de página.
- Cualquier correo y contraseña te inician sesión como el comprador de ejemplo. Navegar, filtrar, el carrito, la lista de deseos, las direcciones y el historial de pedidos funcionan, y los cambios se guardan en el navegador.
- El pago cobra el envío igual que la API y se completa sin llamar a Stripe.
- Cuando tu API esté conectada,
yarn remove:mockelimina la tienda de ejemplo y su aviso. Conservapublic/mock-media/, a la que sigue apuntando un backend cargado sin bucket.
storefrontyarn remove:mockDónde cambiar las cosas
| Qué | Dónde, en storefront/ |
|---|---|
| Nombre, logotipo, datos de contacto, enlaces sociales, imágenes para compartir | src/config/brand.config.ts |
| Colores | src/styles/theme-variables.css |
| Cada palabra visible | messages/<namespace>/en.json y ar.json |
| Títulos de página para los resultados de búsqueda | messages/seo/ |
| El diseño de una página | src/app/[locale]/ para la ruta, src/features/ para sus partes |
| Etiquetas de marketing | src/config/analytics.config.ts, activadas desde .env |
Cómo encaja el código de la tienda
Incluido con tu compra. Inicia sesión para leerlo o ábrelo en tu descarga.
La estructura y las convenciones del código, y cómo añadir una red de seguimiento.
Lo que hace la API para la tienda
El catálogo, las cuentas, las direcciones, los pedidos, el seguimiento, las reseñas y el probador de la tienda los sirven las rutas públicas y de clientes de la API.