Adding a custom message to product line on cart page based on product collection

Adding a custom message to product line on cart page based on product collection

TheLittleMatt
Shopify Partner
2 0 0

Hello, 

I am having some trouble with getting my cart to display a message on correctly. I am trying to make it so that when a product is within the  "2024 Snowboards" collection is added to the it will display a message stating "FREE SOCKS WITH THIS SNOWBOARD PURCHASE" on the product line on the cart page. I got it to appear, but it is now appearing on products that are not even in the "2024 Snowboards" Collection. When I remove the product from the "2024 Snowboards" collection, all the messaging disappears as it should. I just am confused as to how to make it not appear on all products when a product from the "2024 Snowboards" collection is in the cart but still have it show on just the products within the "2024 Snowboards" collection.

 

Here is an image showing the error:
Screenshot 2023-09-27 at 2.35.50 PM.png


Code Snippet for I am using for adding text:

 

  {% for item in cart.items %}  
  {% assign found_collection = false %}
  {% for collection in item.product.collections %}
    {% if collection.title == '2024 Snowboards' %}
      {% assign found_collection = true %}
      {% break %}
    {% endif %}
  {% endfor %}
  {% if found_collection %}
    <h3>FREE SOCKS WITH THIS SNOWBOARD PURCHASE!</h3>
  {% endif %}
{% endfor %}

 

 

 Full cart-item code:

 

