Setting Up the Extend Cart Offers

Overview

This article covers inserting the logic and layout code for the Extend cart offers component

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

Import & Invoke initializeCartOffers Function

  1. Open the file /assets/js/theme/cart.js and copy the snippet below and paste it at the top of the file, right under all the other import statements:
// Extend - Import initializeCartOffers()
import { initializeCartOffers } from './extend.js';
// Extend - End Code

  1. In the same file, find the onReady() function inside the Cart class add the snippet below to invoke the function:
// Extend - Initialize cart offers when cart is initialy loaded
initializeCartOffers();
// Extend - End Code


Handle Cart Change

When the cart changes, we will need to invoke our initializeCartOffers() to ensure Extend renders correctly within the cart again.

  1. In the same file, scroll down and find the utils.api.cart.getContent() function. Copy the snippet below to invoke the function every time the cart updates:
// Extend - Initialize Cart Offers after the cart update 
initializeCartOffers();
// Extend - End Extend Code 


Style warranties in cart

Now that we can add warranties to the cart, we need to ensure they're styling correctly following the instructions below.

  1. Open the file /templates/components/cart/content.html
  2. Copy the snippet below:
    <!-- Extend - Add Extend Logo for Warranties -->
    {{else if type '==' 'Custom'}}
    <img
         class="cart-item-fixed-image"
         data-sizes="auto"
         src="{{cdn 'img/extend_logo.png'}}"
         data-src="{{cdn ../theme_settings.default_image_extend}}"
         alt="Extend Protection Plan"
         title="Extend Protection Plan"
         />
    <!-- Extend - End Extend Code -->
    
  3. Find the code {{#if type '==' 'GiftCertificate'}} and paste the snippet after the <img> element, but before the closing {{else}} statement:

  1. In the same file, find the block that starts with {{#if brand.name}}. Locate the <h2> element containing the <a> tag and delete the whole of the <h2> and all it's contents.
  2. Then copy and paste in the snippet below, which will replace the <h2> and <a> we previously removed:
<!-- Extend - Remove links for warranties -->
{{#if type '==' 'Custom'}}
<h4 class="cart-item-name"><p>{{name}}</p></h4>
{{else}}
<h2 class="cart-item-name">
  <a class="cart-item-name__label" href="{{url}}">{{name}}</a>
</h2>
{{/if}}
<!-- Extend - End Extend Code -->

The resulting code changes should look similar to the screenshot below:

  1. In the same file, find the block that starts with {{#if options}} and paste the snippet below:
<!-- Extend - Render item info -->
{{#if type '==' 'Custom'}}
<div id="extend-plan-item" data-extend-itemid={{id}}></div>
{{/if}}
<!-- Extend - End Extend Code -->

<!-- Extend - Adds Cart Offer -->
<div
     id="extend-cart-offer"
     data-extend-item-id="{{id}}"
     data-extend-sku="{{sku}}"
     data-extend-quantity="{{quantity}}"
     ></div>
<!-- Extend - End Extend Code -->

Similarly, these code changes should result


Verify

You should now see Extend Warranties you add to the cart appear neatly formatted and contain information regarding the product they're covering along with not being clickable. The Extend warranty quantities should also always match the product they're covering quantity. If you increment the product by 1, the Extend warranty should also increment by 1 automatically.

Way to go! If you see the Extend Warranty includes an Icon and information about the product it's covering and is NOT clickable, you're ready for the next step if you have a drop down cart: Styling Drop down cart

If you do not have a drop down cart, skip to this step: Setting up Extend Analytics & After market support

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