Add product-specific note to shopping cart

Highlighted
New Member
2 0 0

Hi there,

I would love to get some feedback in my coding (I'm just a beginner). I want to add a small piece of text to my shopping cart that only appears when a certain product is added to the cart (based on product tags). Now I've been figuring it out myself and I almost did it. The text appears at the right spot and is correclty triggered by the tag. However, when the customer ads a second product, the text disapears again... I think it has to do with where I pasted my snipper of code. Can anybody give me some guidance? Thank you!! :-)

This is the snippet of code I used in the cart.liquid:
<!-- Start Sander's Incremental Shipping Costs Message -->      
                {% for item in cart.items %}
                    {% if item.product.tags contains 'hondenpootketting' %}
                        {% if forloop.first %}
                        ------------------------------------------------------------------<br />
                        Verzendkosten Gratis Hondenpoot Ketting:<br />
                        - 1 Ketting  : €6,95<br />
                        - 2 Kettingen: €9,95<br />
                        - 3 Kettingen: €11,95<br />
                        - 4 Kettingen: €13,95<br />
                        - 5 Kettingen: €15,95<br />
                           Maximaal 5 kettingen per bestelling.<br />
                        ------------------------------------------------------------------<br />
                           {% endif %}
                    {% endif %}
                {% endfor %}
                      <!-- End Sander's Incremental Shipping Costs Message --> 

And here is my complete card.liquid:

{% include 'vncpc' %}{% comment %}

  This is your /cart template. If you are using the Ajaxify Cart plugin,
  your form (with action="/cart") layout will be used in the drawer/modal.

  For info on test orders:
    - General http://docs.shopify.com/manual/your-store/orders/test-orders
    - Shopify Payments - http://docs.shopify.com/manual/more/shopify-payments/testing-shopify-payments

{% endcomment %}


