You saved ###$ in cart and in receipt

New Member
20 0 0

Is it possible to add something like You saved "ammount"$ to the cart and to the order receipt?

 

Thanks

0 Likes
Shopify Staff
Shopify Staff
100 0 16

Hey there Yulia!

I found a piece of code from a GitHub Gist post by kyleaparker located at this link.

Try adding it to your cart.liquid:

{% assign total_saving = 0 %}
{% for item in cart.items %}
{% if item.variant.compare_at_price > item.variant.price %}
{% capture saving %}{{ item.variant.compare_at_price | minus: item.variant.price }}{% endcapture %}
{% assign total_saving = saving | plus: total_saving %}
{% endif %} 
...rest of cart code within for loop
{% endfor %}

Display saving:

Saving - {{ total_saving | money }}


There's a few other options in the comments of that GitHub post with options for quantity, $-saved versus %-saved, etc. - so it's definitely worth checking out to see if it works for your theme :).

Cynn | Guru @ Shopify

0 Likes
New Member
1 0 0

Hi @Cynthia D.

I am unable to find where and how to edit my cart page code. 

Kindly guide. I wish to show compared at, final price, and savings to customers.

I'm using Debut theme.

Thanks in advance

0 Likes
New Member
1 0 0

Hi Cynthia, and everyone else, how are you?
I'm new to Shopify. Would you know how to use this in a cart drawer? I do not have a cart.liquid since I don't use a cart drawer instaed of a cart page (Pop theme), I do have an ajax-cart-template.liquid from where I can edit the drawer. I tried including the code in the position I wanted the data to display but nothing is shown, the front remains unchanged.

What could I Be doing wrong? Anyone?

Thanks in advanced for any help provided!

This is the code in my ajax-cart-template.liquid:

{% comment %}

  This snippet provides the default handlebars.js templates for
  the ajaxify cart plugin. Use the raw liquid tags to keep the
  handlebar.js template tags as available hooks.

