Welcome to Eight Docs

Integrating the Cart Drawer with Bundle Builder

Advanced knowledge of Liquid will be essential

You need to have a strong understanding of Liquid to complete this integration, along with a detailed understanding of how your current theme's Cart drawer/AJAX Drawer is coded.

Due to the complexity and personalised nature of this process, we are currently unable to offer support for this functionality.


It's possible to do the integration to cart drawer using a bit of coding. Actual code depends whether your theme renders the cart drawer using Liquid or JavaScript, but these changes should be applicable nevertheless:


1) Product pricing

Bundle Builder can alter price of a product variant added to cart.

When line item has a property called _bundle_price, it should be used instead of the line item price.

There's is also _original_bundle_price that overrides an "original" (compare at) price.


2) Total price

The total cart price needs to take product price override into an account.

So instead of using price from cart object, it needs to be accumulated over individual line items, taking the overrides in Step 1) into account.

Note: There's a helper function available as `window.bbProcessCart` that will take a Cart object as returned from `/cart.js` API call and applies the steps 1 and 2 above. This will return Cart object with the pricing changes applied - you can use this function to preprocess the cart before displaying it to the user.


3) Checkout target

If a Multi SKU bundle is in the bundle, custom checkout needs to be used instead of regular checkout.

This step will replace the bundle "ghost" product with individual products, fix prices etc.

You can detect if this step is needed by checking that any of the line items has _bundle_price property set. If that's true, then /apps/bundles/cart should be used as an "action" for the cart checkout form.

The form content just needs to have two new hidden inputs:


<input type="hidden" name="_cart" value="{{ cart | json | escape }}" />
<input type="hidden" name="_shop" value="{{ shop.permanent_domain | escape }}" />


We would recommend checking bundlebuilder-cart.liquid and bundlebuilder-cart-item.liquid snippets on any theme that has Bundle Builder installed for example of implementation.

Was this article helpful?