How To Implement Product Bundle Snippets With Handlebars.js Cart

Themes that utilize Handlebars.js need to have an additional installation step completed in order for the dynamically loaded cart contents to also contain the bundle installation. In order to implement the product bundle snippets into your Handlebars.js templates, please follow the below instructions.

Step 1: Line item properties

Find the Handlebars.js template within your theme files that renders your cart line items. Underneath the title, or where existing line item properties are being rendered, add the following Handlebars.js syntax.

<span class="gs__cart-properties">
  {{#if properties._gs_bundle_contents}}
     <ul class="gs__bundle-contents">
       {{#each properties._gs_bundle_contents }}
         <li>{{ this }}</li>
       {{/each}}
     </ul>
   {{/if}}
</span>

Step 2: Changing Displayed Prices

Find the Handlebars.js variables that render your carts item prices, line prices, and total price. Replace them with the respective variables below. Variable names will vary depending on how your handlebars template is configured.

Item Price: {{{giftshipPrice}}}

Line Price: {{{giftshipLinePrice}}}

Subtotal Price: {{{giftshipTotalPrice}}}

For example:

{{{originalPrice}}} and {{{price}}} can be replaced with {{{giftshipPrice}}}
{{{originalLinePrice}}} and {{{linePrice}}} can be replaced with {{{giftshipLinePrice}}}
and{{{totalPrice}}} can be replaced with {{{giftshipTotalPrice}}}

Step 3: Locate where Handlebars.js is rendering the cart template

This will usually be in the snippets section of your theme.

Step 4: Add the following functions to the javascript file that is rendering the Handlebars.js template.

  /**
   * Checks if the cart item is a bundle item
   */
  var isBundleLineItem = function(cartItem) {

    if (!cartItem.properties._gs_bundle_prices) return false;
    if (cartItem.product_type == "GIST_HIDDEN_PRODUCT") return false;

    return true;
    
  }

  var getAdditionalCost = function(cartItem, isBundle) {

    let additionalCost = 0;
    
    if (isBundle === false) {
      return additionalCost;
    }

    cartItem.properties._gs_bundle_prices.forEach((price) => {
      additionalCost += Number(price);
    });
    
    return additionalCost;
    
  }

  var getDiscountAmount = function(cartItem, isBundle) {

    let discountAmount = 0;
    
    if (isBundle === false) {
      return discountAmount;
    }

    if (!cartItem.properties._gs_bundle_discount) {
      return discountAmount;
    }

    return cartItem.properties._gs_bundle_discount
    
  }
  
  /**
   * Calculate the bundle price 
   */
  var getGiftshipLinePrice = function(cartItem) {

    const isBundle       = isBundleLineItem(cartItem);
    const itemPrice      = cartItem.price;
    const additionalCost = getAdditionalCost(cartItem, isBundle);
    const discountAmount = getDiscountAmount(cartItem, isBundle);

    return (itemPrice + additionalCost - discountAmount) * cartItem.quantity;
     
  }

Step 5: Add Giftship Logic to the build cart function

Various lines of logic need to be added for everything to function properly. Locate the loop that iterates through the items in the cart, this will be either a for() loop or an each() loop.

Before the start of the items loop paste the following line:

// Giftship subtotal
    var giftshipTotalPrice = 0

Immediately after the start of the loop paste the following line:

var giftshipLinePrice = getGiftshipLinePrice(cartItem);

Locate the item object and paste the following line in:

giftshipLinePrice: Shopify.formatMoney(giftshipLinePrice, settings.moneyFormat),

It should end up looking similar to the following.

item = {
  key: cartItem.key,
  line: index + 1,
  url: cartItem.url,
  img: prodImg,
  name: cartItem.product_title,
  properties: cartItem.properties,
  itemQty: cartItem.quantity,
  price: Shopify.formatMoney(cartItem.price, settings.moneyFormat),
  originalPrice: Shopify.formatMoney(cartItem.original_price, settings.moneyFormat),
  giftshipLinePrice: Shopify.formatMoney(giftshipLinePrice, settings.moneyFormat),
};

Add the following line just before the end of the each loop.

giftshipTotalPrice += giftshipLinePrice;

Also locate the data object and paste the following line in:

giftshipTotalPrice: Shopify.formatMoney(giftshipTotalPrice, settings.moneyFormat),

It should end up looking similar to the following.

data = {
  items: items,
  note: cart.note,
  totalPrice: Shopify.formatMoney(cart.total_price, settings.moneyFormat),
  giftshipTotalPrice: Shopify.formatMoney(giftshipTotalPrice, settings.moneyFormat),
  cartDiscount: cart.cart_level_discount_applications.length,
  totalCartDiscount: cart.total_discount === 0 ? 0 : {{ 'cart.general.savings_html' | t: price: '[savings]' | json }}.replace('[savings]', Shopify.formatMoney(cart.total_discount, settings.moneyFormat)),
};