Integrating the Product Page

Learn how to setup the Extend product page offer!

Overview

In this section, we will go over the following steps:

  • Product Display Offer & Interstitial Modal Offer Examples
  • Locate Add To Cart button and form elements
  • Adding snippet to extend-product-integration.liquid
Est. Time of Completion: 1:30 hour(s)

Video Guide

Product Display Page (PDP) Offer Example:

This offer will show right above the Add To Cart button, on any product that is mapped as "warrantable" by Extend.

Interstitial Modal Offer Example:

The modal will show when a customer clicks on the Add To Cart button without selecting a protection plan


Configuration

Locate

  1. Locate the add to cart button class name:

    1. Go to your Product Display Page and locate the add to cart button

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

    3. On the elements, tab hover over the elements until you locate the <button>
      Note: When you hover over the 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 else 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 product form class name:

    1. Go to your Product Display Page and locate the add to cart button

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

    3. On the elements, tab hover over the elements until you locate the <form>
      Note: When you hover over the 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 else 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.
  2. Add the following file and insert the respective code:

extend-product-integration

<script>

  // Run scripts on DOMContentLoaded to avoid affecting site load time
  window.addEventListener('DOMContentLoaded', function(){
  
   // Checks if Extend lives in the window and the active currency is USD before showing Extend offers
  if (window.Extend && window.ExtendShopify && window.Shopify.currency.active === "USD" && meta.page.pageType === "product") {
  
    /************************/
    /* Initial Variables */
    /************************/
    const productFormSelector = 'ADD SELECTOR HERE'; // Change this to the product form element
    const addToCartButtonSelector = 'ADD SELECTOR HERE'; // Change this to the Add-To-Cart element
    const productForm = document.querySelector(productFormSelector);
    const addToCartButton = productForm.querySelector(addToCartButtonSelector);
    const extendOffer = document.createElement('div');
    const productCategory = (meta && meta.product) ? meta.product.type : null;
    extendOffer.className = 'extend-offer';
    addToCartButton.parentElement.insertBefore(extendOffer, addToCartButton);
  
    /************************/
    /* QA Cypress Variables */
    /************************/
    window.Extend.integration.productForm = productForm;
    window.Extend.integration.addToCartButton = addToCartButton;
    window.Extend.integration.extendOffer = extendOffer;
  
    /************************/
    /* initProductOffer */
    /************************/
    // Initializes product offers and handles ATC button functionality for the main PDP ATC
    function initProductOffer() {
  
     // Fail safes
     if(!productForm || !addToCartButton || !extendOffer) return;
  
     // Check if product is an extend warranty, if so disable the atc
     function isExtend() {
      if(meta.product && meta.product.vendor === 'Extend'){
       addToCartButton.disabled = true;
      }
     }
  
     // Checks if product is an Extend warranty and if so disables 
     isExtend();
  
     let variantId;
     let productPrice = (meta && meta.product && meta.product.variants) ? parseInt(meta.product.variants.filter(variant => variant.id.toString() === variantId.toString())[0].price): null;
  
     // Listens for changes to the productForm and sets the activeProduct for extend via variantID
     productForm.addEventListener('change', function () {
      variantId = productForm.id.value
      if (variantId) {
       productPrice = (meta && meta.product && meta.product.variants) ? parseInt(meta.product.variants.filter(variant => variant.id.toString() === variantId.toString())[0].price): null;
       Extend.setActiveProduct(extendOffer, {referenceId: variantId, price: productPrice, category: productCategory});
       isExtend();
      }
     });
  
     // Grabs the variantId from the productForm and renders the initial offers for it
     variantId = productForm.id.value;
      
     Extend.buttons.render(extendOffer, {referenceId: variantId, price: productPrice, category: productCategory});
  
     //click simulation handling add to cart
     function handleAddToCart(e) {
      e.preventDefault();
      e.stopImmediatePropagation();
  
      const quantityEl = productForm.querySelector('[name="quantity"]');
      const quantity = quantityEl && quantityEl.value;
      ExtendShopify.handleAddToCart(extendOffer, {
       quantity: quantity,
       modal: true,
       done: function () {
        // Trigger Analytics
        if (window.Extend.integration.analytics) window.Extend.integration.productAnalytics(variantId, quantity);
        // remove default click listener
        addToCartButton.removeEventListener('click', handleAddToCart, true);
        //click atc button
        addToCartButton.click();
        // add default click listener back
        addToCartButton.addEventListener('click', handleAddToCart, true);
       },
      });
     }
  
     //run handleCaddtoCart when we click ATC, capturing event
     addToCartButton.addEventListener('click', handleAddToCart, true);
  
    }
  
    // Initial product offer render
    initProductOffer();
   }
  
  })
  
 </script>
  
 <style>
  
  .extend-offer {
   padding-bottom: 5px;
  }
  
 </style>

Configure

  1. Once you have located the placement of the offer you can configure the following code within the extend-product-integration.liquid (lines 12-13):
    1. Replace the productFormSelector string ADD SELECTOR HERE with the form class acquired above.
      Note: The class names must use css selectors. Be sure to convert the class you've acquired to the proper syntax, this includes replacing any spaces with . periods. If you have trouble read through our helpful tips here
    2. Replace the addToCartButtonSelector string [ADD SELECTOR HERE] with the add to cart button class acquired above.
      Note: The class names must use css selectors. Be sure to convert the class you've acquired to the proper syntax, this includes replacing any spaces with . periods. If you have trouble read through our helpful tips here
// lines 12-13
const productFormSelector = 'ADD SELECTOR HERE'; // Change this to the product form element
const addToCartButtonSelector = 'ADD SELECTOR HERE'; // Change this to the Add-To-Cart element
  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

  1. Navigate to a warrantable product on your site.
    Note: If you are having trouble locating a warrantable product please reach out to our team through your Merchant Portal.
  2. Confirm the Product Page offer is displayed:

  1. Confirm the Modal offer is displayed:

If both Offers are displayed, Congratulations! You are ready for the next step.

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


Checklist