Ritual Cosmético & Nucleofi Stack

Visión General del Sistema

El sistema Nucleofi es una arquitectura e-commerce moderna y desacoplada que conecta una aplicación frontend dinámica creada en React 19 (empaquetada con Vite 6 y alojada en Vercel) con Shopify en el backend mediante la Storefront API (GraphQL).

Esta solución elimina las dependencias de los Web Components pesados predeterminados de Shopify y da vida a un carrito de compras y catálogo totalmente independientes, logrando una velocidad de renderizado óptima y mejor indexación SEO.

Características de la Arquitectura

• Framework Moderno: React 19 y Vite 6 para un empaquetado ultra-rápido y HMR instantáneo en desarrollo.
• Routing por URL Real: Navegación impulsada por React Router v7 con URLs limpias sin hashtags.
• SEO Dinámico Técnico: Actualización síncrona en cliente del título de página y meta descripciones adaptadas al catálogo de Shopify.
• Carrito Independiente: Estructura local nativa en React que genera la sesión de pago al instante mediante mutaciones GraphQL.

Consulta de Productos en GraphQL

Para poblar el catálogo de productos de forma segura y veloz, realizamos peticiones directas pidiendo exclusivamente los datos de rendimiento necesarios, obligando la solicitud de la variante base para construir el checkout sin errores.

const query = `{
  products(first: 20) {
    edges {
      node {
        id
        handle        // Usado para la URL dinámica
        title
        description
        featuredImage { url }
        variants(first: 1) {
          edges {
            node {
              id      // ¡OBLIGATORIO! ID global de la variante
              price { amount currencyCode }
            }
          }
        }
      }
    }
  }
}`;

Flujo de Compra Dinámico

Cuando un cliente procede al checkout, en vez de delegar en scripts de Shopify pesados, se recopila el estado local del carrito y se realiza una mutación directa a la API. El usuario es redirigido inmediatamente a la página de pago autogenerada por Shopify en un servidor seguro de alta disponibilidad.

const mutation = `
  mutation {
    cartCreate(input: { lines: [${lines}] }) {
      cart { checkoutUrl }
      userErrors { message }
    }
  }
`;

// Redirección directa al checkout
window.location.href = data.data.cartCreate.cart.checkoutUrl;