Solved

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

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

Accepted Solution (1)

KarlOffenberger
Shopify Partner
1873 184 900

This is an accepted solution.

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!

View solution in original post

Replies 12 (12)

KarlOffenberger
Shopify Partner
1873 184 900

This is an accepted solution.

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!

LadyChaoz
Tourist
5 0 1

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

gr8guzzler
Visitor
1 0 0

Hi,

 

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

 

Thanks!

LadyChaoz
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%)"

Hootz
Visitor
3 0 0

Please help 😮 

 

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%)"


 

 

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

Hootz
Visitor
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.


 

Hootz
Visitor
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.


 


 

LadyChaoz
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';

 

GooseOnTheLoose
Visitor
3 0 2

Hi there, 

 

Is there any way to just show the percentage and not the dollar amount? 

manikaran
Visitor
2 0 0

Hi,

The above solution worked for me, but it only worked for product pages. It not working on home page or collection pages.
Is there any other solution to show % on other pages. 

manikaran
Visitor
2 0 0

Hi,

The above solution worked for me, but it only worked for product pages. It not working on the home page or collection pages.
Is there any other solution to show % on other pages?