Page Comparison

...

id: the exact product variant id that will be added to the cart, note this needs to match the id passed to prz_addToCartId as above
quantity: the quantity that is being passed, i.e. 1

Code Block

language	js

setTimeoutconst przAddToCartEventInterval = setInterval(() => {

  const przWidget = document.getElementsByClassName('preezie-widget-app')[0]
  if if(przWidget) {
    clearInterval(przAddToCartEventInterval)
    przWidget.addEventListener('przAddToCartEvent', (event) => {
      // !!!!!!!!!!!!IMPORTANT!!!!!!!!!
      // event: { detail: { id: '125173761', quantity: 1 } }

 
      // Please addimplement your own custom "logic to handle the 'add to cart"' eventsevent here

    })
   }          

}, 2000);

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

As an example, here’s a custom example of a Shopify add to cart script (note, you’d 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>
        setTimeout
  const przAddToCartEventInterval = setInterval(() => {
             const przWidget = document.getElementsByClassName('preezie-widget-app')[0]
             if (przWidget) {
                 clearInterval(przAddToCartEventInterval)
      przWidget.addEventListener('przAddToCartEvent', (event) => {
                console.log(event.detail);
                fetch("https://changeme.myshopify.com
        //!!!!!!!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://jurlique.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>

Turn on and style your buttons

...

Versions Compared

Old Version 27

New Version 28

Key

Turn on and style your buttons