Supply Theme: Change saved amount from $ to % on product page

Solved
Tourist
5 0 1

I'm trying to change the savings amount to percentages from dollars, and I'm having problems with it showing up correctly on the product page. I updated the price-sale.liquid, so it shows correctly on the collections pages, but when I go to the product pages it will briefly show the correct text and then when the compare at price gets updated so does the savings amount, and it updates to the $ version. 

Here is the price-sale.liquid:

{% assign saved_amount = compare_price | minus: product_price | times: 100 | divided_by: compare_price | round %}

{% comment %}
{% if shop.money_format contains 'money' %}
  {% assign saved_amount = saved_amount | money %}
{% else %}
  {% assign saved_amount = saved_amount | money_without_trailing_zeros %}
{% endif %}

{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{% endcomment %}

{% if compare_price > product_price %}
  Save {{ compare_price | minus: product_price | times: 100 | divided_by: compare_price | round }}%
{% endif %}

I've looked in product-grid-item.liquid, product-template.liquid, and product-list-item.liquid to see if they overwrite that text, but they all call:

{% assign compare_price = product.compare_at_price %}
{% assign product_price = product.price %}
{% include 'price-sale' %}

It feels a lot like some of the original code was duplicated, but I have no idea where to look. 

0 Likes

Success.

Shopify Partner
1843 172 546

Hello!

 

That's Javascript tripping you ;-) Basically, on product pages you have variants and as you change your options, Javascript makes sure the prices etc. are updated accordingly in the HTML. Have a look at your Assets / theme.js.liquid for these lines

 

        // Also update and show the product's compare price if necessary
        if ( variant.compare_at_price > variant.price ) {
          var priceSaving = timber.formatSaleTag( Shopify.formatMoney(variant.compare_at_price - variant.price, moneyFormat) );
          // priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';
          this.settings.selectors.$comparePrice.html("Save [$]".replace('[$]', priceSaving)).show();
        } else {
          this.settings.selectors.$comparePrice.hide();
        }

And update priceSaving accordingly (or let me know if you need JS help).

 

Best wishes!

I turn coffee in to code - since 1998
1 Like
Tourist
5 0 1

Thanks so much! That is exactly what I needed to fix!

0 Likes
New Member
1 0 0

Hi,

 

Can you let me know what changes you did in  Assets / theme.js.liquid to make it work?

 

Thanks!

0 Likes
Tourist
5 0 1

So, it ended up looking like this:

// Also update and show the product's compare price if necessary
        if ( variant.compare_at_price > variant.price ) {
          var priceSaving = timber.formatSaleTag( Shopify.formatMoney(variant.compare_at_price - variant.price, moneyFormat) );
           priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';
          this.settings.selectors.$comparePrice.html({{ 'products.general.save_html' | t: saved_amount: '[$]' | json }}.replace('[$]', priceSaving)).show();
        } else {
          this.settings.selectors.$comparePrice.hide();
        }

And it read "Save $x (y%)"

0 Likes
New Member
3 0 0

Please help :O 

 

I copied the very first code above into price-sale.liquid and it works on the category page. But to show it on product page I just cant find the code in assets. 

Where do I put the second code to display on product page?  I dont know where to put it


@LadyChaoz wrote:

So, it ended up looking like this:

// Also update and show the product's compare price if necessary
        if ( variant.compare_at_price > variant.price ) {
          var priceSaving = timber.formatSaleTag( Shopify.formatMoney(variant.compare_at_price - variant.price, moneyFormat) );
           priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';
          this.settings.selectors.$comparePrice.html({{ 'products.general.save_html' | t: saved_amount: '[$]' | json }}.replace('[$]', priceSaving)).show();
        } else {
          this.settings.selectors.$comparePrice.hide();
        }

And it read "Save $x (y%)"


 

 

0 Likes
Tourist
5 0 1

Assets / theme.js.liquid 

Look for that comment. (You can use ctrl+f to search) The code should be pretty similar, as I pretty much just changed the inside of the formula.

1 Like
New Member
3 0 0

I know how to search for something..Its not there... in my assets there is no such code


@LadyChaoz wrote:

Assets / theme.js.liquid 

Look for that comment. (You can use ctrl+f to search) The code should be pretty similar, as I pretty much just changed the inside of the formula.


 

0 Likes
New Member
3 0 0

actually you were right! I found it now! But still am in help because of the phrasing, can I make it to just % and a costume phrase?


@Hootz wrote:

I know how to search for something..Its not there... in my assets there is no such code


@LadyChaoz wrote:

Assets / theme.js.liquid 

Look for that comment. (You can use ctrl+f to search) The code should be pretty similar, as I pretty much just changed the inside of the formula.


 


 

0 Likes
Tourist
5 0 1

You sure can.

These two lines make the string you want to display. The first one is the $$ saved, and the second one is the %. 

 

var priceSaving = timber.formatSaleTag( Shopify.formatMoney(variant.compare_at_price - variant.price, moneyFormat) );
           priceSaving += ' (' + ( (variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0) + '%)';

This line displays 'save' followed by your string.

 

 

this.settings.selectors.$comparePrice.html({{ 'products.general.save_html' | t: saved_amount: '[$]' | json }}.replace('[$]', priceSaving)).show();

So, if you want it to say "Save x% custom phase" you would change it to this:

var priceSaving = timber.formatSaleTag( Shopify.formatMoney((variant.compare_at_price - variant.price)*100/(variant.compare_at_price) ).toFixed(0), percentFormat) );
priceSaving += ' insert a custom phase';

 

0 Likes