Install Bundle Snippets Manually

Contents of the article

Manual Bundle Snippet Installation
Need help?

Manual Bundle Snippet Installation

This step-by-step tutorial will ensure that you have installed the bundle cart snippets manually on the store. If this snippet is not installed, the cart will show the bundle purchase items as individual items and will not be grouped automatically.

Step 1: Copy the latest code by going to https://d31fj02dwkdj33.cloudfront.net/loop_bundle.js and paste it into a new file in your theme called loop_bundle.js





Step 2: Add the following code at the bottom of the cart page. Note that your cart page might be named differently.

<code><script defer="defer">
window.Loop = {};
window.Loop.bundleCartAllItems = {{ cart.items | json }};
</script>
<script src="{{ 'loop_bundle.js' | asset_url }}"></script>

Step 3: Add the following code inside the items loop on the cart page

` {% comment %} LOOP SUBSCRIPTIONS (https://apps.shopify.com/loop-subscriptions) DO NOT modify this source code because It is automatically generated from LOOP SUBSCRIPTIONS BUNDLE DESIGN If you need to make change, please contact the Loop support team 
LOOP BUNDLE CODE STARTS 
{% endcomment %} 
{% assign isBundleItem = false %} 
        {%- for property in item.properties -%} 
              {% if property.first == 'bundleId' %} 
                       {% assign isBundleItem = true %}  
                       {% break %} 
              {% endif %} 
{%- endfor -%} 
{% if isBundleItem == true %} 
       {% continue %} 
    {% endif %} 
{% comment %} 
LOOP BUNDLE CODE ENDS 
{% endcomment %}

`



Step 4: Inside the renderBundle function of loop_bundle.js Change the cart-items-body class to the cart page tbody class name if required.

Step 5: Fix CSS if needed. To fix CSS go into loop_bundle.js asset and change the HTML inside the getBundleCartItemsTemplate function.

Still Need help?

There is no need to worry. We are here to assist you. Please contact us at support@loopwork.co or feel free to reach out to us through the chat by clicking on the support beacon located at the bottom right corner.

Regards,

Loop Subscriptions Team 🙂

Updated on: 13/08/2024