表示通貨のカスタマイズ

JavaScript統合で通貨表示形式をカスタマイズすることにより、外国通貨の表示をニーズや好みに合わせて調整できます。

通貨表示形式 

Helloは、以下の通貨表示形式をサポートしています：

• symbol (デフォルト) - ローカライズされた通貨記号を表示します（例：€123）。
• code - ISO通貨コードを使用します（例：123 USD）。
• name - ローカライズされた通貨名を表示します（例：123 dollars）。

Zonos.initメソッドのoverrideCurrencyFormatプロパティを使用することで、通貨表示形式をオーバーライドできます。このプロパティは、上記の通貨表示形式のいずれかを受け入れます。通貨表示形式のオーバーライドは、HelloとZonos Checkoutの両方に適用されます。

Zonos.init({
  overrideCurrencyFormat: 'code',
});

カスタム通貨コンバータの使用 

通貨表示形式を単に上書きするだけではサイトのニーズに十分でない場合には、カスタム通貨コンバータを使用して外国通貨の金額の変換とフォーマットを処理できます。このアプローチにより、サイト上で通貨金額がどのように表示されるかを完全に制御できます。

カスタム通貨コンバータを使用するには、Zonos.init メソッド内で currencyConverter 関数を実装する必要があります。この関数は、以下のパラメータを受け入れる必要があります：

• convertAndFormat - 通貨金額を変換しフォーマットする関数。
• originalAmount - 元の通貨金額。
• selector - 通貨金額を含む要素のセレクタ。

currencyConverter 関数が存在する場合、サイト上のすべての一致する価格セレクタをループし、各セレクタにカスタム通貨変換ロジックを適用します。

カスタム通貨コンバータ関数を使用する一般的なユースケースは、ドロップダウンメニューやその他の複雑なHTML要素に価格が表示されている場合です。たとえば、各オプションの横に価格が表示されているドロップダウンメニューがある場合、次のようになります：

<select title="Option">
  <option className="money" data-select-option="Blue" value="option1">
    Blue - $1.99
  </option>
  <option className="money" data-select-option="Red" value="option2">
    Red - $2.00
  </option>
  <option className="money" data-select-option="Yellow" value="option3">
    Yellow - $3.59
  </option>
</select>

このような場合、価格を直接選択することはできません。なぜなら、その隣に追加のテキストがあるからです。カスタム通貨コンバーターを使用することで、要素から価格を抽出し、その価格に通貨変換ロジックを適用することができます。

window.Zonos.init({
  currencyConverter: ({ convertAndFormat, originalAmount, selector }) => {
    const optionValue = selector.getAttribute('data-select-option');
    if (optionValue) {
      return `${optionValue} -  ${convertAndFormat(originalAmount)}`;
    }
    return convertAndFormat(originalAmount);
  },
});