Hi,
We’re integrating with the new Bundles API launched in 2023-07. When a bundle is present in the cart (regardless if it’s fixed or customized), the list of products it contains can be obtained from the Cart object in Liquid as
line_item.item_components
However, this property is not present in the Cart AJAX JSON response such as /cart.js.
Is there any way to have it included?
Note: the bundle line item is produced by the CartTransform.
Many thanks!
Did you figure this out? I can for the life of me not get the item_components to show up on line_items.
Unfortunately, there’s no news. Nothing I received from Shopify on this. I assume this is simply work in progress on their end and eventually the data will surface somehow in the Cart object in AJAX. For now, we’re stuck with workarounds such as line item props and cart attributes but they’re less reliable.
I did a hidded section, added it in the cart page , and with JS and section rendering I request this section as a JSON
LIQUID code cart-json.liquid
{
“note”: {{ cart.note | json }},
“attributes”: {{ cart.attributes | json }},
“original_total_price”: {{ cart.original_total_price | json }},
“total_price”: {{ cart.total_price | json }},
“total_discount”: {{ cart.total_discount | json }},
“total_weight”: {{ cart.total_weight | json }},
“item_count”: {{ cart.item_count | json }},
“items”: [
{% for item in cart.items %}
{
“id”: {{ item.id | json }},
“properties”: {{ item.properties | json }},
“quantity”: {{ item.quantity | json }},
“variant_id”: {{ item.variant_id | json }},
“key”: {{ item.key | json }},
“title”: {{ item.title | json }},
“price”: {{ item.price | json }},
“original_price”: {{ item.original_price | json }},
“discounted_price”: {{ item.discounted_price | json }},
“line_price”: {{ item.line_price | json }},
“original_line_price”: {{ item.original_line_price | json }},
“total_discount”: {{ item.total_discount | json }},
“discounts”: {{ item.discounts | json }},
“sku”: {{ item.sku | json }},
“grams”: {{ item.grams | json }},
“vendor”: {{ item.vendor | json }},
“taxable”: {{ item.taxable | json }},
“product_id”: {{ item.product_id | json }},
“product_has_only_default_variant”: {{ item.product_has_only_default_variant | json }},
“gift_card”: {{ item.gift_card | json }},
“final_price”: {{ item.final_price | json }},
“final_line_price”: {{ item.final_line_price | json }},
“url”: {{ item.url | json }},
“featured_image”: {{ item.image | json }},
“handle”: {{ item.handle | json }},
“requires_shipping”: {{ item.requires_shipping | json }},
“product_type”: {{ item.product.type | json }},
“product_title”: {{ item.product.title | json }},
“product_description”: {{ item.product_description | json }},
“variant_title”: {{ item.variant_title | json }},
“variant_options”: {{ item.variant_options | json }},
“options_with_values”: {{ item.options_with_values | json }},
“line_level_discount_allocations”: {{ item.line_level_discount_allocations | json }},
“line_level_total_discount”: {{ item.line_level_total_discount | money_without_currency | json }},
“quantity_rule”: {{ item.quantity_rule | json }},
“item_components”: {{ item.item_components | json }}
} {%- unless forloop.last -%},{%- endunless -%}
{% endfor %}
]
,
“requires_shipping”: {{ cart.requires_shipping | json }},
“currency”: “{{ cart.currency.iso_code }}”,
“items_subtotal_price”: {{ cart.items_subtotal_price | money_without_currency | json }},
“cart_level_discount_applications”: {{ cart.cart_level_discount_applications | json }}
}
dont forget to add it on your cart template and on the schema add it the hidden class
Javascript code to request the section with the json format
function getCartItems() {
fetch(‘/cart?sections=cart-json’)
.then(response => response.text())
.then(html => {
let jsonData = JSON.parse(html);
const htmlDiv = jsonData[‘cart-json’];
// parse the HTML , need only the div textContent
const parser = new DOMParser();
const doc = parser.parseFromString(htmlDiv, ‘text/html’);
console.log(JSON.parse(doc.querySelector(‘#shopify-section-cart-json’).textContent) );
})
.catch(error => {
console.error(‘Error fetching cart items:’, error);
});
}
getCartItems();
it’s a way to get the exactly cart.js code but with the item_components hope it works !
