Questions related to the Cart Ajax API

Online Store and Theme Development
1

Hi all!
We’re using a third-party app for native bundles. When the app adds a bundle to the cart, it adds a property to each component of the bundle. These are accessible in Liquid via line_item.item_components, which is an array of line_item objects representing the bundle’s components.
We want to add an additional property to each component that provides extra data to help fulfillment teams identify which bundle an item belongs to — especially useful when multiple bundles are in the cart. To achieve this, we’re using the /cart/change.js Ajax API, but instead of passing a variant ID or a line item key, we’re passing the line-item component’s key:

fetch('/cart/change.js', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        id: component.key,
        properties: updatedProperties
    })
})

To clarify, since line-item components aren’t included in the standard Ajax API responses, we generate the following JSON to fetch component data via JavaScript (this is where we get the component object in the snippet above from):

{% layout none %}
{
  "items": [
    {% for item in cart.items %}
    {
      {% if item.item_components %}
      "components": [
        {% for component in item.item_components %}
        {
          "key": {{ component.key | json }},
          "id": {{ component.id | json }},
          "quantity": {{ component.quantity | json }},
          "product_id": {{ component.product_id | json }},
          "variant_id": {{ component.variant_id | json }},
          "title": {{ component.title | json }},
          "product_title": {{ component.product.title | json }},
          "variant_title": {{ component.variant.title | json }},
          "properties": {
            {% for property in component.properties %}
              {{ property.first | json }}: {{ property.last | json }}{% unless forloop.last %},{% endunless %}
            {% endfor %}
          }
        }{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ]
      {% else %}
      "components": []
      {% endif %}
    }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ]
}

I have two questions:

  1. This approach seems to be working correctly, but since the Ajax API documentation doesn’t mention line-item components, can we safely assume that the item_component.key we’re using here will always behave like a line_item.key in this context?
  2. Since /cart/update.js doesn’t support updating line-item properties, we’re using /cart/change.js, which requires updating each line item individually. Is there any plan for /cart/update.js to support updating multiple line-item properties at once, similar to how it currently handles batch quantity updates?

Thanks in advance!

1 Like
2

Interesting solution - there might be some missing docs regarding this, so I think you found a needle in a haystack :sweat_smile:

Interesting to see if someone internal will see, and answer, this. Bumping for visibility.