Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagejs
const przAddToCartEventInterval = setInterval(() => {
  const przWidget = document.getElementsByClassName('preezie-widget-app')[0]
  if (przWidget) {
    clearInterval(przAddToCartEventInterval)
    przWidget.addEventListener('przAddToCartEvent', (event) => {
      // !!!!!!!!!!!!IMPORTANT!!!!!!!!!!!!
      // event: { detail: { id: '125173761', quantity: 1 } }
      // Please implement your own custom logic to handle the 'add to cart' event here
    })
  }
}, 2000)

Hence each time the add to cart button is clicked przAddToCartEvent is fired and subsequently the actions within your customised script above.

Note

Example Below
As an example, here’s a custom example of a Shopify add to cart script

...

.
Updates are needed, please read the code comments below for instructions on updates.
(Note, you need to update the fetch

...

URL to your own,
and you need to implement the logic to update the cart UI on your site)

...

Code Block
<script>
  const przAddToCartEventInterval = setInterval(() => {
    const przWidget = document.getElementsByClassName('preezie-widget-app')[0]
    if (przWidget) {
      clearInterval(przAddToCartEventInterval)
      przWidget.addEventListener('przAddToCartEvent', (event) => {
        //!!!!!!!Important!!!!!!!
        // Please note that this is an example only.
        // You will need to implement your own custom logic to handle the 'add to cart' event on your site.
        fetch('https://jurliquechangeme.myshopify.com.au/cart/add.js', {
          method: 'POST',
          mode: 'cors',
          cache: 'no-cache',
          credentials: 'same-origin',
          headers: {
            'Content-Type': 'application/json'
          },
          redirect: 'follow',
          referrerPolicy: 'no-referrer',
          body: JSON.stringify({ items: event.detail })
        }).then((response) => {
          // Put your cart UI code here
        })
      })
    }
  }, 2000)
</script>

...