{% endcomment %}
  <script id="cartTemplate" type="text/template">

  <h1 class="text-center">{{ 'cart.general.title' | t }}</h1>

  {% raw %}
    <form action="/cart" method="post" novalidate>
      <div class="ajaxifyCart--products">
        {{#items}}
        <div class="cart__row" data-line="{{line}}">
          <div class="grid">
            <div class="grid-item medium--two-fifths large--one-fifth text-center">
              <a href="{{url}}" class="ajaxCart--product-image"><img src="{{img}}" alt=""></a>

              <p class="cart__remove"><a href="/cart/change?line={{line}}&amp;quantity=0" class="ajaxifyCart--remove" data-line="{{line}}"><span class="icon icon-cross2" aria-hidden="true"></span> Remove</a></p>
            </div>
            <div class="grid-item medium--three-fifths large--four-fifths">
              <p class="cart__product"><a href="{{ url }}">
                {{name}}
              </a>
              <br><small>{{ variation }}</small></p>

              <div class="grid">

                <div class="grid-item one-half">
                  {% endraw %}<span class="cart__mini-labels">{{ 'cart.label.quantity' | t }}</span>{% raw %}
                  <div class="ajaxifyCart--qty">
                    <input type="text" name="updates[]" class="ajaxifyCart--num" value="{{itemQty}}" min="0" data-id="{{key}}" data-line="{{line}}"  aria-label="quantity" pattern="[0-9]*">
                    <span class="ajaxifyCart--qty-adjuster ajaxifyCart--add" data-id="{{key}}" data-line="{{line}}" data-qty="{{itemAdd}}"><span class="add">+</span></span>
                    <span class="ajaxifyCart--qty-adjuster ajaxifyCart--minus" data-id="{{key}}" data-line="{{line}}" data-qty="{{itemMinus}}"><span class="minus">-</span></span>
                  </div>
                </div>

                <div class="grid-item one-half text-right">
                  {% endraw %}<span class="cart__mini-labels">{{ 'cart.label.total' | t }}</span>{% raw %}
                  <p>{{ price }}</p>
                </div>

              </div>
            </div>
          </div>
        </div>
        {{/items}}
      </div>

      <div class="cart__row text-center large--text-right">
        {% endraw %}
        <h6>{{ 'cart.general.subtotal' | t }}
        {% raw %}
            {% assign total_saving = 0 %}
                {% for item in cart.items %}
                    {% if item.variant.compare_at_price > item.variant.price %}
                        {% capture saving %}{{ item.variant.compare_at_price | minus: item.variant.price }}{% endcapture %}
                        {% assign total_saving = saving | plus: total_saving %}
                    {% endif %} 
                        ...rest of cart code within for loop
                    {% endfor %}

                    Display saving:

                    Saving - {{ total_saving | money }}
                    
        <span class="cart__subtotal">{{ totalPrice }}</span></h6>
      </div>

      <div class="cart__row">
        <div class="grid">

          {% endraw %}
        
          {% if settings.cart_notes_enable %}
            <div class="grid-item large--one-half text-center large--text-left">
              <label for="cartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" class="input-full cart__instructions" id="cartSpecialInstructions">{{ cart.note }}</textarea>
            </div>
          {% endif %}
          {% raw %}

          <div class="grid-item text-center large--text-right {% endraw %}{% if settings.cart_notes_enable %}large--one-half{% endif %}{% raw %}">

            <input type="submit" class="{{btnClass}}" name="checkout" value="Checkout">

          </div>

        </div>
      </div>
    </form>
  {% endraw %}
  </script>
  <script id="drawerTemplate" type="text/template">
  {% raw %}
    <div id="ajaxifyDrawer" class="ajaxify-drawer">
      <div id="ajaxifyCart" class="ajaxifyCart--content {{wrapperClass}}"></div>
    </div>
  {% endraw %}
  </script>
  <script id="modalTemplate" type="text/template">
  {% raw %}
    <div id="ajaxifyModal" class="ajaxify-modal">
      <div id="ajaxifyCart" class="ajaxifyCart--content"></div>
    </div>
  {% endraw %}
  </script>
  <script id="ajaxifyQty" type="text/template">
  {% raw %}
    <div class="ajaxifyCart--qty">
      <input type="text" class="ajaxifyCart--num" value="{{itemQty}}" min="0" data-id="{{key}}" data-line="{{line}}" aria-label="quantity" pattern="[0-9]*">
      <span class="ajaxifyCart--qty-adjuster ajaxifyCart--add" data-id="{{key}}" data-line="{{line}}" data-qty="{{itemAdd}}">
        <span class="add" aria-hidden="true">+</span>
        <span class="visuallyhidden">{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}</span>
      </span>
      <span class="ajaxifyCart--qty-adjuster ajaxifyCart--minus" data-id="{{key}}" data-line="{{line}}" data-qty="{{itemMinus}}">
        <span class="minus" aria-hidden="true">-</span>
        <span class="visuallyhidden">{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}</span>
      </span>
    </div>
  {% endraw %}
  </script>
  <script id="jsQty" type="text/template">
  {% raw %}
    <div class="js-qty">
      <input type="text" class="js--num" value="{{itemQty}}" min="1" data-id="{{key}}" aria-label="quantity" pattern="[0-9]*" name="{{inputName}}" id="{{inputId}}">
      <span class="js--qty-adjuster js--add" data-id="{{key}}" data-qty="{{itemAdd}}">
        <span class="add" aria-hidden="true">+</span>
        <span class="visuallyhidden">{% endraw %}{{ 'cart.general.increase_quantity' | t }}{% raw %}</span>
      </span>
      <span class="js--qty-adjuster js--minus" data-id="{{key}}" data-qty="{{itemMinus}}">
        <span class="minus" aria-hidden="true">-</span>
        <span class="visuallyhidden">{% endraw %}{{ 'cart.general.reduce_quantity' | t }}{% raw %}</span>
      </span>
    </div>
  {% endraw %}
  </script>
 

0 Likes
New Member
4 0 0

Where do you put this?

0 Likes