Anpassa visningsvaluta

Du kan skräddarsy presentationen av utländska valutor för att passa dina behov och preferenser genom att anpassa valutavisningsformatet i din JavaScript-integration.

Valutavisningsformat 

Hello stöder följande valutavisningsformat:

• symbol (standard) - Visa en lokaliserad valutasymbol (t.ex. €123).
• code - Använd ISO-valutakoden (t.ex. 123 USD).
• name - Visa det lokaliserade valutans namnet (t.ex. 123 dollar).

Du kan överskrida valutavisningsformatet genom att använda egenskapen overrideCurrencyFormat i Zonos.init metoden. Denna egenskap accepterar ett av de valutavisningsformat som listas ovan. Överskrivning av valutavisningsformatet gäller både Hello och Zonos Checkout.

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

Använda en anpassad valutakonverterare 

För fall när det helt enkelt inte räcker att åsidosätta valutavisningsformatet för din webbplats behov, kan du använda en anpassad valutakonverterare för att hantera konverteringen och formateringen av utländska valutabelopp. Denna metod ger dig full kontroll över hur valutabelopp visas på din webbplats.

För att använda en anpassad valutakonverterare måste du implementera currencyConverter-funktionen i Zonos.init-metoden. Denna funktion bör acceptera följande parametrar:

• convertAndFormat - En funktion som konverterar och formaterar valutabeloppet.
• originalAmount - Det ursprungliga valutabeloppet.
• selector - Väljaren för elementet som innehåller valutabeloppet.

När den är närvarande kommer currencyConverter-funktionen att loopa över alla matchande prisväljare på din webbplats och tillämpa den anpassade valutakonverteringslogiken på var och en.

Ett vanligt användningsfall för att använda en anpassad valutakonverterarfunktion är när du har priser som visas i en rullgardinsmeny eller andra komplexa HTML-element. Till exempel, om du har en rullgardinsmeny med priser som visas bredvid varje alternativ, såsom:

<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>

I sådana fall kan du inte helt enkelt välja priset direkt eftersom det finns ytterligare text bredvid det. Genom att använda en anpassad valutakonverterare kan du extrahera priset från elementet och tillämpa valutakonverteringslogiken på det.

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