Integrating the Cart page

Learn how to setup the Extend cart page offer!

Overview

This articles covers inserting the Extend cart page offer and the logic to render the cart page and modal offers.

Note: This section should cover the base cart page in Shopify - accessible by navigating to the /cart page of your site. For alternative carts please reach out to our team through your Merchant Portal

Est. Time of Completion: 1:30 hour(s)

Cart Page Offer

Cart Offer Modal

Configuration

Locate

  1. Locate the cart row:

    1. Go to your Cart Page with an item already in your cart. Locate the item title.

    2. Right click and then click inspect on the right click menu

    3. On the elements tab hover over the elements until you see the entire row highlighted. This includes the sole products title, quantity, and image
      Note: When you over elements on the tab you should see them being highlighted on the page

    4. Locate the class name, this will be an attribute name after the statement class=

    5. Copy the class name and paste it somewhere for later use
      Note: You can double click the class name and the editor should auto highlight it to be ready to be copied

  2. Locate the cart item title:

    1. Go to your Cart Page with an item already in your cart. Locate the item title.

    2. Right click and then click inspect on the right click menu

    3. On the elements tab hover the elements you see until you see the sole cart item title highlighted.
      Note: When you over elements on the tab you should see them being highlighted on the page

    4. Locate the class name, this will be an attribute name after the statement class=

    5. Copy the class name and paste it somewhere for later use
      Note: You can double click the class name and the editor should auto highlight it to be ready to be copied

  3. Locate the cart item quantity:

    1. Go to your Cart Page with an item already in your cart. Locate the item title.

    2. Right click and then click inspect on the right click menu

    3. On the elements tab hover the elements you see until you see the cart item quantity highlighted.
      Note: When you over elements on the tab you should see them being highlighted on the page. Usually this is within a <input> tag.

    4. Locate the class name, this will be an attribute name after the statement class=

    5. Copy the class name and paste it somewhere for later use
      Note: You can double click the class name and the editor should auto highlight it to be ready to be copied

Create

  1. Under Snippets click Add a new snippet.

  1. Add the following file and insert the respective code:

extend-cart-integration

