How to setup Show Item option in Cart page and Cart drawer?

The "Show Item Option" means that when a customer buys a bundle, it is a combination of multiple products. The bundle is added to the cart as a single product, and the client wants to show the included products within the bundle in the description of the single product. You can do this by following the steps in the document below:

Go to themes >> Click on Edit code.

1. Open theme.liquid file and paste below script at the end of the page before </body> tag over and save it.

<script>
window.rbCartTriggerEvent = function (el) {
  el.classList.toggle("is_hide");
  const content = el.nextElementSibling;
  const isVisible = content.style.display === "block";
  content.style.display = isVisible ? "none" : "block";
  const span = el.querySelector('.rbTriggerSpan');
  if (span) {
    span.innerHTML = isVisible ? 'Show' : 'Hide';
  }
};
</script>

2. Find the cart template file >> you need to locate the code for the product title and paste the following code below the product title code.

Note: The cart template file for each theme is different, so if you are not familiar with code and encounter problems with the setup, feel free to contact our support team at support@webcontrive.com so they can assist you in setting up everything perfectly in your theme.

{%- if item.item_components.size != 0 -%}
  <button type="button" class="rb_subItem_trigger" onclick="rbCartTriggerEvent(this)">
    <span><span class="rbTriggerSpan">Hide</span> {{item.item_components.size}} items</span>
    <svg viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6.24 11.8a.75.75 0 0 0 1.06-.04l2.7-2.908 2.7 2.908a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0l-3.25 3.5a.75.75 0 0 0 .04 1.06Z"/></svg>
  </button>
  <div class="rb_subItemContain" style="display:block">
    <div class="rb_subItemView">
      {%- for component in item.item_components -%}
        {% assign componentTitle = component.title | split:'-' %}
        <div class="rb_subItemList">
          <div class="rb_sil_media">
            <img src="{{ component.image | image_url }}" width="40" height="40" alt="{{ component.title }}" />
          </div>
          <div class="rb_sil_info">
            <span class="rb_sil_info_ptitle">{{ component.quantity }} × {{ componentTitle[0] }}</span>
            <span class="rb_sil_info_vtitle">{{ componentTitle[1] }}</span>
          </div>
        </div>
      {%- endfor -%}
    </div>
  </div>
{%- endif -%}

Once you add the code so the product listing will start to appear in cart page.