🌍 Travel Template - Cadences Storefront

Template de Astro para crear sitios web de agencias de viajes conectados con Cadences.

🚀 Quick Start

# Instalar dependencias
npm install

# Configurar tu storefront (¡IMPORTANTE!)
# Edita src/config/storefront.config.ts con tus datos

# Desarrollo local
npm run dev

# Build para producción
npm run build

⚙️ Configuración Principal

Archivo: src/config/storefront.config.ts

Este es el archivo más importante. Define:

const config: StorefrontConfig = {
  // Tu storefront
  id: 'taniaviajes',           // ID único (usado en URLs)
  name: 'Tania Viajes',        // Nombre a mostrar
  type: 'travel',              // Tipo de storefront
  
  // Conexión con TU cuenta de Cadences
  cadences: {
    apiUrl: 'https://cadences.app/api',
    customerId: 'cust_TU_ID',      // Tu Customer ID en Cadences
    organizationId: 'org_TU_ORG',  // Tu Organization ID
  },
  
  // Mapeo de proyectos por función
  projects: {
    products: [                     // Proyectos con viajes/destinos
      'proj_marruecos_123',
      'proj_japon_456',
    ],
    leads: 'proj_leads_abc',        // Donde van las solicitudes
    faqs: 'proj_faqs_def',          // Proyecto con FAQs
    testimonials: 'proj_reviews',   // Proyecto con testimonios
    team: 'proj_equipo',            // Proyecto con el equipo
  },
  
  // Branding, contacto, SEO...
};

📁 Estructura

src/
├── config/
│   └── storefront.config.ts  # ⚡ CONFIGURACIÓN PRINCIPAL
├── components/
│   ├── sections/             # Secciones de la home
│   ├── Header.astro
│   └── Footer.astro
├── layouts/
│   └── Layout.astro
├── lib/
│   └── cadences-client.ts    # Cliente API
├── pages/
│   ├── index.astro           # Home
│   └── destinos/[slug].astro # Página destino
└── styles/
    └── global.css

🔗 Mapeo Cadences → Travel Website

⚙️ Configuración del Storefront

En Cadences, configura el storefront en la organización:

// organizations.storefrontConfig
{
  "id": "taniaviajes",
  "subdomain": "taniaviajes",
  "name": "Tania Viajes",
  "logo": "https://...",
  "primaryColor": "#e63946",
  "accentColor": "#f4a261",
  "whatsappNumber": "+34612345678",
  "contactEmail": "info@taniaviajes.com",
  "projectIds": ["proj_123", "proj_456"], // Opcional: proyectos específicos
  "leadsProjectId": "proj_leads", // Donde crear solicitudes
  "socialLinks": {
    "instagram": "https://instagram.com/taniaviajes",
    "facebook": "https://facebook.com/taniaviajes"
  },
  "seo": {
    "title": "Tania Viajes - Experiencias únicas",
    "description": "Viajes auténticos diseñados por expertos locales"
  }
}

📝 Campos Custom para Tareas (Viajes)

Para que una tarea aparezca como viaje en el storefront:

{
  "trip": true,           // Marca como viaje
  "published": true,      // Publicado en storefront
  "featured": true,       // Destacado en home
  "price": 2450,          // Precio desde
  "currency": "EUR",
  "days": 8,
  "nights": 7,
  "highlights": ["Noche en jaima", "Paseo en camello"],
  "included": ["Alojamiento", "Transporte", "Guía"],
  "notIncluded": ["Vuelos", "Seguro"],
  "difficulty": "easy",   // easy, moderate, challenging, expert
  "groupSize": { "min": 2, "max": 12 },
  "heroImage": "https://...",
  "itinerary": [
    {
      "day": 1,
      "title": "Llegada a Marrakech",
      "description": "...",
      "meals": ["dinner"],
      "accommodation": "Riad en la Medina"
    }
  ]
}

🌐 Variables de Entorno

# .env
STOREFRONT_ID=taniaviajes
CADENCES_API_URL=https://cadences.app/api

🎨 Personalización

Colores

Edita las variables CSS en Layout.astro:

:root {
  --color-primary-500: #e63946;
  --color-accent-500: #f4a261;
}

Fuentes

Las fuentes se cargan desde Google Fonts. Modifica en Layout.astro.

Logo y Branding

Actualiza Header.astro y Footer.astro con tu logo e información.

🚀 Deploy

Cloudflare Pages

# Build command
npm run build

# Output directory
dist

# Environment variables
STOREFRONT_ID=taniaviajes
CADENCES_API_URL=https://cadences.app/api

Configura el dominio personalizado: taniaviajes.cadences.app

📡 API Endpoints

El storefront consume estos endpoints de Cadences:

• GET /api/storefront/{id}/config - Configuración
• GET /api/storefront/{id}/destinations - Lista de destinos
• GET /api/storefront/{id}/destinations/{slug} - Detalle de destino
• GET /api/storefront/{id}/trips - Lista de viajes
• GET /api/storefront/{id}/trips?featured=true - Viajes destacados
• GET /api/storefront/{id}/trips/{slug} - Detalle de viaje
• POST /api/storefront/{id}/requests - Enviar solicitud

🔒 Seguridad

• Los endpoints de storefront son públicos (solo lectura)
• Los datos sensibles nunca se exponen
• Las solicitudes crean tareas en Cadences para seguimiento

📞 Soporte

¿Preguntas? Contacta con el equipo de Cadences.