Add a custom message on cart drawer based on product collection

[azieaziz14]

Hi,

How can I add a custom text below the item in cart based on item collection

For example, if item is from collection A, display message X. If item from collection B, display message Y below the item as screenshot below.

I tried to add some testing line of codes below the "quantity" row, but it makes the cart broken.

When I remove the item from the cart, it cause the cart to be broken, and I cannot make it work even after refreshing the page.

Is there a way to fix this? Thanks

[Small_Task_Help · Accepted solution]

Hi,

Hope this will help

- Find Cart Item File

{% for item in cart.items %}

Get Product Collections (Using cart.items only gives tags & product data, not collections)

Under the quantity selector add this loop

{% assign collections = item.product.collections %}
{% for collection in collections %}
  {% if collection.handle == 'collection-a' %}
    <p class="custom-cart-message">This is from Collection A – enjoy a special bonus!</p>
  {% elsif collection.handle == 'collection-b' %}
    <p class="custom-cart-message">Fast shipping on Collection B items!</p>
  {% endif %}
{% endfor %}

- Prevent Cart Breaking

[azieaziz14]

Hi,

I have able to make it works. I added these codes inside the cart-drawer liquid below the <quantity-popover> element.

Result on cart

In order to prevent the cart broken, I did the changes directly from the code editor in Shopify admin, instead of from the codes on my local. 

Thanks for the help. really apprecite it. 

[Shadab_dev]

I think the reason it's broken is because you are adding extra code in there but when you do any action the cart a new cart html is sent from the server or Shopify db that does not have that code. Not sure just assuming this.

May be try adding the content with javascript. So when the new cart is returned, loop over the new cart and add respective messages under each item so basically creating a new cart html and i setting into the dom. 

I am honestly not sure how feasible this is but or if even I am right on the cause of the error in the first place but this is all just something top of the head solution. 

Try this and let me know.

Best

Shadab