Line item components

line-item-components.liquid

{% comment %}
This is an example snippet leveraging line item components in the cart. This supports surfacing selected variant
options as part of a bundle that uses the Cart Transform API (like Shopify Bundles, FoxSell Bundles, Biscuit Bundles, etc)

The item that gets added to the cart is the bundle product itself. The line item components represent the chosen options, 
individual SKUs, that make up the bundle.

Item components reference: https://shopify.dev/docs/api/liquid/objects/line_item#line_item-item_components
{% endcomment %}

{%- if item.item_components != blank and item.item_components != null -%}
  <div class="bundle-details">
    <button 
      class="bundle-toggle" 
      aria-expanded="false"
      aria-controls="bundle-items-{{ item.key }}"
      onclick="toggleBundleItems(event, this)"
      type="button">
      <span>Show items</span>
      <svg class="icon-chevron" width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 1L6 6L11 1" stroke="currentColor" stroke-width="1.5"/>
      </svg>
    </button>

    <ul id="bundle-items-{{ item.key }}" class="bundle-items" hidden>
      {% for bundle_item in item.item_components %}
        <li>
          {{ bundle_item.title | split: ' - ' | first }}
          <ul class="bundle-items-options">
            <li>{{ bundle_item.title | split: ' - ' | last }}</li>
          </ul>
        </li>
      {% endfor %}
    </ul>
  </div>
{%- endif -%}


{% # JS to toggle item components to make them visible and mimic checkout UI %}
<script>
  function toggleBundleItems(event, button) {
    event.preventDefault();
    event.stopPropagation();
    const expanded = button.getAttribute('aria-expanded') === 'true';
    const content = document.getElementById(button.getAttribute('aria-controls'));
    button.setAttribute('aria-expanded', !expanded);
    content.hidden = expanded;
    const buttonText = button.querySelector('span');
    buttonText.textContent = expanded ? 'Show items' : 'Hide items';
  }
</script>

Item components reference: https://shopify.dev/docs/api/liquid/objects/line_item#line_item-item_components