<div class="cart__item" data-key="{{ product.key }}">
  <div class="cart__image">
    {% if product.image != blank %}
      <a href="{{ product.url }}" class="image-wrap">
        {%- render 'image-element',
          img: product,
          alt: product.product.title,
          widths: '180, 360, 540',
          sizes: sizes,
          sizeVariable: sizeVariable,
          fallback: fallback,
        -%}
      </a>
    {% endif %}
  </div>
  <div class="cart__item-details">
    <div class="cart__item-title">
      <a href="{{ product.url }}" class="cart__item-name">
        {{ product.product.title }}
      </a>
      {%- unless product.product.has_only_default_variant -%}
        <div class="cart__item--variants">
          {%- for option in product.options_with_values -%}
            <div><span>{{ option.name }}:</span> {{ option.value }}</div>
          {%- endfor -%}
        </div>
      {%- endunless -%}
      {%- if product.selling_plan_allocation != empty -%}
        <div class="cart__item--variants">
          {{ product.selling_plan_allocation.selling_plan.name }}
        </div>
      {%- endif -%}
      {%- assign property_size = product.properties | size -%}
      {% if property_size > 0 %}
        {% for p in product.properties %}
          {%- assign first_character_in_key = p.first | truncate: 1, '' -%}
          {% unless p.last == blank or first_character_in_key == '_' %}
            <div class="cart__item--properties">
              <span>{{ p.first }}:</span>
              {% if p.last contains '/uploads/' %}
                <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
              {% else %}
                {{ p.last }}
              {% endif %}
            </div>
          {% endunless %}
        {% endfor %}
      {% endif %}

    </div>
    
  {% for item in cart.items %}  
  {% assign found_collection = false %}
  {% for collection in item.product.collections %}
    {% if collection.title == '2024 Snowboards' %}
      {% assign found_collection = true %}
      {% break %}
    {% endif %}
  {% endfor %}
  {% if found_collection %}
    <h3>FREE SOCKS WITH THIS SNOWBOARD PURCHASE!</h3>
  {% endif %}
{% endfor %}
    
    <div class="cart__item-sub">
      <div>
        <div class="js-qty__wrapper">
          <label for="cart_updates_{{ product.key }}" class="hidden-label">{{ 'cart.label.quantity' | t }}</label>
          <input type="text"
            id="cart_updates_{{ product.key }}"
            name="updates[]"
            class="js-qty__num"
            value="{{ product.quantity }}"
            min="0"
            pattern="[0-9]*"
            data-id="{{ product.key }}">
          <button type="button"
            class="js-qty__adjust js-qty__adjust--minus"
            aria-label="{{ 'cart.general.reduce_quantity' | t }}">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-minus" viewBox="0 0 20 20"><path fill="#444" d="M17.543 11.029H2.1A1.032 1.032 0 0 1 1.071 10c0-.566.463-1.029 1.029-1.029h15.443c.566 0 1.029.463 1.029 1.029 0 .566-.463 1.029-1.029 1.029z"/></svg>
              <span class="icon__fallback-text" aria-hidden="true">&minus;</span>
          </button>
          <button type="button"
            class="js-qty__adjust js-qty__adjust--plus"
            aria-label="{{ 'cart.general.increase_quantity' | t }}">
              <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 20 20"><path fill="#444" d="M17.409 8.929h-6.695V2.258c0-.566-.506-1.029-1.071-1.029s-1.071.463-1.071 1.029v6.671H1.967C1.401 8.929.938 9.435.938 10s.463 1.071 1.029 1.071h6.605V17.7c0 .566.506 1.029 1.071 1.029s1.071-.463 1.071-1.029v-6.629h6.695c.566 0 1.029-.506 1.029-1.071s-.463-1.071-1.029-1.071z"/></svg>
              <span class="icon__fallback-text" aria-hidden="true">+</span>
          </button>
        </div>

        <div class="cart__remove">
          <a href="{{ routes.cart_change_url }}?id={{ product.key }}&amp;quantity=0" class="text-link">
            {{ 'cart.general.remove' | t }}
          </a>
        </div>
      </div>

      <div class="cart__item-price-col text-right">
        {% if product.original_price != product.final_price %}
          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
          <small class="cart__price cart__price--strikethrough">
            {{ product.original_price | money }}
          </small>
          <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
          <span class="cart__price cart__discount">
            {{ product.final_price | money }}
          </span>
        {% else %}
          <span class="cart__price">
            {{ product.original_price | money }}
          </span>
        {% endif %}

        {%- if product.line_level_discount_allocations != blank -%}
          {%- for discount_allocation in product.line_level_discount_allocations -%}
            <small class="cart__discount">{{ discount_allocation.discount_application.title }} (-{{ discount_allocation.amount | money }})</small>
          {%- endfor -%}
        {%- endif -%}

        {%- if product.unit_price_measurement -%}
          {%- capture unit_price_base_unit -%}
            <span class="unit-price-base">
              {%- if product.unit_price_measurement -%}
                {%- if product.unit_price_measurement.reference_value != 1 -%}
                  {{ product.unit_price_measurement.reference_value }}
                {%- endif -%}
                {{ product.unit_price_measurement.reference_unit }}
              {%- endif -%}
            </span>
          {%- endcapture -%}

          <div class="product__unit-price">{{ product.unit_price | money }}/{{ unit_price_base_unit }}</div>
        {%- endif -%}
      </div>
    </div>
  </div>
</div>

 

 
Full main-cart code:

 

