Tienda

Un listado de productos en /shop y una página por producto, para el carrito que añadió vela enable ecommerce. Las páginas están escritas en los términos de tu proveedor de pagos, y son tuyas: el generador nunca sobrescribe un archivo que ya existe.

Sintaxis

$ vela generate shop

Opciones

• --provider <provider> - Opcional. La tienda sigue al proveedor de pagos del proyecto, así que esto solo lo confirma; un proveedor distinto se rechaza.

Cada página de producto tiene un botón <AddToCart>. Si alguno de los archivos de abajo ya existe, no se escribe nada y el comando nombra el archivo: ejecuta vela destroy shop para eliminar una tienda generada antes, o aparta el archivo.

Stripe

Las páginas leen el catálogo que la sincronización de pagos copia de Stripe a PocketBase (stripe_products y stripe_prices), en el servidor:

src/routes/(public)/shop/+page.server.ts
src/routes/(public)/shop/+page.svelte
src/routes/(public)/shop/[product]/+page.server.ts
src/routes/(public)/shop/[product]/+page.svelte

El listado muestra cada producto activo con su precio único predeterminado, y la página de producto su descripción, su primera imagen y todos sus precios únicos activos, con un selector cuando hay más de uno (tallas, por ejemplo; ponles nombre con el apodo del precio en el panel). La URL de un producto es su id, o metadata.slug si lo defines en el producto en el panel de Stripe. Los productos, precios, imágenes y descripciones se editan en Stripe; la sincronización corre cada diez minutos.

Shopify

Las páginas consultan la Storefront API:

src/routes/(public)/shop/+page.ts
src/routes/(public)/shop/+page.svelte
src/routes/(public)/shop/[handle]/+page.ts
src/routes/(public)/shop/[handle]/+page.svelte

Los loads son universales (el token de la Storefront es público) y no se prerenderizan, así que el catálogo cambia sin recompilar y un sitio estático muestra las páginas con su fallback. La página de producto ofrece cada opción (talla, color) como un selector y resuelve la variante a añadir; una variante agotada lo indica. Los productos viven en el admin de Shopify y deben publicarse en el canal Headless al que pertenece el token.

WhatsApp

WhatsApp no tiene catálogo propio, así que los productos son un módulo que editas:

src/lib/catalog.ts
src/routes/(public)/shop/+page.svelte
src/routes/(public)/shop/[id]/+page.ts
src/routes/(public)/shop/[id]/+page.svelte

catalog.ts lista el id, name, description, price (en site.currency, escrito como lo escribirías tú: 4.5) e image de cada producto. Omite el precio en un artículo que el negocio cotiza en el chat. Las páginas de producto toman sus entradas del módulo, así que un sitio estático las prerenderiza todas.

Con el CMS habilitado, el catálogo es contenido en lugar de un módulo: una CmsCollection llamada catalog en el ámbito del layout raíz, que leen tanto el listado como las páginas de producto, así que los productos se añaden y se les pone precio en el sitio con ?edit. Los precios siguen en site.currency.

Lo que no es

Una tienda son páginas sobre un catálogo que vive en otro lugar (Stripe, Shopify, tu módulo o el CMS). No se generan existencias, categorías ni búsqueda; en Shopify el listado muestra los primeros cien productos.