Saltar al contenido principal

Arquitectura General de la Integración con Magento

Estructura principal​

La integración con Magento se basa en una arquitectura de contextos React que proporcionan acceso a los datos y funcionalidades de Magento a través de toda la aplicación. Los principales componentes de esta arquitectura son:

Contextos​

  • MagentoContext: Almacena información básica como cartId y sessionId.
  • MagentoOrderContext: Gestiona todas las operaciones relacionadas con el carrito y pedidos.
  • MagentoPlacedOrderContext: Gestiona la información de pedidos ya realizados.

Componentes contenedores​

  • MagentoProvider: Envuelve la aplicación y proporciona el contexto básico de Magento.
  • MagentoOrderContainer: Implementa la lógica del carrito y operaciones de pedido.
  • MagentoPlacedOrderContainer: Gestiona la información de pedidos completados.

Hooks personalizados​

  • useMagento: Accede al contexto básico de Magento.
  • useMagentoOrderContainer: Accede a todas las funcionalidades del carrito y proceso de compra.
  • useMagentoPlacedOrderContainer: Accede a la información de pedidos completados.

Servicios​

  • MagentoService.js: Servicio principal que implementa la comunicación con la API GraphQL de Magento.
  • magento-service-provider.ts: Implementa operaciones específicas para diferentes entidades (carrito, usuario, etc.).

Flujo de comunicación​

  1. Los componentes de React utilizan los hooks personalizados para acceder a las funcionalidades de Magento.
  2. Los hooks devuelven el contexto apropiado con sus funciones y datos.
  3. Las funciones del contexto invocan a los servicios de Magento.
  4. Los servicios realizan peticiones GraphQL a la API de Magento.
  5. Los resultados se procesan y se actualizan los estados en los contextos.

Diagrama de arquitectura​


┌─────────────────┐         ┌────────────────────┐         ┌────────────────┐
│  Componentes    │ ───────▶│       Hooks        │ ───────▶│   Contextos    │
│     React       │         │   personalizados   │         │                │
└─────────────────┘         └────────────────────┘         └───────┬────────┘
│
▼
┌─────────────────┐         ┌────────────────────┐         ┌────────────────┐
│ API de Magento  │ ◀─────── │     Servicios      │ ◀─────── │   Funciones   │
│    (GraphQL)    │         │                    │         │  del contexto  │
└─────────────────┘         └────────────────────┘         └────────────────┘

Método principal de comunicación​

El método principal para realizar peticiones GraphQL a Magento es requestMagento en MagentoService.js:

requestMagento = ({ query, variables, signal = undefined }) => {
const useGraphqlProxy = process.env.NEXT_PUBLIC_USE_MAGENTO_GRAPHQL_PROXY !== 'false';
let url = useGraphqlProxy ? '/api/magento/graphql' : '/graphql';

    if(typeof window === "undefined"){
        //only https urls are allowed so process.env.VERCEL_URL wont work for localhost:3000
        const urlPrefix = process.env.MAGENTO_PROXY_URL;
        url = `${urlPrefix}/graphql`
    }

    const client = new GraphQLClient(url, {signal});
    return client.request(query, variables);
}

Este método es utilizado por todos los servicios específicos para comunicarse con Magento.