Add to cart custom app

VTEX in your native language 🌎 Español
1

estoy haciendo un custom que simula el add to cart pero no logro que se actualice el minicart con el hook de addItems de vtex order items sin tener que cambiar de vista, al momento de ejecutar aparece en el orferform mi nuevo producto con su nuevo seller pero no se actualiza en el minicart hasta que navego en otra sección, esto lo hacemos para enviar un seller en especifico de acuerdo a una tienda elegida por el usuario, he intentado mandar un evento pero tampoco me funciona les dejo mi codigo completo de la custom :frowning:

import React,{useMemo}from 'react';
import { OrderFormProvider } from 'vtex.order-manager/OrderForm'
import { OrderItemsProvider, useOrderItems } from 'vtex.order-items/OrderItems'
import { useProduct } from 'vtex.product-context'
import { usePixel } from 'vtex.pixel-manager'
import { mapCatalogItemToCart } from 'vtex.add-to-cart-button'
import {  ToastProvider, ToastConsumer } from 'vtex.styleguide'

const AddToCartCustom = () => (
  <OrderFormProvider>
    <OrderItemsProvider>
      <MyComponent />
    </OrderItemsProvider>
  </OrderFormProvider>
)

const MyComponent = (props) => {
//   const { orderForm: { items } } = useOrderForm()
  const { addItems } = useOrderItems()
  const productContext = useProduct()
  const { push } = usePixel()
  const product = productContext?.product
  const items = productContext?.product?.items
  // console.log(items, 'items', product, 'product')
  const selectedItem = productContext?.selectedItem
  const assemblyOptions = productContext?.assemblyOptions
  const seller = {
    ...productContext?.selectedItem?.sellers[0],
    sellerId: 'misellerId',
    sellerName:'nombre de seller'
  }
  const selectedQuantity = productContext?.selectedQuantity;



  const eventAddToCart = product => {
    console.log(product)
    dataLayer.push({
      event: 'addToCart',
      ecommerce: {
        detail: {
          products: [
            {
              product: product,
            },
          ],
        },
      },
    })

    const pixelEventItems = [product];
    const pixelEvent =
       {
            id: 'add-to-cart-button',
            event: 'addToCart',
            items: pixelEventItems,
          }

  
    push(pixelEvent)

  }
  const skuItems = useMemo(
    () =>
    props.skuItems ??
      mapCatalogItemToCart({
        product,
        selectedItem,
        selectedQuantity,
        selectedSeller: seller,
        assemblyOptions,
      }),
    [
      assemblyOptions,
      product,
      props.skuItems,
      selectedItem,
      selectedQuantity,
      seller,
    ]
  )
  
 const handleClick = async (e, toast)=>{
    // e.preventDefault()
    // e.stopPropagation()
    console.log('agregar producto',addItems);

   
    await addItems(skuItems)
   await eventAddToCart(skuItems)

    setTimeout(() => {
        toast('Item agregado al carrito.')
      }, 1600)
 }

  return(
    <ToastProvider positioning="window">
      <div className="w-100 vtex-div-quantify" style={{ textAlign: 'center' }}>
        <ToastConsumer>
          {({ showToast }) => (
             <p className="vtex-add-to-cart" onClick={event=>handleClick(event,showToast)}>agregar custom add to cart</p>
          )}
        </ToastConsumer>
      </div>
    </ToastProvider>
   
  )
  
}

export default AddToCartCustom;
2

El pixelEvent a mí me funciona bien solo para hacer que se vea el minicart. Para agregar productos, uso la app order items:

import { usePixel } from "vtex.pixel-manager";
import { useOrderItems } from "vtex.order-items/OrderItems";

const MyComponent = ({products}) => {
const { addItems } = useOrderItems();
  const { push } = usePixel();

const handlePurchase = async () => {
    const refactoredProducts = products.map((skuId) => {
      return {
        id: skuId,
        quantity: 1,
        seller: "1",
      };
    });
    await addItems(refactoredProducts);
    push({
      id: "add-to-cart-button",
      event: "addToCart",
    });
  };

A la app de pixelEvent solamente pasale el ID del pixel event, no los productos. Y creo que también es importante hacer a la funcion async y ponerle await al addItems porque si n te muestra el minicart antes de haberse cargado correctamente.

1 Like