Install Bundle Snippets Manually
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
<code>{% 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.
Facing Issues?
If you have any queries or doubts about any of these steps. Please reach out to support@loopwork.co
Thanks
Loop Subscription Team