# Producto: Supplements Shop

> **Estado:** ✅ Production-ready (validado 2026-05-28)
> **Tenant demo (local):** `bp-test-supplements-shop`
> **Tenant comercial (producción):** Suplementos Yerba Buena — `suplementosyerbabuena.com`
> **Última auditoría:** 2026-05-28 — refinamientos UX shop-style finales (sticky sidebar, 1:1 cards, Cloudinary on-the-fly)
> **9° producto certificado** (1° de la familia retail/e-commerce con cart+checkout WhatsApp).

---

## 1. Identidad

| Campo | Valor |
|-------|-------|
| **Core slug** | `supplements-shop` |
| **Demo asignado** | `demo-supplements-shop` (clon independiente de demo-medical desde 2026-05-28) |
| **Tagline** | "Suplementos para tu salud y rendimiento" |
| **Descripción** | "Tienda especializada en suplementos deportivos y dietéticos. Te asesoramos y buscamos lo mejor para vos." |
| **Schema.org type** | `Store` |
| **Idioma SEO** | `es_AR` |
| **Demo de referencia** | Inspiración shop-style: optimumnutrition.com (overlay hero) + 1stphorm.com (foto atleta + urgencia) |
| **Industria (alias-matrix)** | `health-medical` (alias products: "Tienda de Bienestar"); secundaria `retail-gastro` |

---

## 2. Catálogo — shop products que mapean a este core

Definido en `database/seeders/products/catalog.json`:

| Shop slug | Nombre comercial |
|-----------|------------------|
| `supplements-shop` | Tienda de Suplementos Deportivos |
| `sports-nutrition-store` | Tienda de Nutrición Deportiva |
| `natural-health-store` | Tienda Naturista / Productos Naturales |
| `vitamins-supplements-store` | Tienda de Vitaminas y Suplementos |
| `dietary-supplements-store` | Tienda de Suplementos Dietéticos |
| `nutrition-store` | Tienda de Nutrición |

→ Cualquiera de estos 6 slugs en `bewpro:new` resuelve al mismo core preset.

---

## 3. Módulos activos

7 módulos totales (5 declarados + 2 auto-activos del sistema):

| Módulo | Header label | Header | Footer | Origen |
|--------|--------------|--------|--------|--------|
| `products` | "Productos" | ✅ | ✅ | declarado |
| `gallery` | "Marcas" | ✅ | ✅ | declarado |
| `blog` | "Novedades" | ✅ | ✅ | declarado |
| `faqs` | — | ❌ | ✅ | declarado |
| `testimonials` | — | ❌ | ❌ | declarado (embebido en welcome) |
| `about` | "Nosotros" | ✅ | ✅ | auto (cd-base) |
| `contact` | "Contacto" | ✅ | ✅ | auto (cd-base) |

**Módulos opcionales (upsells)**: `services` (asesoramiento pago / plan personalizado), `team` (mostrar nutricionistas), `newsletter` (captura leads).

---

## 4. Branding

### Brand defaults (`brand_defaults.colors`)

| Slot | Hex | Uso |
|------|-----|-----|
| primary | `#141F88` | Azul deep — CTAs, links principales, header bg sticky |
| secondary | `#030E68` | Azul más oscuro — hovers, footer |
| tertiary | `#4BB98C` | Verde menta — accents, trust badges, success states |
| quaternary | `#1A2333` | Gris oscuro — trust bar superior |
| dark | `#0B1124` | Texto principal en light surfaces |
| light | `#FFFFFF` | Backgrounds principales |

**Racional**: muchas tiendas de suplementos AR/LATAM usan azul deep + verde como código semántico (energía, salud, performance). Patrón confirmado en el rubro.

### Fonts

| Slot | Font | Uso |
|------|------|-----|
| primary | Poppins | Body + headings |
| secondary | Poppins | Idem (consistencia) |
| tertiary | Shadows Into Light | Acento manuscrito en hero subheadlines opcionales |

