Shopify AJAX cart setup (Optional)

Important: This section is only relevant if your site is using Asynchronous JavaScript and XML (AJAX). If you use a standard shopping cart page or product page, the code listed on the standard JavaScript Setup for Shopify is all you need.

Here are the events we'll be going over:

• AJAX Add to Cart
• AJAX Product Quick View
• AJAX Cart View 
• AJAX Update to Cart

Setting Up AJAX Cart Events

1. Copy the AJAX code below:
   

   /*** AJAX Add to Cart ***/
   window.addEventListener('DOMContentLoaded', function(_rsq){
       window.frames.document.getElementById('ADD_TO_CART_ID_HERE').addEventListener("click", function(_rsq){
           // update the getElementById param to the ID name of the add to cart button
           window.setTimeout(_check_cart, 2000);
       });
   });
   
   /*** AJAX Product Quickview ***/
   window.addEventListener('DOMContentLoaded', function(_rsq){
       window.frames.document.getElementById('QUICK_PRODUCT_VIEW_ID_HERE').addEventListener("click", function(_rsq){
           // update the getElementById param to the ID name of the add to cart button
           window._rsq.push(['_addItem', {'id': 'item_id' }]); // replace item_id with your dynamic item_id variable
           window._rsq.push(['_setAction', 'view']); 
           window._rsq.push(['_track']);
       });
   });
   
   /*** AJAX Cart View ***/
   window.addEventListener('DOMContentLoaded', function(_rsq){
    window.frames.document.getElementById('SHOW_CART_ID_HERE').addEventListener("click", function(_rsq){
    // update the getElementById param to the ID name of the show cart button or cart icon
    _rs_ajax.updateCart();
    });
   });
   
   /*** AJAX Update to Cart ***/
   window.addEventListener('DOMContentLoaded', function(_rsq){
       window.frames.document.getElementById('UPDATE_CART_ID_HERE').addEventListener("click", function(_rsq){
            // update the getElementById param to the ID name of the update to cart button
            window.setTimeout(_check_cart, 2000);
       });
   });
   
   /*** FUNCTION FOR AJAX TRACKING ***/
   var _rs_ajax = {};
   _rs_ajax.updateCart = function() { //This is required for ajax cart views
       var request = new XMLHttpRequest();
       request.open('GET', '/cart.js', true);
       request.onload = function() {
           if (request.status >= 200 && request.status < 400) { // Success!
               var cart = JSON.parse(request.responseText);
               for(var i=0; i<cart.items.length; i++) {
                   var cartItem = cart.items[i];
                   var price = cartItem.price / 100;
                   _rsq.push(['_addItem', { 'id':cartItem.id.toString(), 'name':cartItem.title.toString(),'price':price.toFixed(2).toString() }]);
               }
               _rsq.push(['_setAction', 'shopping_cart']); 
              _rsq.push(['_track']);
          }
       };
       request.onerror = function() {
          console.log("Shopify Cart JS Failed");
       };
       request.send();
   };
   
   function _check_cart() {
       var request = new XMLHttpRequest();
       request.open('GET', '/cart.js', true);
       request.onload = function() {
           if (request.status >= 200 && request.status < 400) { // Success!
               var cart = JSON.parse(request.responseText);
               for(var i=0; i<cart.items.length; i++){
                   var cartItem = cart.items[i];
                   var price = cartItem.price / 100;
                   _rsq.push(['_addItem', { 'id':cartItem.id.toString(), 'name':cartItem.title.toString(),'price':price.toFixed(2).toString() }]);
               }
               window._rsq.push(['_setAction', 'shopping_cart']); 
               window._rsq.push(['_track']);
           }
        };
        request.onerror = function() {
           console.log("error");
        };
        request.send(); 
   } 
   /*** END FUNCTION FOR AJAX TRACKING ***/
   
   

   
   
   
2. Paste the code into the resci-main.v1.liquid snippet above /*** ReSci Script ***/.
   Note: If you don't have a resci-main.v1.liquid snippet, please paste the code into to your theme.liquid file.
   
   
   
   
3. Look for the button ID by right-clicking the button and then clicking inspect.
   
   
   
   
4. Check the source and look for the ID.
   
   
   
   
5. Copy the ID and paste it into the ReSci code with the corresponding AJAX event.
   

   /*** AJAX Add to Cart ***/
   window.addEventListener('DOMContentLoaded', function(_rsq){
        window.frames.document.getElementById('add-to-cart').addEventListener("click", function(_rsq){
             // update the getElementById param to the ID name of the add to cart button
             window.setTimeout(_check_cart, 2000);
        });
   });