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

[MikeCronin]

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

[Ninthony]

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.

[Ninthony]

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?

[MikeCronin]

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

[Ninthony]

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

[MikeCronin]

No worries, @Ninthony, just approved it!

[Ninthony]

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.

[MikeCronin]

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]

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.

[MikeCronin]

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 · 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.

[MikeCronin]

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]

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.