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
-
Locate the add to cart button class name:
-
Go to your Product Display Page and locate the add to cart button
-
Right click then click inspect on the right click menu
-
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 -
Locate the class name, this will be an attribute name after the statement
class=
-
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
-
-
Locate the product form class name:
-
Go to your Product Display Page and locate the add to cart button
-
Right click then click inspect on the right-click menu
-
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 -
Locate the class name, this will be an attribute name after the statement
class=
-
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
- Under Snippets, click Add a new snippet.
- 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
- Once you have located the placement of the offer you can configure the following code within the
extend-product-integration.liquid
(lines 12-13):- Replace the
productFormSelector
stringADD 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 - 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
- Replace the
// 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
- Click Save
Verify
- Open the preview of the theme you are working on:
Helpful Tips: Right click the Preview Theme button and click Open in new Tab
- 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. - Confirm the Product Page offer is displayed:
- 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
Updated 11 months ago