### Logo pack

`brand_defaults.logo_pack = "medical"` (hereda pack de medical hasta que tenga set propio del rubro).

---

## 5. Asset pack físico

Archivos esperados en `public/cd-project/assets/{slug}/` (provisión auto-asigna desde medical):
- logo.png, logo-alternative.png, logo-2.png
- favicon.ico, favicon.svg, favicon-96x96.png
- apple-touch-icon.png, web-app-manifest-192x192.png, web-app-manifest-512x512.png
- site.webmanifest

### Imágenes del demo

`public/cd-project/img/demos/supplements-shop/` — 9 imágenes clonadas de medical (about, backgrounds, slides genéricos). En producción Yerba Buena cada slot crítico se reemplazó por imagen Cloudinary del tenant:
- Hero slide 1 + 2 (gym + outdoor)
- Athlete spotlight
- Brands gallery × 6 (Star Nutrition, ENA Sport, etc. — placeholder)
- Blog headers × 3 (proteínas, hidratación, recuperación)

---

## 6. CTA del Header

```json
{
  "active": true,
  "title": "Hacer pedido",
  "url": "/products-catalogue",
  "target": "_self",
  "style": "primary"
}
```

(Contraste con medical: medical usa "Pedir turno" → `/contact`.)

---

## 7. Seeds de contenido

| Archivo | Contenido seedeado |
|---------|--------------------|
| `products-supplements-shop.json` | **10 productos demo** (Whey concentrada, Whey isolada, Vegana, Creatina, Pre-entreno, Multivitamínico, Omega 3, Colágeno, Ashwagandha, Combo Hipertrofia) en 6 categorías (Proteínas / Creatina / Pre-entrenos / Vitaminas / Salud y bienestar / Combos) |
| `blog-supplements-shop.json` | 3 posts iniciales (proteínas, hidratación, recuperación post-entreno) |
| `faqs-supplements-shop.json` | 11 FAQs en 3 categorías (Pedidos y envíos / Productos / Asesoramiento) |
| `config-supplements-shop.json` | Overrides welcome (boxes adaptados al rubro), about, contact, footer |

---

## 8. Vistas blade del producto

### Frontend (módulo products, demo-supplements-shop)

| Archivo | Líneas | Contenido |
|---------|--------|-----------|
| `modules/products/frontend/demos/demo-supplements-shop/catalogue.blade.php` | ~280 | Listado /products-catalogue — cards 1:1 + sidebar sticky + filtros |
| `modules/products/frontend/demos/demo-supplements-shop/show.blade.php` | ~520 | Detalle /products-catalogue/{slug} — Porto thumb-gallery + tabs + related 1:1 |
| `modules/products/frontend/demos/demo-supplements-shop/cart.blade.php` | ~180 | /shop/cart — line items + totales + WhatsApp checkout |
| `modules/products/frontend/demos/demo-supplements-shop/checkout.blade.php` | ~220 | /shop/checkout — formulario WhatsApp redirect |
| `modules/products/frontend/demos/demo-supplements-shop/confirmation.blade.php` | ~150 | /shop/confirmation/{order} — order recap + reference_code |

### Welcome (cd-base demo-supplements-shop)

| Archivo | Líneas | Contenido |
|---------|--------|-----------|
| `modules/cd-base/frontend/demos/demo-supplements-shop/welcome.blade.php` | 688 | 8 secciones shop-style: hero punchy + featured products + shop by goal + athlete spotlight + brands gallery + about refinado + newsletter + blog teaser |
| `modules/cd-base/frontend/demos/demo-supplements-shop/about.blade.php` | 131 | About con 3 pilares (asesoramiento, productos certificados, atención humana) |
| `modules/cd-base/frontend/demos/demo-supplements-shop/contact.blade.php` | 159 | Contact — WhatsApp prominente como CTA primario |

