D'SKIN - Migración de WordPress a Astro

El Desafío

D’SKIN, una marca chilena de cosmética natural, tenía un sitio WordPress + WooCommerce que estaba mostrando su edad. El cliente necesitaba una presencia web más rápida y moderna, manteniendo la capacidad de gestionar contenido fácilmente y conservar la funcionalidad de e-commerce.

Los objetivos principales fueron:

• Mejorar dramáticamente la velocidad de carga y Core Web Vitals
• Proporcionar una experiencia de edición visual para el equipo de marketing
• Mantener WooCommerce para gestión de productos y checkout
• Soporte bilingüe (Español/Inglés)
• Estética moderna y premium que refleje la identidad de skincare natural de la marca

La Solución

Diseñé un enfoque híbrido: Astro para el frontend con TinaCMS para edición visual de contenido, mientras mantengo WordPress + WooCommerce como backend headless para datos de productos y checkout.

Arquitectura Técnica

┌─────────────────┐     ┌──────────────┐     ┌─────────────────┐
│   Sitio Astro   │────▶│   TinaCMS    │────▶│  Build Estático │
│   (Frontend)    │     │  (Contenido) │     │    (Vercel)     │
└─────────────────┘     └──────────────┘     └─────────────────┘
        │
        ▼
┌─────────────────┐
│   WordPress     │
│   WooCommerce   │
│   (Productos)   │
└─────────────────┘

Características Implementadas

Soporte Bilingüe (ES/EN)

• Implementación completa de i18n con español como idioma predeterminado
• Rutas en inglés en /en/* con traducción completa
• Colecciones de contenido separadas por idioma (26+ posts de blog cada una)
• Elementos de UI, fechas, formato de moneda y navegación localizados
• Meta tags SEO por idioma

Gestión Visual de Contenido con TinaCMS

• Edición con preview en tiempo real en vista dividida
• Secciones editables con indicadores visuales:
  • Slider hero de página principal (4 productos configurables)
  • Sección Best Sellers con integración WooCommerce
  • Página Sobre Nosotros con galería del equipo
  • Catálogo de servicios de tratamientos
  • Posts de blog con edición rich-text

Integración E-commerce

• Catálogo de productos obtenido de WooCommerce REST API en tiempo real
• Carrito drawer del lado del cliente con persistencia en localStorage
• Transferencia de carrito multi-producto al checkout de WooCommerce
• Autenticación SSO entre Astro y WordPress (tokens firmados HMAC-SHA256)
• Estado de stock y precios sincronizados automáticamente
• Mecanismo de fallback si la API no está disponible

Componentes Interactivos

• Carrito drawer (380px sidebar en desktop, ancho completo en móvil)
• Slider hero con productos configurables
• Carrusel de Google Reviews
• Integración de feed de Instagram dinámico
• Botón flotante de WhatsApp
• Smooth scrolling con Lenis

Optimizaciones de Rendimiento

• Generación de sitio estático con hidratación parcial de Astro
• Componentes React solo se hidratan cuando es necesario (client:load, client:visible)
• Imágenes optimizadas y servidas via CDN edge de Vercel
• Scores de Lighthouse consistentemente 95+

Resultados

La migración entregó mejoras significativas:

• Tiempo de Carga: De 4.2s a menos de 1s (LCP)
• Score Lighthouse: De 62 a 98 (Performance)
• Actualizaciones de Contenido: De dependiente del desarrollador a autoservicio visual
• Costos de Hosting: Reducidos en 60% al migrar a Vercel

El equipo de marketing del cliente ahora puede actualizar posts de blog, descripciones de tratamientos, showcases de productos y contenido de páginas sin asistencia técnica, mientras el sitio carga casi instantáneamente para los visitantes.

Highlights Técnicos

Edición Visual con TinaCMS

Wrappers React personalizados habilitan preview en tiempo real con el hook useTina():

// Ejemplo de wrapper de edición visual
export default function BestSellersWrapper({ query, variables, data, products }) {
  const { data: tinaData } = useTina({ query, variables, data });
  return (
    <section data-tina-field={tinaField(bestSellers, 'title')}>
      {/* Contenido editable con indicadores visuales */}
    </section>
  );
}

Integración API WooCommerce

Datos de productos en tiempo real con fallbacks elegantes:

// Obtener productos más vendidos
const products = await getBestSellers(3);

// Obtener productos específicos por ID
const products = await getProductsByIds([7183, 7176, 7868]);

// Formatear precio en formato chileno
formatPrice(21990); // "$21.990"

Sistema de Transferencia de Carrito

Plugin WordPress personalizado maneja la transferencia de carrito multi-producto con SSO:

• Tokens firmados (válidos 5 minutos) con secreto compartido
• Creación automática de sesión de usuario en WordPress
• Experiencia de checkout seamless

Stack Técnico

Este proyecto demuestra cómo un sitio WordPress tradicional puede modernizarse con una arquitectura headless, combinando lo mejor del rendimiento de sitios estáticos con la flexibilidad de un CMS visual y la robustez de WooCommerce para e-commerce.