Edit bundle from the cart
Enabling your customers to edit a bundle from the cart can help you reduce cart abandonment and improve conversion rates for the bundle.
This article will walk you through setting up edit bundle functionality on your storefront for:
Steps for fresh bundle installation
Steps for existing bundle installation
Final checks before going live
If you are using the Loop bundles for the first time on your store, then you can follow the simple steps mentioned below to enable this functionality:
Go to Loop admin > Bundles > Snippets > Select the theme of your choice.
Click on "Install bundle snippet"
Click on "Add bundle cart snippet"
This will enable the grouping of bundle items on a cart basis in the standard Shopify theme template and also display the "Edit" button on a cart.
If you are an existing store using Loop bundles and are not looking forward to losing your existing changes on "loop_bundle.js" files, then you can also change the HTML template used in the cart and cart drawer by following the below steps.
Note: We recommend testing this step first on a duplicate theme, not directly on the published one.
Go to Shopify admin > Sales channel > Online store > Themes > Edit code
Open loop_bundle.js and search for "getItemsHtmlLoop"
Add the "getEditCartButton" the function after the "getItemsHtmlLoop" function
Call the above function, i.e. getEditCartButton, with bundleTransactionId, available as a value in either "_bundleId" or "bundleId" in cart line item properties. You can find it in Loop's template in bundleItem.bundleId. Attaching an edited sample template below:
Add the function responsible for redirecting the customers to the edit bundle page once they click on the "Edit" button in the cart.
This will enable the grouping of bundle items on a cart basis in the standard Shopify theme template and also display the "Edit" button on a cart.
Go to Loop admin > Bundles > "View" any bundle of "build your bundle" type
Build a bundle and add the bundle to the cart
On the cart, you shall be able to see the "Edit" button
Click on the "Edit" button
It will take you to the bundle editor page, where you will find pre-selected items. You can update your item combination and click on "Edit bundle".
It shall take you to the cart or configured redirection page with the updated bundle content.
If you are able to complete all the above steps smoothly, then you can publish the changes on your published theme if you are working on a duplicate/draft theme.
No need to fret. We’re here to jump in and help you out. Reach out to us at support@loopwork.co or feel free to ping us on chat by clicking the support beacon on the bottom right
Thanks
Loop Subscriptions Team 🙂
This article will walk you through setting up edit bundle functionality on your storefront for:
Steps for fresh bundle installation
Steps for existing bundle installation
Final checks before going live
Fresh bundle installation
If you are using the Loop bundles for the first time on your store, then you can follow the simple steps mentioned below to enable this functionality:
Go to Loop admin > Bundles > Snippets > Select the theme of your choice.
Click on "Install bundle snippet"
Click on "Add bundle cart snippet"
This will enable the grouping of bundle items on a cart basis in the standard Shopify theme template and also display the "Edit" button on a cart.
Existing store using Loop bundles
If you are an existing store using Loop bundles and are not looking forward to losing your existing changes on "loop_bundle.js" files, then you can also change the HTML template used in the cart and cart drawer by following the below steps.
Note: We recommend testing this step first on a duplicate theme, not directly on the published one.
Go to Shopify admin > Sales channel > Online store > Themes > Edit code
Open loop_bundle.js and search for "getItemsHtmlLoop"
Add the "getEditCartButton" the function after the "getItemsHtmlLoop" function
const getEditCartButton = (bundleTransactionId) => {
return <button onclick="event.preventDefault(); changeBundleCartItems('${bundleTransactionId}');" style="background:none;border:none;display:flex;align-items:center;gap:3px;cursor:pointer;padding:0; text-decoration:underline;"><br> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pen" viewBox="0 0 17 17"><br> <path fill-rule="evenodd" d="M15.655 4.344a2.695 2.695 0 0 0-3.81 0l-.599.599-.009-.009-1.06 1.06.008.01-5.88 5.88a2.75 2.75 0 0 0-.805 1.944v1.922a.75.75 0 0 0 .75.75h1.922a2.75 2.75 0 0 0 1.944-.806l7.54-7.539a2.695 2.695 0 0 0 0-3.81Zm-4.409 2.72-5.88 5.88a1.25 1.25 0 0 0-.366.884v1.172h1.172c.331 0 .65-.132.883-.366l5.88-5.88-1.689-1.69Zm2.75.629.599-.599a1.195 1.195 0 1 0-1.69-1.689l-.598.599 1.69 1.689Z"></path><br> </svg><br> <p style="padding:0px;margin:0px;margin-top:5px">Edit</p><br> </button> ;
};Call the above function, i.e. getEditCartButton, with bundleTransactionId, available as a value in either "_bundleId" or "bundleId" in cart line item properties. You can find it in Loop's template in bundleItem.bundleId. Attaching an edited sample template below:
const getBundleCartTableTemplateLoop = (bundleItem, index, bundleLink) => {
return <br> <tr class="cart-item" id="CartBundleItem-${index}"><br> <td class="cart-item__media"><br> <a href="${bundleLink}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a><br> <div class="cart-item__image-container gradient global-media-settings"><br> <img src="${<br> bundleItem.image || ""<br> }" class="cart-item__image" alt="" loading="lazy" width="150" height="94"><br> </div><br> </td><br><br><br> <td class="cart-item__details"><a href="" class="cart-item__name h4 break">${<br> bundleItem.label<br> }</a><br> <div class="product-option"><br> ${bundleItem.items.map((item) => getItemsHtmlLoop(item)).join("")}<br> <br/><br> </div><br> <div class="product-option"><br> ${bundleItem.price}<br> </div><dl></dl><br> <p class="product-option">${<br> bundleItem.sellingPlan || ""<br> }</p><ul class="discounts list-unstyled" role="list" aria-label="Discount"></ul><br> ${getEditCartButton(bundleItem.bundleId)}<br> </td><br><br><br> <td class="cart-item__totals right medium-hide large-up-hide"><br> <div class="cart-item__price-wrapper"><br> <span class="price price--end"><br> ${bundleItem.price}<br> </span><br> </div><br> </td><br><br><br> <td class="cart-item__quantity"><br> <div class="cart-item__quantity-wrapper"><br> <quantity-input class="quantity"><br> <input disabled class="quantity__input" type="number" value="1" min="0"><br> </quantity-input><br> <cart-remove-button><br> <a onclick="removeBundleLoop('${<br> bundleItem.bundleId<br> }')" class="button button--tertiary" aria-label="${<br> bundleItem.label<br> }" style="cursor : pointer"><br> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" role="presentation" class="icon icon-remove"><br> <path d="M14 3h-3.53a3.07 3.07 0 00-.6-1.65C9.44.82 8.8.5 8 .5s-1.44.32-1.87.85A3.06 3.06 0 005.53 3H2a.5.5 0 000 1h1.25v10c0 .28.22.5.5.5h8.5a.5.5 0 00.5-.5V4H14a.5.5 0 000-1zM6.91 1.98c.23-.29.58-.48 1.09-.48s.85.19 1.09.48c.2.24.3.6.36 1.02h-2.9c.05-.42.17-.78.36-1.02zm4.84 11.52h-7.5V4h7.5v9.5z" fill="currentColor"></path><br> <path d="M6.55 5.25a.5.5 0 00-.5.5v6a.5.5 0 001 0v-6a.5.5 0 00-.5-.5zM9.45 5.25a.5.5 0 00-.5.5v6a.5.5 0 001 0v-6a.5.5 0 00-.5-.5z" fill="currentColor"></path><br> </svg><br> </a><br> </cart-remove-button><br> </div><br> </td><br><br><br> <td class="cart-item__totals right small-hide"><br> <div class="cart-item__price-wrapper"><span class="price price--end"><br> ${bundleItem.price}<br> </span></div><br> </td><br> </tr><br> ;
};Add the function responsible for redirecting the customers to the edit bundle page once they click on the "Edit" button in the cart.
const changeBundleCartItems = async (bundleTransactionId) => { disableEditButton(); if (bundleTransactionId) { const _editBundleRef = `${BUNDLE_LINK_PREFIX}/change/${bundleTransactionId}`; window.location.href = _editBundleRef; } }; const disableEditButton = (bundleId) => { console.log(`disabling bundle edit button: ${bundleId}`); const editButttons = document.querySelectorAll( `loop-edit-bundle-${bundleId}` ); for (const button of editButttons) { button.disabled = true; } };This will enable the grouping of bundle items on a cart basis in the standard Shopify theme template and also display the "Edit" button on a cart.
Final checks before going live
Go to Loop admin > Bundles > "View" any bundle of "build your bundle" type
Build a bundle and add the bundle to the cart
On the cart, you shall be able to see the "Edit" button
Click on the "Edit" button
It will take you to the bundle editor page, where you will find pre-selected items. You can update your item combination and click on "Edit bundle".
It shall take you to the cart or configured redirection page with the updated bundle content.
If you are able to complete all the above steps smoothly, then you can publish the changes on your published theme if you are working on a duplicate/draft theme.
Facing issues?
No need to fret. We’re here to jump in and help you out. Reach out to us at support@loopwork.co or feel free to ping us on chat by clicking the support beacon on the bottom right
Thanks
Loop Subscriptions Team 🙂
Updated on: 13/08/2024
Thank you!