Display bundle components in cart/drawer

Hi all,

I came across an interesting scenario…

When creating a bundle with the Cart Transform API, the components of the bundle are available in Liquid via cart.line_items.item_components.

Liquid - line_items

However, if a merchant’s theme was not designed with support for bundles in mind (leveraging item_properties), how can the details of the bundle components be displayed in the cart/drawer? Unlike a product template, there is only one cart, where it is not possible to customize the cart without custom editing of a merchant’s theme. We can add theme-app blocks or app-embed blocks, which could then manipulate the cart DOM after it is rendered (messy :face_with_diagonal_mouth:)

Looking at Shopify’s reference Dawn theme, even it does not have support for bundles, as the cart’s Liquid code does not reference the item_components object.

Short of my bundles app adding custom line item properties to a bundle product, I cannot see how can an app with a theme-app block could “force” an edit of a merchant’s theme code in order to utilize the item_components object.

Thoughts?

I’ve also been in your situation and ultimately came to a similar conclusion.

Having to manipulate the DOM with js quickly becomes very cumbersome, if you want to support many themes. I think ultimately it comes down to the theme developers to support this.

Also I’m just curious, how have you integrated with the cart/cart drawers from different themes? They all implement carts in their own ways, so in my case I ended up having to write bespoke logic for the individual themes I would want to support.

Welcome to the wonderful world of the WWW (World Wild Web) :wink:

As Dawn is a Shopify-created reference theme, my hope would be that theme developers build off of Dawn as some sort of “standard”. That said, the themes I’ve come across support displaying line-item properties in the cart/drawer.

I was able to apply custom line-item properties (representing the details of the bundle components) to my Cart Transform function. This way, the theme picks up the line-item properties of the transformed cart, where it looks like any regular product variant with line-item properties.

Short of that, it may be necessary to manually edit a merchant’s theme with Liquid code similar to the following (not preferred):

{%- if item.item_components -%}
  {%- for component in item.item_components -%}
    <div class="product-option">
      <dt>{{ option }} {{ forloop.index }}: {{ component.title }}:</dt>
    </div>
  {%- endfor -%}
{%- endif -%}