AJAX Cart does not contain line_item.item_components for bundles CartTransform

[pkeugene]

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!

[AlexanderLindk]

Did you figure this out? I can for the life of me not get the item_components to show up on line_items.

[pkeugene]

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.

[josegomezmottan]

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 !