Product price calculations in Shopify Liquid

Question

very new to Shopify Liquid and trying to navigate through the code.

I'm trying to replicate the discount that is appearing here: https://theoodie.com/products/avocado-oodie

I've setup a discount code and assigned it to a collection, I'm then retrieving it in my product template so I know how much to discount. I would like to strike-through the price and then display what the discounted amount will be once the coupon is applied. Trying to work out how I can write the discounted price out though...

Noticed that if I echo product.price, it shows in cents. I've figured out I can divide it and then minus my discount, like below...

 {{ product.price | divided_by: 100 | minus: 20 }}

but the formatting is lacking, no decimal places, and no currency. Is there a particular function/class? that I can run to output the price minus my discount in the same format as the standard product price?

Further to this, how would I strike-through the standard price if I have a discount? I plan to put a little notation like the example website to say this is the price once coupon added.

Cheers!

Answer 1

You can use Liquid's money filters for that:

{{ 145 | money }}

This would render something like "$1.45" (depending on your store's currency settings this might differ on your end).

To make it visually appear as a strike-price you can utilize the HTML strikethrough element:

<s>{{ 145 | money }}</s>

Or with CSS:

<p class="MyClass">{{ 145 | money }}</p>

<style>
  .MyClass {
    text-decoration: line-through;
  }
</style>