spz-currency

A price needs to have a currency symbol and currency symbol position to display correctly. But we often only need to write the amount to display the amount correctly. This is because the default value processing is done inside the component. It uses window.SHOPLAZZA to get the default value. The following code is the default value method of the currency-related information obtained inside the component:

const symbol = window.SHOPLAZZA['currency_symbol'] || '$'; // default currency symbol
const symbolPosition = window.SHOPLAZZA['currency_symbol_pos'] || 'left'; // default currency symbol position
const format = window.SHOPLAZZA['money_format'] || 'amount'; // default price format

<spz-currency value="88.8" layout="container"></spz-currency>

<spz-currency value="88.8" code="USD" layout="container"></spz-currency>

Specifies a number to convert to price. Such as 99.98 etc.

Specifies the code of a currency. Such as USD etc. Currency related information will be obtained from the /api/currency.

Specifies the conversion format of the currency. It has the following values:

• amount: default Keep two decimal places and use a . to separate the decimal and non-decimal parts. Use a , to separate every three digits of the non-decimal part, such as $188,983.20.
• amount_no_decimals: Without decimals, use a , to separate every three digits of the non-decimal part, such as $188,983.
• amount_with_comma_separator: Keep two decimal places and use a , to separate the decimal and non-decimal parts. Use a . to separate every three digits of the non-decimal part, such as $188.983,20.
• amount_no_decimals_with_comma_separator: Without decimals, use a . to separate every three digits of the non-decimal part, such as $188.983.
• amount_with_apostrophe_separator: Keep two decimal places and use a . to separate the decimal and non-decimal parts. Use a ' to separate every three digits of the non-decimal part, such as $188'983.20.

Specifies the symbol of a currency.

Specifies the symbol position of a currency.

Adds a specified class to the inner <div class="money"></div>.

<spz-currency layout="container" value="188983.2" container-class="product-info-price"></spz-currency>

<!-- Render results: -->
<spz-currency layout="container" value="188983.2" container-class="product-info-price" class="i-spzhtml-element i-spzhtml-layout-container i-spzhtml-built i-spzhtml-layout" i-spzhtml-layout="container">
  <div class="money product-info-price">$188,983.20</div>
</spz-currency>