{% if cart.item_count > 0 %}

  <form action="/cart" method="post" novalidate class="cart">

    <div class="section-header">
      <h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
    </div>

    <div class="cart__row medium-down--hide cart__header-labels">
      <div class="grid--full">
        <div class="grid__item large--one-half push--large--one-half">
          <div class="grid--full">
            <div class="grid__item one-third medium-down--one-third">
              <span class="h4">{{ 'cart.label.price' | t }}</span>
            </div>
            <div class="grid__item one-third medium-down--one-third text-center">
              <span class="h4">{{ 'cart.label.quantity' | t }}</span>
            </div>
            <div class="grid__item one-third medium-down--one-third text-right">
              <span class="h4">{{ 'cart.label.total' | t }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    {% comment %}
      Loop through products in the cart
    {% endcomment %}
    {% for item in cart.items %}
      <div class="cart__row" data-id="{{ item.key }}">
        <div class="grid--full cart__row--table-large">

          <div class="grid__item large--one-half">
            <div class="grid">

              <div class="grid__item one-third">
                <a href="{{ item.url | within: collections.all }}" class="cart__image">

                  {% comment %}
                    More image size options at:
                      - http://docs.shopify.com/themes/filters/product-img-url
                  {% endcomment %}
                  <img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
                </a>
              </div>

              <div class="grid__item two-thirds">
                <a href="{{ item.url }}" class="h4">
                  {{ item.product.title }}
                </a>
                {% unless item.variant.title contains 'Default' %}
                  <br>
                  <small>{{ item.variant.title }}</small>
                {% endunless %}

                {% if settings.cart_vendor_enable %}
                  <p>{{ item.vendor }}</p>
                {% endif %}
                
                {% comment %}
                  Optional, loop through custom product line items if available

                  For more info on line item properties, visit:
                    - http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-p...
                {% endcomment %}
                {% assign propertySize = item.properties | size %}
                {% if propertySize > 0 %}
                  {% for p in item.properties %}
                    {% assign first_character_in_key = p.first | truncate: 1, '' %}
                    {% unless p.last == blank or first_character_in_key == '_' %}
                      <br>
                      {{ p.first }}:

                      {% comment %}
                        Check if there was an uploaded file associated
                      {% endcomment %}
                      {% if p.last contains '/uploads/' %}
                        <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                      {% else %}
                        {{ p.last }}                 
                      {% endif %}

                    {% endunless %}
                  {% endfor %}
                {% endif %}

                <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" data-id="{{ item.key }}" class="cart__remove">
                  <small>{{ 'cart.general.remove' | t }}</small>
                </a>
              </div>

            </div>
          </div>
          
          <div class="grid__item large--one-half">
            <div class="grid--full cart__row--table-large">

              <div class="grid__item one-third">
                <span class="cart__mini-labels">{{ 'cart.label.price' | t }}</span>
                <span class="h5">{{ item.price | money }}</span>
              </div>

              <div class="grid__item one-third text-center">
                <span class="cart__mini-labels">{{ 'cart.label.quantity' | t }}</span>
                {% comment %}
                  Added data-id for the ajax cart implementation only.
                {% endcomment %}
                <input type="number" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" data-id="{{ item.key }}">
              </div>

              <div class="grid__item one-third text-right">
                <span class="cart__mini-labels">{{ 'cart.label.total' | t }}</span>

                <span class="h5">
                  {% if item.original_line_price != item.line_price %}
                  <small class="cart-item__original-price"><s>{{ item.original_line_price | money }}</s></small>
                  {% endif %}
                  {{ item.line_price | money }}
                </span>
                {% if item.original_line_price != item.line_price %}
                  {% for discount in item.discounts %}
                    <small class="cart-item__discount">{{ discount.title }}</small>
                  {% endfor %}
                {% endif %} 
                
              </div>

            </div>
          </div>

        </div>
      </div>
    
    {% endfor %}
 
                    <!-- Start Sander's Incremental Shipping Costs Message -->      
                {% for item in cart.items %}
                    {% if item.product.tags contains 'hondenpootketting' %}
                        {% if forloop.first %}
                        ------------------------------------------------------------------<br />
                        Verzendkosten Gratis Hondenpoot Ketting:<br />
                        - 1 Ketting  : €6,95<br />
                        - 2 Kettingen: €9,95<br />
                        - 3 Kettingen: €11,95<br />
                        - 4 Kettingen: €13,95<br />
                        - 5 Kettingen: €15,95<br />
                           Maximaal 5 kettingen per bestelling.<br />
                        ------------------------------------------------------------------<br />
                           {% endif %}
                    {% endif %}
                {% endfor %}
                      <!-- End Sander's Incremental Shipping Costs Message --> 
    
    <div class="cart__row">
      <div class="grid">
        {% comment %}
          Optional, add a textarea for special notes
            - Your theme settings can turn this on or off. Default is on.
            - Make sure you have name="note" for the message to be submitted properly
        {% endcomment %}  
                        
        {% if settings.cart_notes_enable %}
          {% assign noteSize = cart.note | size %}
          <div class="grid__item large--five-twelfths">
            <button type="button" class="text-link cart__note-add{% if noteSize > 0 %} is-hidden{% endif %}">
              {{ 'cart.label.add_note' | t }}
            </button>
            <div class="cart__note{% if noteSize > 0 %} is-active{% endif %}">
              <label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
            </div>
          </div>
        {% endif %}
        <div class="grid__item text-right{% if settings.cart_notes_enable %} large--seven-twelfths{% endif %}">
          <p>
            <span class="cart__subtotal-title"><span id="bk-cart-subtotal-label">{{ 'cart.general.subtotal' | t }}</span></span>
            <span class="h5 cart__subtotal"><span id="bk-cart-subtotal-price">{{ cart.total_price | money }}</span></span><br>
            {% if cart.total_discounts > 0 %}
              {% assign savings = cart.total_discounts | money %}
              <small class="cart-subtotal__savings">{{ 'cart.general.savings_html' | t: price: savings }}</small>
            {% endif %}
          </p>
          <p><em>{{ 'cart.general.shipping_at_checkout' | t }}</em></p>
          <input type="submit" name="update" class="btn--secondary update-cart" value="{{ 'cart.general.update' | t }}">
          <input type="submit" name="checkout" class="btn" value="{{ 'cart.general.checkout' | t }}">
{% comment %} Design change on May 06, 2017 by R Murphy at Shopify {% endcomment %}
    {% comment %}      
          {% if additional_checkout_buttons %}
            <div class="cart__additional_checkout_buttons">{{ content_for_additional_checkout_buttons }}</div>
          {% endif %}
          {% endcomment %}
        </div>
            <img src="{{'Payment_logos_combined_50procent_2.png' | asset_url }}" alt="payments securely processed">
      </div>

    </div>

  </form>

{% else %}
  {% comment %}
    The cart is empty
  {% endcomment %}
  <h1 class="h2">{{ 'cart.general.title' | t }}</h1>
  <p>{{ 'cart.general.empty' | t }}</p>
  <p>{{ 'cart.general.continue_browsing_html' | t }}</p>
{% endif %}

 

 

0 Likes
Highlighted
New Member
1 0 0

Hi there, I am wanting to do this also. Did you find out how? If so, could you please let me know what you did? Thanks so much.

0 Likes