Solved

Would like my store's cart to display "You saved $XX (or) XX%" message within the cart

MikeCronin
Excursionist
30 0 3

I found some aging code online that, once upon a time, did this pretty well by dropping it right into the cart.liquid file. Of course, this was years ago and that doesn't work anymore. But it's my understanding that with a few tweaks this can be done pretty easily. Just need some help making that happen.

My site is https://designedbysoon.com/

Here is the code. Wondering if this can be tuned-up to work with my site or at least give someone a clear idea of what I'm looking for; I'm sure present-day there is some better code that can get this done relatively easily as I see it on Shopify stores all the time. The site uses a cart drawer by the ways which I have also seen feature what I am looking for.

{% 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 }}

 

Accepted Solution (1)
Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

Yeah I fixed it back to using the minified javascript for you. I changed the hex code in the CSS file too. You're all good to go.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 12 (12)

Ninthony
Shopify Partner
2329 350 1023

Seems to work fine for me, I changed it a little because I prefer to use {% assign %} to capture, and I also took into account if there is more quantity for each line item, you may just not know where to put everything:

{% assign total_saving = 0 %} // make sure to assign the total saving to 0 outside of the forloop
{%- for item in cart.items -%} // put the rest of the conditions inside the forloop
  {% if item.variant.compare_at_price > item.variant.price %}
    {% assign saving = item.variant.compare_at_price | minus: item.variant.price %}
    {% if item.quantity > 1 %}
      {% assign saving = saving | times: item.quantity %}
    {% endif %}
      {% assign total_saving = saving | plus: total_saving %}
    {% endif %}
{% endfor %}

{{ total_saving | money }} // place this outside the forloop.

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Ninthony
Shopify Partner
2329 350 1023

Whoops, didnt read the whole comment. You're using a cart drawer, that'll probably require a javascript solution. I might be able to get it figured out for you, I would need to request access to your themes though. Would that be ok?

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
MikeCronin
Excursionist
30 0 3

Absolutely, I appreciate it. Go ahead and make the request @Ninthony 

Ninthony
Shopify Partner
2329 350 1023

Alright I sent the request. Sorry for the delay, it was the end of the work day yesterday and it just slipped my mind.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
MikeCronin
Excursionist
30 0 3

No worries, @Ninthony, just approved it!

Ninthony
Shopify Partner
2329 350 1023

Phew, figured it out. It was actually a lot simpler than I thought, I just had to track down exactly what was going on. I could see that you had a compare at price in your cart drawer, and was wondering how the hell they were getting that information. If you get the cart info with javascript, for some reason the line items don't have a compare at price property so it didn't make sense to me how they were getting it. What they were actually doing is making an ajax call to an alternative cart template and pulling the information that way. So if you want to make changes to your cart drawer, you can make them in the cart.ajax.liquid template in your templates folder.  Go ahead and go to the Ninthony Editing theme and preview it. Add some stuff to the cart with compare at prices and then check your cart drawer, total savings will be underneath the subtotal. I didn't style it or anything, so if you want it to look a certain way let me know. When all is done I'll have to minimize the javascript again and add it back in there so it doesnt hurt your page speed.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
MikeCronin
Excursionist
30 0 3

We love this!

How can we customize this ourselves? For instance, put the savings line above the subtotal, make the savings line purple, change "TOTAL SAVINGS" to "YOU SAVED", etc.

Again thanks for the support on this. You can go ahed and do whatever you need to do for speed optimization before publishing this draft as our final site template.

Ninthony
Shopify Partner
2329 350 1023

If you open cart.ajax.liquid in your templates folder and scroll to line 235 that's where I made the changes. I already changed it to YOU SAVED for you and added a class name called "total-savings" to the element. You can reference that at the end of your theme.scss.liquid file in your assets folder, I changed the color to purple for you. Feel free to publish whenever.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
MikeCronin
Excursionist
30 0 3

Copy, checking this out right now. @Ninthony 

Were you able to minimize the javascript and add it back in so it doesn't hurt the page speed? Just wanna make sure before I hit publish.

Fastest/easiest way possible to make this "YOU SAVED              $XX" line of text the matching purple scheme we have throughout the site? Hex code is #8224E3.

Thanks!

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

Yeah I fixed it back to using the minified javascript for you. I changed the hex code in the CSS file too. You're all good to go.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
MikeCronin
Excursionist
30 0 3

Last question, where would I go to edit that color's hex code? Like which CSS file?

I'd like to now possibly switch to red now that's why... if you wouldn't mind explaining the way & I'll figure out the rest!

Many thanks again!

Ninthony
Shopify Partner
2329 350 1023

It's at the bottom of your theme.scss.liquid file. Or at least it was when I edited it. Sorry it took so long to respond, been away all week.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