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
)
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) 
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 -%}