### Layout

| Archivo | Contenido |
|---------|-----------|
| `layout/front/headers/demo-supplements-shop.blade.php` | Trust bar superior 4 items + top bar + nav + cart icon + CTA "Hacer pedido". Header effect-shrink Porto. |
| `layout/front/footers/demo-supplements-shop.blade.php` | 4 columnas (Comprá / Atención / Sobre / Pagos) + payment methods + Powered by BewPro |
| `layout/front/partials/page-header-supplements-shop.blade.php` | Modern type page-header con breadcrumbs |

### Admin

| Archivo | Tab |
|---------|-----|
| `admin/site-data/welcome/demo-supplements-shop.blade.php` | Welcome — hero, featured headings, goals 1-4, athlete, brands |
| `admin/site-data/about/demo-supplements-shop.blade.php` | About — 3 pilares editables |
| `admin/site-data/contact/demo-supplements-shop.blade.php` | Contact — WhatsApp default + form opcional |

---

## 9. Editabilidad — paridad admin↔front

| Tab admin | Keys del front | Estado |
|-----------|----------------|--------|
| `welcome` | `hero1/2_*`, `featured_*`, `goal_1-4_*`, `athlete_*`, `brands_list`, `newsletter_*` | Schema en `database/schemas/demos/demo-supplements-shop.json` |
| `about` | `about.pillar_1-3_*`, `about.headline`, `about.cta_url` | ✓ |
| `contact` | `contact.whatsapp`, `contact.email`, `contact.address`, `contact.hours` | ✓ |

---

## 10. Comando de provisión

```bash
# Desarrollo / staging
php artisan bewpro:new admin@bewpro.com "Tienda Demo" supplements-shop --db=bp-demo-supplements-shop --fresh

# Variante con slug comercial (resuelve al mismo core)
php artisan bewpro:new admin@cliente.com "Mi Tienda" sports-nutrition-store --db=bp-mitienda --fresh
```

---

## 11. Changelog del pulido (2026-05-28)

### Bugs transversales arreglados

| Archivo | Bug | Fix |
|---------|-----|-----|
| `ProvisionNew.php` | `copyPresetContentSeeds()` no incluía `products-{slug}.json` en el map → seeds de productos no se copiaban | Agregado entry + restorePresetContentJson |
| `settings` table | Sin UNIQUE constraint en `key` permitía duplicates corruptos | `ALTER TABLE settings ADD UNIQUE settings_key_unique (key)` |
| `SiteConfigService` | Cache 24h impedía hot-fix tras update settings producción | Documentado en deploy: `rm storage/framework/cache/data/*` + `systemctl restart php8.3-fpm` |
| `$unsplashUrl` helper | Solo soportaba Unsplash, no Cloudinary on-the-fly | Extendido para `res.cloudinary.com` con regex `/upload/(?!w_)` |

### Cambios específicos del demo

| Archivo | Cambio |
|---------|--------|
| `catalogue.blade.php` | Cards 1:1 cuadradas (era 3:2 horizontal). Agregado `img-fluid d-block` defensive. |
| `show.blade.php` | Related products 1:1 cuadrado (era 3:2). Sticky sidebar en col-lg-3. |
| `demo-supplements-shop.css` | Reglas defensive `.catalog-product-img` + `.related-product-img` con `!important` aspect-ratio. Sticky `.sidebar-sticky` con `align-self:flex-start`. |
| `welcome.blade.php` | 8 secciones shop-style deluxe inspiradas Optimum Nutrition + 1st Phorm. |
| `header/footer` | Header con trust bar superior. Footer 4-cols + payment badges + Powered by BewPro. |

---

## 12. QA checklist

