Personnaliser la devise d'affichage

Vous pouvez adapter la présentation des devises étrangères selon vos besoins et préférences en personnalisant le format d'affichage de la devise dans votre intégration JavaScript.

Formats d'affichage de la devise 

Hello prend en charge les formats d'affichage de devise suivants :

• symbol (par défaut) - Affiche un symbole de devise localisé (par exemple, €123).
• code - Utilise le code de devise ISO (par exemple, 123 USD).
• name - Affiche le nom de la devise localisé (par exemple, 123 dollars).

Vous pouvez remplacer le format d'affichage de la devise en utilisant la propriété overrideCurrencyFormat dans la méthode Zonos.init. Cette propriété accepte l'un des formats d'affichage de devise énumérés ci-dessus. Le remplacement du format d'affichage de la devise s'applique à la fois à Hello et à Zonos Checkout.

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

Utilisation d'un convertisseur de devises personnalisé 

Pour les cas où il ne suffit pas de simplement remplacer le format d'affichage de la devise pour répondre aux besoins de votre site, vous pouvez utiliser un convertisseur de devises personnalisé pour gérer la conversion et le formatage des montants en devises étrangères. Cette approche vous permet d'avoir un contrôle total sur la manière dont les montants en devises sont affichés sur votre site.

Pour utiliser un convertisseur de devises personnalisé, vous devez implémenter la fonction currencyConverter dans la méthode Zonos.init. Cette fonction doit accepter les paramètres suivants :

• convertAndFormat - Une fonction qui convertit et formate le montant en devise.
• originalAmount - Le montant original en devise.
• selector - Le sélecteur de l'élément contenant le montant en devise.

Lorsqu'elle est présente, la fonction currencyConverter parcourra tous les sélecteurs de prix correspondants sur votre site et appliquera la logique de conversion de devises personnalisée à chacun d'eux.

Un cas d'utilisation courant pour utiliser une fonction de convertisseur de devises personnalisé est lorsque vous avez des prix affichés dans un menu déroulant ou d'autres éléments HTML complexes. Par exemple, si vous avez un menu déroulant avec des prix affichés à côté de chaque option, tel que :

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

Dans des cas comme celui-ci, vous ne pouvez pas simplement sélectionner le prix directement car il y a du texte supplémentaire à côté. En utilisant un convertisseur de devises personnalisé, vous pouvez extraire le prix de l'élément et appliquer la logique de conversion de devises à celui-ci.

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