money_with_currency Javascript version

Anders_Søgaard
Tourist
11 0 2

Hello.

At my product page it automaticly updates the price upon selection of variant.

But i want it to show the price with currency.

My code is currently:

jQuery('#product-price').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "{{ shop.money_format }}") + '</span>' );

This code shows the price, WIHTOUT currency.

Developer at Youfront webbureau - https://youfront.dk/
Replies 5 (5)
Caroline_Schnap
Shopify Staff
5705 1 357

Hi Anders!

Replace with:

jQuery('#product-price').html('<span class="product-price">'+ Shopify.formatMoney(variant.price, "{{ shop.money_with_currency_format }}") + '</span>' );

Let me know how that goes!

Caroline_Schnap | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Anders_Søgaard
Tourist
11 0 2

Thanks.

Developer at Youfront webbureau - https://youfront.dk/
sillycube
Shopify Partner
558 14 86

What is the most updated version in 2021?

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview
slunt32
New Member
1 0 4

I managed to achieve this by doing:

 

var price = Intl.NumberFormat(Shopify.locale, {
style: 'currency',
currency: Shopify.currency.active
}).format(productPrice);

 

where 

 

productPrice​

is the price you are passing in.

 

markmead
New Member
2 0 0

Building off of @slunt32 answer, here's an approach using Alpine JS.

 

Alpine.directive('money', (el, { expression }, { evaluateLater, effect }) => {
  let getValue = evaluateLater(expression)

  effect(() => {
    getValue((value) => {
      let money = value / 100
      let formattedPrice = Intl.NumberFormat(Shopify.locale, {
        style: 'currency',
        currency: Shopify.currency.active,
      }).format(money)

      el.innerText = formattedPrice
    })
  })
})

 

 

This will allow you to write

 

<p x-money="product.price"></p>