> For the complete documentation index, see [llms.txt](https://the-wishlist-documentation.gitbook.io/the-wishlist-documentation-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-wishlist-documentation.gitbook.io/the-wishlist-documentation-docs/developer-reference/minicart-and-counter-events.md).

# Minicart and Counter Events

## Triggering the mini cart

Because not all mini-cart implementations are the same, it is not possible to provide a single solution that is guaranteed to work across all themes. Please use this article as a guide.

The TWC Shopify app exposes an event which is triggered when the “add to cart” operation is performed on the wishlist page. This can be used, with the help of a developer to trigger the mini-cart.

Example:

```
<script> 
document.addEventListener("DOMContentLoaded", () => { const wishlistBodyNode = document.querySelector("body"); wishlistBodyNode.addEventListener("wishlistAddToCartEvent", (e) => { // TODO Trigger mini cart code... }); }); 
</script> 
```

## Customise or disable successful add-to-cart pop-up when using mini cart on Wishlist page

### To disable

**Option 1 add custom CSS**

```
body > .toast.osc-css { 
display: none !important; 
} 
```

**Note: generic for all themes**

### To customize

This is structure HTML of popup.

```
<div class="toast osc-css showRight" style="top: 0px; right: 0px;"> 
<div class="toast\_\_tle-container w -fc" style="background-color: rgb(47, 180, 86);">       
<div class="d-flex jc-c ai-c w-200"> 
<p class="content\_\_tle" style="color: white;">Add product to cart successful</p>       </div> 
</div> 
</div> 
```

You can add custom CSS for popup:

Example:

```
/\* Set background \*/ 
.osc-css.toast .toast\_\_title-container { 
background: red !important; 
} 

/\* Set text color \*/ 
.osc-css.toast .toast\_\_tle- container .content\_\_tle { 
color: black !important;
} 
```

![Aspose.Words.a55c087c-5057-4f82-a392-4d6a497f574c.001.jpeg](https://1023154625-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEV6QdRqi2KZA4N8PHPAZ%2Fuploads%2Fgit-blob-8348a428292f0ea08532fadc8c02b4b18ef82bd1%2FAspose.Words.a55c087c-5057-4f82-a392-4d6a497f574c.001.jpeg?alt=media)

## To update the Wishlist items count on the header launchpoint (Wishlist header count)

We have published the function countItemWishlist().

Please add event listener "initTheWishlist" to get the item count and update to wishlist Header Count.

Example:

```
document.body.addEventListener("initTheWishlist", () => { 
  const countItem = theWishlist.countItemWishlist(); 

1. console.log(countItem); 
2. }); 


```