Frontend headless sobre WooCommerce, con WhatsApp contextual y rastreo de pedidos
Saprix · tienda headless
Saprix quería renovar la experiencia de compra sin cambiar el panel de WooCommerce que su equipo ya usaba para catálogo, ventas y marketing. Separé el frontend en Next.js y mantuve su operación diaria; sumé Chatprix, WhatsApp contextual, rastreo de pedidos por webhook y una PWA instalable.
El problema
El equipo de Saprix necesitaba una experiencia de compra renovada, pero dependía del panel de WooCommerce para administrar catálogo, ventas y marketing. Cambiar de plataforma habría alterado procesos que ya funcionaban; el reto era separar la presentación de la tienda y conservar la operación existente.
La solución
Frontend & rendimiento
- Frontend headless en Next.js consumiendo WooCommerce (el back real de ventas, marketing y catálogo del cliente) vía REST API en tiempo real.
- Rendimiento como estándar: tiempo de carga objetivo de 2.5 segundos o menos.
- Progresiva (PWA): instalable en el celular, con caché de assets y página offline propia.
Marketing, SEO & pagos
- Google Tag Manager (Analytics, Search Console, Ads, Shopping) y Meta Pixel con Meta Shopping, parametrizados.
- SEO técnico: metadatos, sitemap, datos estructurados de producto.
- Pasarelas vía API: Wompi, Sistecredito, Addi (BNPL) y WhatsaPay (propia, ver su ficha aparte).
Seguridad
- Arquitectura en tres capas aisladas (frontend, CMS y datos).
- Lista blanca de endpoints, login de WordPress oculto, headers CSP/X-Frame-Options.
- Rotación periódica de credenciales.
Experiencia del cliente
- Widget de WhatsApp contextual ("Chatprix"): detecta el producto que el cliente está viendo y pre-llena el mensaje.
- Dashboard de rastreo de pedidos: webhook de WooCommerce → Supabase → n8n actualiza la guía de envío.
- Snippets y plugins de WordPress para que el equipo edite el hero y otros bloques sin tocar código.
- Notificaciones push al dispositivo, en desarrollo.