Gustavo Vargas Rubiano
← Proyectos

Frontend headless sobre WooCommerce, con WhatsApp contextual y rastreo de pedidos

Saprix · tienda headless

Modernicé el ecommerce de Saprix a headless sin que perdieran el panel de WooCommerce que su equipo usa a diario para ventas, marketing y catálogo. Frontend en Next.js consumiendo WooCommerce en tiempo real vía REST, con widget de WhatsApp contextual ("Chatprix") que detecta el producto que el cliente está viendo, tracking de pedidos por webhook y PWA instalable. La operación diaria del cliente no se resintió: cambió el frontend, no el back.

El problema

Saprix necesitaba modernizar su eCommerce sin perder el panel de gestión de WooCommerce que ya usaba a diario para ventas, marketing y catálogo. No era migrar de sistema, era separar el frontend del backend sin que la operación diaria del cliente se resintiera.

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.