Notice: Undefined offset: 0 in /home/154810.cloudwaysapps.com/nvqnrmqyrh/public_html/wp-content/themes/gist-v2/single-article.php on line 16

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)),
};

Can't find the answer in our documentation?
Contact Support

Notice: Trying to get property 'name' of non-object in /home/154810.cloudwaysapps.com/nvqnrmqyrh/public_html/wp-content/themes/gist-v2/single-article.php on line 59
How To Implement Product Bundle Snippets With Handlebars.js Cart
Shopify Plus: Loading Giftship’s Features on the Checkout Page
Ensure empty values are not submitted
Javascript Event API ⚒️
Introduction to Auto Tagging #️⃣
Auto Tagging Orders with Gift Messages #️⃣
Auto Tagging Orders with Delivery Dates #️⃣
General Troubleshooting 💡
Configuring Your Customer Account Page 💡
Troubleshooting Bundle Items Not Being Added to the Cart 💡
Only Show Gift Messages on Shopify’s Packing Slip Template If They Are Present 💡
Troubleshooting Conditional Logic 💡
Preventing Giftship’s Features from Being Removed from the Cart Page When Using The Prestige Theme 💡
How to Disable the “gistToken” Attribute in the Additional Details of Your Orders 💡
How Box Builders Work 🎁
Creating a Box Builder 🎁
Adding an Image to your Box Builder Base Product 🎁
Clear the Box Builder Form Once Complete 🎁
Add a Link to Your Box Builder in your Menu 🎁
Hiding Sold Out Products From Your Box Builder 🎁
Customizing Box Builder Product Display Price on Collection Pages 🎁
Product Options Overview 🎛️
Display Rules: Showing Giftship Options Only if a Condition Is Met 🎛️
Display Conditions: Showing Giftship’s Options Only on Certain Products or Collections 🎛️
Styling you Product Options Image Row Upsell Components 🎛️
How to show bundle price on product page as bundle is built 🎛️
How to Accurately Preview your Order Confirmation Email Template 📫
How to Bulk Print Orders with Gift Messages Using the Print with Giftship Tool 📫
Hide prices on your order printer packing slip if the “Is this a gift?” checkbox is checked 📫
Issuing Refunds for Multiple Shipping Address Orders 📫
How to view orders by delivery date 📫
Fulfilling Multiple Shipping Address Orders 📦
Viewing Reports with Multiple Shipping Address Orders 📦
Discount Codes for Multiple Shipping Address Orders 📦
Tax Calculation for Multi-Address Checkouts in the United States 📦
Conditionally Hide Giftship Options Based on Your Carts Contents 📦
Sending non-physical products to multiple recipients 📦
Using Tax Overrides for Multiple Address Checkouts 📦
Enable Order Notes for Shipping to Multiple Addresses 📦
Making the Multiple Shipping Address Checkout Cart the Default 📦
Selling Digital Gift Cards with the Multiple Shipping Address Process 📦
Choose Where the Datepicker Appears on your Store 📅
Setting Up Datepicker Date Restrictions 📅
Setting Up Datepicker Time Constraints 📅
Setting up a Custom Datepicker for a Product or Collection 📅
Change the Datepickers Settings Based on Products in the Cart 📅
Configuring Gift Messages 🏷️
Printing Gift Messages 🏷️
Conditionally Hide the Gift Message Option on Product Pages 🏷️
Editing a Gift Message After an Order Has Been Placed 🏷️
How to view orders that contain Gift Messages or Delivery Dates 🏷️
Use Shopify’s Packing Slip to Print Gift Messages 🏷️
How to Charge for a Gift Message 🏷️
Remove Name Attributes from Gift Messages 🏷️
How to Display a Gift Message on Your Cart Page When it was Added on Your Product Page 🏷️
Change the location of where the gift message appears on your orders to the Cart Note section 🏷️
Shopify Plus: Adding Product Images Back to the Multi-Address Checkout ✏️
Style Giftship Elements by Using CSS Overrides ✏️
Using a Drawer or Popup Cart with Giftship’s Features ✏️
Change the location of Giftship’s features ✏️
Using Giftship in Multiple Languages ✏️
Only Show ‘Ship to Multiple Address’ Toggle if More Than 1 Item in Cart ✏️
Change the Location of the “Ship to multiple addresses” Checkbox ✏️
Preventing “Hidden” Line Item Properties from Displaying on Your Store ✏️
Hiding Upsell Products on Your Online Store ✏️
Ensuring the Logo Link is Active and ‘Back to Cart’ Breadcrumb is Always Present During Checkout ✏️
Change the Default Gift Box Icon ✏️
Troubleshooting multi-address orders not splitting in to child orders 💡
Troubleshooting Delivery Date or Message Details Not Being Added 💡
Troubleshooting Shipping Rates Not Loading 💡
Troubleshooting the apps features not showing up 💡
Using “Buy Now” Button is Skipping Giftship’s Features 💡
Installing Giftship 🚀
Find the Right Billing Plan 🚀
Disable Giftship on Your Live Theme for Testing 🚀
Installing Product Bundle Snippets 🚀
Frequently Asked Questions 🚀
Adding Upsells: Separate or Bundled Products 📈
Configuring One-Click Upsells 📈
Configuring Popup Upsells 📈
Creating an Image Row Upsell 📈
Creating a Checkbox List Upsell 📈
Creating a Dropdown List Upsell 📈
Hide Prices on Product Options Upsells 📈
Configuring Order Confirmation Email Templates For Multiple Shipping Address Orders 📥
Adding Gift Message and Delivery Date Details To Your Order Confirmation Template 📥
Prevent Multiple Emails from Being Sent when Shipping to Multiple Addresses 📥
Configure your Abandoned Cart Email Template 📥
Collecting the Email Address of a Gift Recipient 📥
Sorting Orders with Gift Message in Shipstation 🔌
Integration with Wholesale & Volume Discount Applications 🔌
Pass Delivery Date to Intuitive Shipping 🔌
Bulk Uploading Addresses for Multiple Shipping Address Orders 🔌
Giftship Checkout API ⚒️