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)
Video Guide
Cart Page Offer
Cart Offer Modal
Configuration
Locate
-
Locate the cart row:
-
Go to your Cart Page with an item already in your cart. Locate the item title.
-
Right click and then click inspect on the right click menu
-
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
-
Locate the class name, this will be an attribute name after the statement
class=
-
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
-
-
Locate the cart item title:
-
Go to your Cart Page with an item already in your cart. Locate the item title.
-
Right click and then click inspect on the right click menu
-
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 -
Locate the class name, this will be an attribute name after the statement
class=
-
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
-
-
Locate the cart item quantity:
-
Go to your Cart Page with an item already in your cart. Locate the item title.
-
Right click and then click inspect on the right click menu
-
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. -
Locate the class name, this will be an attribute name after the statement
class=
-
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
- Under Snippets click Add a new snippet.
- 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
- We now have to configure the code in
extend-cart-integration.liquid
(line(s) 12-14) in order to ensure the offers appear:- 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 - 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 - 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
- Replace the
//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
- 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
- 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. - 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
- Click the Cart Page Offer button to verify the Modal Offer
- Modal Offer
- Add an Extend Protection Plan throuhg the Modal Offer
- 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
Updated 10 months ago