<script>
    //run scripts on DOMContentLoaded to avoid affecting site load time
    window.addEventListener('DOMContentLoaded', function(){
   
     //Only run ajax integration if Extend and ExtendShopify is defined, and the currency is set to USD
     if (window.Extend && window.ExtendShopify && window.Shopify.currency.active === 'USD') {
   
      /*****************************************/
      /* Global Variables - THEME SPECIFIC */
      /*****************************************/
   
      let cartRowItem = '[ADD SELECTOR HERE]'; // This is the container element for each item in the cart
      let cartRowItemTitle = '[ADD SELECTOR HERE]'; // This is the title anchor element for the product
      let cartRowItemQuantity = '[ADD SELECTOR HERE]'; // This is the input element containing the product quantity
      
      /***************************************/
      /* Global Variables - No Change Needed */
      /***************************************/
      let offerClass = 'extend-cart-offer'; // This is the class that will be assigned to each Extend offer
      let localCart = {{ cart | json }}; // Shopify Cart Object on initial load
   
      // Fail safe for cart
      if(!localCart) return;
   
      /***********************/
      /* util functions */
      /***********************/
      // findAll(element) - querySelectorAll to search for children in document OR a parentElement
      function findAll(elementToFind, parentElement) {
       const items = parentElement ? parentElement.querySelectorAll(elementToFind) : document.querySelectorAll(elementToFind);
       return items;
      }
   
      /**************************************/
      /* refreshCart - THEME SPECIFIC */
      /**************************************/
      // Refresh the cart (hard refresh by default)
      function refreshCart() {
       location.href = location.hash ? location.href.substring(0, location.href.indexOf('#')) : location.href;
      }
   
      /***********************/
      /* createElement */
      /***********************/
      // createElement(product) - Takes in the product element, and creates the Extend offer element + appends the offer
      function createElement(product, index){
   
       // Removes existing offer elements before creating new ones
       let extendOffer = product.querySelector('.' + offerClass);
       if (extendOffer) extendOffer.remove();
   
       // Grab the variantId
       let variantId = localCart.items[index].id;
   
       // Select quantity value
       let quantity = product.querySelector(cartRowItemQuantity).value;
   
       // Parent container to append ajax offer
       let container = product.querySelector(cartRowItemTitle);
   
       // Fail safes
       if(!variantId || !quantity || !container) return;
   
       // Create new element & set class, data-extend-variant, and data-extend-quantity attributes
       let newExtendOffer = document.createElement('div');
       newExtendOffer.className = offerClass;
       newExtendOffer.setAttribute('data-extend-variant', variantId);
       newExtendOffer.setAttribute('data-extend-quantity', quantity);
   
       // Append the offer to the container element (THEME SPECIFIC)
       container.append(newExtendOffer);
   
      }
   
      /************************/
      /* Handle Styling */
      /************************/
      // Finds all cartRowItems and styles only Extend warranties
      function handleStyling() {
   
       findAll(cartRowItem).forEach(function(el, index) {
   
        // Grab the title of the current item
        let title = el.querySelector(cartRowItemTitle);
   
        // Title fail safe
        if(!title) return;
   
        // If it's a warranty set isExtend to true and remove links
        if (title.innerText.toLowerCase().indexOf('extend protection') > -1) {
   
         // Select and remove pointerEvents from warranty title
         title.style.pointerEvents = 'none';
   
        } else {
         // Create an offer element for each product
         createElement(el, index);
        }
   
       });
   
      }
   
      /************************/
      /* initializeCartOffer */
      /************************/
      // Invokes handleStyling and finds all offers in the cart, handling both normalization and balancing
      function initializeCartOffer() {
   
       // Handles styling and creates offer elements
       handleStyling();
   
       // Find all offer elements
       findAll('.' + offerClass).forEach(function(el){
   
        // Grab attributes out of element
        let variantId = el.getAttribute('data-extend-variant');
        let quantity = el.getAttribute('data-extend-quantity');
   
        // If there's already a warranty in cart, return
        if(ExtendShopify.warrantyAlreadyInCart(variantId, localCart.items)){
         return;
        }
   
        // Render all other buttons
        Extend.buttons.renderSimpleOffer(el, {
         referenceId: variantId,
         onAddToCart: function (options) {
          ExtendShopify.addPlanToCart(
           {
            plan: options.plan,
            product: options.product,
            quantity: quantity,
           },
           function (err) {
            // An error occurred
            if (err) {
             return;
            } else {
             refreshCart();
            }
           }
          );
         },
        });
       })
   
       // Normalization ensures there is a 1:1 relationship between the product and the warranty
       ExtendShopify.normalizeCart({cart: localCart, balance: true}, function (err, data) {
        if (data && data.updates) {
         // Calls refreshCart to update the cart for normalization 
         refreshCart();
        }
       });
      }
   
      // initializeCartOffer when script is initially rendered
      initializeCartOffer();
   
     }
    });
   
   </script>
   
   <style>
    #extend-offers-modal-iframe {
     z-index: 99999999999!important;
    }
   
    #extend-learn-more-modal-iframe {
     z-index: 99999999999!important;
    }
   
   </style>

Configure

  1. We now have to configure the code in extend-cart-integration.liquid (line(s) 12-14) in order to ensure the offers appear:
    1. Replace the cartRowItem string [ADD SELECTOR HERE] with the cart row class acquired above.
      Note: The class names must use css selectors. Be sure to convert the class you've acquired to the proper syntax. If you have trouble read through our helpful tips here
    2. Replace the cartRowItemTitle string [ADD SELECTOR HERE] with the cart item title class acquired above.
      Note: The class names must use css selectors. Be sure to convert the class you've acquired to the proper syntax. If you have trouble read through our helpful tips here
    3. Replace the cartRowItemQuantity string [ADD SELECTOR HERE] with the cart item quantity class acquired above.
      Note: The class names must use css selectors. Be sure to convert the class you've acquired to the proper syntax. If you have trouble read through our helpful tips here
//line 12-14
let cartRowItem = '[ADD SELECTOR HERE]'; // This is the container element for each item in the cart
let cartRowItemTitle = '[ADD SELECTOR HERE]'; // This is the title anchor element for the product
let cartRowItemQuantity = '[ADD SELECTOR HERE]'; // This is the input element containing the product quantity
  1. Click Save

Verify

  1. Open the preview of the theme you are working on:
    Helpful Tips: Right click the Preview Theme button and click Open in new Tab
  2. Add a warrantable product to your cart.
    Note: If you are having a hard time finding a warrantable product please reach out to our team through your Merchant Portal.
  3. Within your cart page verify the Cart Page Offer
    Note: Cart Page Offer will only be seen if there is no corresponding Extend Protection Plan in the cart.
  • Cart Page Offer

  1. Click the Cart Page Offer button to verify the Modal Offer
  • Modal Offer

  1. Add an Extend Protection Plan throuhg the Modal Offer
  2. Modify the quantity of the Extend Protection Plan or the associated product to verify the cart gets modified automatically
  • Cart Normalization

If you run into any issues during this integration process or have questions please reach out to our team through your Merchant Portal.


Checklist