Carrito de Compras

El carrito de compras es una parte fundamental de la integración con Magento, permitiendo a los usuarios añadir, actualizar y eliminar productos, así como aplicar cupones y procesar el pedido.

Estructura de datos principal

El carrito se representa mediante el tipo Cart de GraphQL, que contiene:

• ID del carrito (id)
• Artículos del carrito (items)
• Dirección de envío (shipping_addresses)
• Método de pago seleccionado (selected_payment_method)
• Total y subtotal
• Descuentos aplicados

Componentes clave

MagentoOrderContext

Este contexto proporciona todas las funcionalidades relacionadas con el carrito:

export interface MagentoOrderConfig {
  cartId: string|null
  quote: Cart|null
  // Métodos del carrito
  addToCart: (sku: string, quantity: number, metadata?: CartItemMetadata) => Promise<Cart|null>
  removeFromCart: (id: number) => Promise<Cart|null>
  updateItemCart: (id: number, quantity: number, metadata?: CartItemMetadata) => Promise<Cart|null>
  refreshQuote: () => Promise<Cart|null>
  // ...otros métodos
}

CartItemMetadata

Metadatos adicionales para los artículos del carrito:

export interface CartItemMetadata {
  has_cashback: boolean
  additional_services: {code: string, cost: number|string}[]
  isArmed: boolean
}

Métodos principales

Gestión de artículos

// Añadir producto al carrito
addToCart: async (sku: string, quantity: number, metadata?: CartItemMetadata) => Promise<Cart|null>

// Actualizar cantidad de un artículo
updateItemCart: async (id: number, quantity: number, metadata?: CartItemMetadata) => Promise<Cart|null>

// Eliminar un artículo del carrito (usando quantity=0)
removeFromCart: async (id: number) => Promise<Cart|null>

Actualización del carrito

// Refrescar datos del carrito
refreshQuote: async () => Promise<Cart|null>

// Refrescar carrito y datos del cliente
refreshData: async () => Promise<{customer: Customer, cart: Cart}|null>

Implementación

Los métodos del carrito están implementados en magento-service-provider.ts y utilizados en magento-order-container.tsx:

export const addToCart = async (cartId: string, cartItems: [SimpleProductCartItemInput]): Promise<Cart|null>=> {
  const response = await request({
    query: QuoteAddToCartDocument,
    variables: {
      cartId,
      cartItems
    }
  }) as QuoteAddToCartMutation
  return response?.addSimpleProductsToCart?.cart as Cart|null
}

export const updateItemCart = async (cartId: string, cartItems: [CartItemUpdateInput]): Promise<Cart|null>=> {
  const response = await request({
    query: QuoteUpdateItemCartDocument,
    variables: {
      cartId,
      cartItems
    }
  }) as QuoteUpdateItemCartMutation
  return response?.updateCartItems?.cart as Cart|null
}

Flujo de uso del carrito

1. El usuario añade un producto al carrito mediante addToCart
2. El carrito se actualiza en el estado mediante setQuote
3. El usuario puede modificar cantidades con updateItemCart o eliminar productos con removeFromCart
4. Al avanzar al checkout, se aplican direcciones, métodos de envío y métodos de pago

Uso en componentes

Para usar la funcionalidad del carrito en componentes:

import useMagentoOrderContainer from "src/magento/hooks/use-magento-order-container";

const CartComponent = () => {
  const {
    quote,
    addToCart,
    updateItemCart,
    removeFromCart
  } = useMagentoOrderContainer();

  // Uso de la funcionalidad del carrito
  // ...
}

Integración con servicios adicionales

El carrito permite metadatos adicionales para cada artículo:

• has_cashback: Indica si el producto tiene cashback
• additional_services: Servicios adicionales asociados al producto
• isArmed: Indica si el producto requiere armado