Personalizar a moeda de exibição

Você pode adaptar a apresentação de moedas estrangeiras para atender às suas necessidades e preferências personalizando o formato de exibição da moeda em sua integração JavaScript.

Formatos de exibição de moeda 

Hello suporta os seguintes formatos de exibição de moeda:

• symbol (padrão) - Exibe um símbolo de moeda localizado (por exemplo, €123).
• code - Usa o código de moeda ISO (por exemplo, 123 USD).
• name - Exibe o nome da moeda localizada (por exemplo, 123 dólares).

Você pode substituir o formato de exibição da moeda usando a propriedade overrideCurrencyFormat no método Zonos.init. Esta propriedade aceita um dos formatos de exibição de moeda listados acima. A substituição do formato de exibição da moeda se aplica tanto ao Hello quanto ao Zonos Checkout.

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

Usando um conversor de moeda personalizado 

Para casos em que simplesmente substituir o formato de exibição da moeda não é suficiente para as necessidades do seu site, você pode usar um conversor de moeda personalizado para lidar com a conversão e formatação de valores em moeda estrangeira. Essa abordagem permite que você tenha controle total sobre como os valores em moeda são exibidos em seu site.

Para usar um conversor de moeda personalizado, você precisa implementar a função currencyConverter no método Zonos.init. Essa função deve aceitar os seguintes parâmetros:

• convertAndFormat - Uma função que converte e formata o valor da moeda.
• originalAmount - O valor original da moeda.
• selector - O seletor do elemento que contém o valor da moeda.

Quando presente, a função currencyConverter irá percorrer todos os seletores de preço correspondentes em seu site e aplicar a lógica de conversão de moeda personalizada a cada um deles.

Um caso de uso comum para usar uma função de conversor de moeda personalizada é quando você tem preços exibidos em um menu suspenso ou outros elementos HTML complexos. Por exemplo, se você tiver um menu suspenso com preços exibidos ao lado de cada opção, como:

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

Em casos como este, você não pode simplesmente selecionar o preço diretamente, pois há texto adicional ao lado. Ao usar um conversor de moeda personalizado, você pode extrair o preço do elemento e aplicar a lógica de conversão de moeda a ele.

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