Docs
Money

Money

Demonstrates how to format prices using Zermatt in a Magento template.

Zermatt implements its own version of currency formatting. This avoids relying on Magento formatPrice() frontend method.

Zermatt implementation uses the native Javascript Intl.NumberFormat method (Intl.NumberFormat) configured with the locale and currency of the current Magento store.

Example with a price for an en_US site using the dollar currency:

<?php
$price = $block->getProduct()->getFinalPrice();
?>
<div x-data="{}">
    <div>Unformatted price: <?= $price ?></div>
    <div>Formatted price: <span x-text="Zermatt.Money.formatPrice(<?= $price ?>)"></span></div>
</div>

The same example using a module:

The template file:

<?php
$price = $block->getProduct()->getFinalPrice();
?>
<div x-data="Zermatt.Module('SandBox_PriceExample', {price: <?= $price ?>})">
    <div>Unformatted price: <?= $price ?></div>
    <div>Formatted price: <span x-text="myFormattedPrice()"></span></div>
</div>

The JS file of the SandBox_PriceExample module:

export default {
    price: null,
    myFormattedPrice() {
        return Zermatt.Money.formatPrice(this.price)
    }
}

With custom locale and/or currency

It is possible to override the locale and/or the currency used when formatting price.

Override locale

Zermatt.Money.formatPrice(this.price, {locale: 'fr_FR'})
// 29,99 $US

Override currency

Zermatt.Money.formatPrice(this.price, {currency: 'EUR'})
// €29.99

Override locale and currency

Zermatt.Money.formatPrice(this.price, {locale: 'fr_FR', currency: 'EUR'})
// 29,99 €
TranslationEvents