```bash
# 1. Provisionar tenant fresco
php artisan bewpro:new admin@bewpro.com "Demo Supplements Shop" supplements-shop \
    --db=bp-demo-supplements-shop --fresh --no-email

# 2. Verificar 10 productos seeded
mysql bp-demo-supplements-shop -e "SELECT COUNT(*) FROM products WHERE is_active=1"
# Esperado: 10

# 3. Verificar categorías
mysql bp-demo-supplements-shop -e "SELECT name, slug FROM categories WHERE type='product'"
# Esperado: 6 (Proteínas, Creatina, Pre-entrenos, Vitaminas, Salud y bienestar, Combos)

# 4. Verificar FAQs
mysql bp-demo-supplements-shop -e "SELECT category, COUNT(*) FROM faqs GROUP BY category"
# Esperado: 11 en 3 categorías

# 5. Verificar demo activo
mysql bp-demo-supplements-shop -e "SELECT value FROM settings WHERE \`key\`='cd-system.theme.demo'"
# Esperado: demo-supplements-shop

# 6. Smoke front
for url in / /products-catalogue /shop/cart /blog /faqs /contact /about; do
  curl -s -o /dev/null -w "%{http_code} $url\n" http://127.0.0.1:8000$url
done

# 7. Verificar HTML class demo
curl -s http://127.0.0.1:8000/ | grep -oE 'class="[^"]*demo-supplements-shop[^"]*"' | head -1

# 8. Verificar Cloudinary on-the-fly en catalog (esperado: 10 URLs con w_600,h_600,c_fill)
curl -s http://127.0.0.1:8000/products-catalogue | grep -oE 'res\.cloudinary\.com[^"]*w_600,h_600,c_fill' | wc -l

# 9. Verificar sticky sidebar markup
curl -s http://127.0.0.1:8000/products-catalogue | grep -c 'sidebar-sticky\|sidebar-col-sticky'
# Esperado: 2

# 10. Verificar related products 1:1 en show
SLUG=$(curl -s http://127.0.0.1:8000/products-catalogue | grep -oE '/products-catalogue/[a-z0-9-]+' | grep -v category | head -1)
curl -s http://127.0.0.1:8000${SLUG} | grep -c 'related-product-img'

# 11. JSON-LD Store schema
curl -s http://127.0.0.1:8000/ | grep -oE '"@type":"Store"' | head -1
```

---

## 13. Problemas conocidos / fuera de scope

- **`brand_defaults.logo_pack`** todavía apunta a `medical`. Pendiente: pack propio del rubro (logos con paleta azul + ícono dumbbell o hoja).
- **Brands gallery placeholders**: actualmente 6 nombres de marcas conocidas (Star Nutrition, ENA Sport, etc.) — falta licencia formal para usar logos reales. En tenants comerciales el cliente debe subir los suyos.
- **Athlete spotlight**: imagen Unsplash genérica en demo; en producción Yerba Buena se reemplazó por foto Cloudinary del tenant.
- **Newsletter**: endpoint `/newsletter-subscribe` ya existe a nivel cd-base; integración con SendGrid/Mailchimp queda como upsell.
- **Cart fuera de WhatsApp**: actualmente checkout solo redirige a WhatsApp con resumen. Integración Stripe/Mercado Pago para cobro directo queda fuera del scope inicial.

---

## 14. Referencias cruzadas

- Core preset: `database/seeders/products/core/supplements-shop.json`
- Seeds: `database/seeders/products/core/seeds/{products,blog,faqs,config}-supplements-shop.json`
- Demo: `resources/views/modules/cd-base/frontend/demos/demo-supplements-shop/` + `layout/front/*/demo-supplements-shop.blade.php`
- Admin schemas: `database/schemas/demos/demo-supplements-shop.json`
- Doc portfolio: [`../../productos/supplements-shop/`](../../productos/supplements-shop/)
- Demo técnico: [`../demos/demo-supplements-shop.md`](../demos/demo-supplements-shop.md)
- Producto hermano (mismo carro/checkout, distinto rubro): [`medical.md`](medical.md) — pendiente de crear si no existe