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 con facilidad y conservar intacta su funcionalidad de e-commerce.

Los objetivos principales fueron:

• Mejorar dramáticamente la velocidad de carga y los Core Web Vitals
• Proporcionar una experiencia de edición visual de contenido para el equipo de marketing
• Mantener WooCommerce para la gestión de productos y el checkout
• Soporte de contenido 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, manteniendo WordPress + WooCommerce como backend headless para datos de productos y checkout.

┌─────────────────┐   ┌──────────────┐   ┌─────────────────┐
│  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, navegación y meta tags SEO localizados por idioma.

Gestión Visual de Contenido con TinaCMS — Edición con preview en tiempo real en vista dividida, con secciones editables e indicadores visuales: slider hero de la 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, y posts de blog con edición rich-text.

Integración E-commerce — Catálogo de productos obtenido de la 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, con un mecanismo de fallback si la API no está disponible.

Componentes Interactivos — Carrito drawer (sidebar de 380px en desktop, ancho completo en móvil), slider hero con productos configurables, carrusel de Google Reviews, feed de Instagram dinámico, botón flotante de WhatsApp, y smooth scrolling con Lenis.

Optimizaciones de Rendimiento — Generación de sitio estático con hidratación parcial de Astro, componentes React que solo se hidratan cuando es necesario (client:load, client:visible), imágenes optimizadas y servidas vía el CDN edge de Vercel, y scores de Lighthouse consistentemente 95+.

Resultados

La migración entregó mejoras significativas:

• Tiempo de carga: De 4.2s a menos de 1s (LCP)
• Score de Lighthouse: De 62 a 98 (Performance)
• Actualizaciones de contenido: De dependientes 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 ninguna asistencia técnica, mientras el sitio carga casi instantáneamente para los visitantes.

Highlights Técnicos

Edición Visual con TinaCMS — Wrappers de 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 (getBestSellers(), getProductsByIds(), formato de precio chileno).

// 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 — Un plugin de WordPress personalizado maneja la transferencia de carrito multi-producto con SSO: tokens firmados (válidos 5 minutos) con un secreto compartido, creación automática de sesión de usuario en WordPress, y una experiencia de checkout seamless.

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 el e-commerce.