How can I open the cart after adding items?

[MatiasHS1]

Hi everyone!

I’m working on an App in which I’m adding some specified products to the cart. Everything works fine, but after I add those products I can only see the number of items in the cart icon, but is there a way to open the entire cart view? Or is there any trigger for that?

[alfredo1]

@MatiasHS1

All good?

I don’t know if I understand correctly, the idea is when adding the products to the cart, open a minicart with the added products or update an HTML element with the number of products added?

Another question. Is your store CMS or VTEX IO?

Hugs

[MatiasHS1]

Hey Alfredo,

Yes, I want to open the minicart when someone clicks this custom “Add To Cart” button that I made for this specific case. And I’m using VTEX IO.

But after exploring the VTEX Apps repo I found a way to achieve this.
Basically I used the push method from the usePixel hook, I did something like this:

import { useOrderItems } from 'vtex.order-items/OrderItems'
import { usePixel } from 'vtex.pixel-manager'
...
   const { addItems } = useOrderItems()
   const { push } = usePixel()

   const items = [
      {id: 1, quantity: 10, seller: 1},
      ... // and so on...
   ]
   ...
   // After some logic I do this to add to the cart
   addItems(items)   // this only adds the items to the cart but doesn't open the minicart in the store
   
   // and to automatically open the minicart window I use this
   push({
      id: 'add-to-cart-button',
      event: 'viewCart',
    })

I also found some examples that use only the push method to add the items like this:

push({
   id: 'add-to-cart-button',
   event: 'viewCart',
   items: items 
})

But at that didn’t work for me, maybe I used it in a wrong way, but I couldn’t find any documentation about this.

I hope this helps someone in the future.