<div class="page-width page-content">

  {%- render 'breadcrumbs' -%}

  <header class="section-header text-center{% if cart.item_count == 0 %} section-header--404{% endif %}">
    <h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
    <div class="rte text-spacing">
      {%- if cart.item_count == 0 -%}
        <p>{{ 'cart.general.empty' | t }}</p>
      {%- endif -%}
      <p>{{ 'cart.general.continue_browsing_html' | t: url: routes.all_products_collection_url }}</p>
    </div>
  </header>
  
  {%- if cart.item_count > 0 -%}
    <form action="{{ routes.cart_url }}" method="post" novalidate data-location="page" id="CartPageForm">
      <div class="cart__page">    
        <div data-products class="cart__page-col">
          {% for item in cart.items %}
            {%- render 'cart-item', product: item, sizes: '150px', -%}
          {%- endfor -%}
        </div>
        <div class="cart__page-col">
          {% if settings.cart_notes_enable %}
            <div>
              <label for="CartNote">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" class="input-full cart-notes" id="CartNote">{{ cart.note }}</textarea>
            </div>
          {% endif %}

          <div data-discounts>
            {% if cart.cart_level_discount_applications != blank %}
              <div class="cart__discounts cart__item-sub cart__item-row">
                <div>{{ 'cart.general.discounts' | t }}</div>
                <div class="text-right">
                  {% for cart_discount in cart.cart_level_discount_applications %}
                    <div class="cart__discount">
                      {{ cart_discount.title }} (-{{ cart_discount.total_allocated_amount | money }})
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          </div>

          <div class="cart__item-sub cart__item-row">
            <div>{{ 'cart.general.subtotal' | t }}</div>
            <div data-subtotal>{{ cart.total_price | money }}</div>
          </div>

          {% if settings.cart_terms_conditions_enable %}
            <div class="cart__item-row cart__terms">
              <input type="checkbox" id="CartTerms" class="cart__terms-checkbox">
              <label for="CartTerms">
                {% if settings.cart_terms_conditions_page != blank %}
                  {{ 'cart.general.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
                {% else %}
                  {{ 'cart.general.terms' | t }}
                {% endif %}
              </label>
            </div>
          {% endif %}

          <div class="cart__item-row cart__checkout-wrapper">
            <button type="submit" name="checkout" data-terms-required="{{ settings.cart_terms_conditions_enable }}" class="btn cart__checkout">
              {{ 'cart.general.checkout' | t }}
            </button>

            {% if additional_checkout_buttons and settings.cart_additional_buttons %}
              <div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
            {% endif %}
          </div>

          <div class="cart__item-row text-center">
            <small>
              {{ 'cart.general.shipping_at_checkout' | t }}<br />
            </small>
          </div>
        </div>
      </div>
    </form>
  {%- endif -%}
</div>

{% schema %}
{
  "name": "t:sections.main-cart.name"
}
{% endschema %}

 

 
Thank you for your time if you have any solutions!

Replies 4 (4)

JohnE10
Shopify Partner
115 14 19

Hi,

 

Try this code snippet:

 

{%- for collection in item.product.collections -%}
  {%- if collection.title == '2024 Snowboards' -%}
    <h3>FREE SOCKS WITH THIS SNOWBOARD PURCHASE!</h3>
  {%- endif -%}
{%- endfor -%}

 

 

Place the snippet in "main-cart-items.liquid", right after this (already existing) line: 

 

<a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>

 

 

Cheers,

 

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
JohnE10
Shopify Partner
115 14 19

Actually, the reply I posted above is for a Dawn Theme store.

 

Try using this code snippet instead of what you're currently using:

 

 

 

{%- for item in cart.items -%}
  {%- for collection in item.product.collections -%}
    {%- if collection.title == '2024 Snowboards' -%}
      <h3>FREE SOCKS WITH THIS SNOWBOARD PURCHASE!</h3>
    {%- endif -%}
  {%- endfor -%}
{%- endfor -%}

 

 

 

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com
TheLittleMatt
Shopify Partner
2 0 0

Hi JohnE10,

Thank you for this snippet. It didn't fix the issue of having the message show up on all the products in the cart however it does still work the same as the code snippet I was using before.

Thank you,
Matt

JohnE10
Shopify Partner
115 14 19

Hey Matt,

 

just to double-check, did you replace all of this:

 

 

  {% for item in cart.items %}  
  {% assign found_collection = false %}
  {% for collection in item.product.collections %}
    {% if collection.title == '2024 Snowboards' %}
      {% assign found_collection = true %}
      {% break %}
    {% endif %}
  {% endfor %}
  {% if found_collection %}
    <h3>FREE SOCKS WITH THIS SNOWBOARD PURCHASE!</h3>
  {% endif %}
{% endfor %}

 

 

with the new snippet?

 

This is what I get with it, but that's using the Dawn theme.

 

1.png

If you can give me collaborator access, I'll take a look at it for you?

If my reply was helpful, Like and Accept. Or Buy Me a Beverage
App Development/Custom Modifications, Visit My Gig and let me how I can help
For help with your store speed optimization, Check Out My Other Gig
Feel free to email with any questions: ProjectCoder10@gmail.com