Personalizar la moneda de visualización

Puedes adaptar la presentación de las monedas extranjeras para que se ajusten a tus necesidades y preferencias personalizando el formato de visualización de la moneda en tu integración de JavaScript.

Formatos de visualización de moneda 

Hello admite los siguientes formatos de visualización de moneda:

• symbol (predeterminado) - Muestra un símbolo de moneda localizado, por ejemplo, €123.
• code - Utiliza el código de moneda ISO, por ejemplo, 123 USD.
• name - Muestra el nombre de la moneda localizada, por ejemplo, 123 dólares.

Puedes sobrescribir el formato de visualización de la moneda utilizando la propiedad overrideCurrencyFormat en el método Zonos.init. Esta propiedad acepta uno de los formatos de visualización de moneda listados anteriormente. Sobrescribir el formato de visualización de la moneda se aplica tanto a Hello como a Zonos Checkout.

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

Uso de un convertidor de divisas personalizado 

Para los casos en que simplemente anular el formato de visualización de divisas no es suficiente para las necesidades de su sitio, puede utilizar un convertidor de divisas personalizado para manejar la conversión y el formato de las cantidades de divisas extranjeras. Este enfoque le permite tener un control total sobre cómo se muestran las cantidades de divisas en su sitio.

Para utilizar un convertidor de divisas personalizado, necesita implementar la función currencyConverter en el método Zonos.init. Esta función debe aceptar los siguientes parámetros:

• convertAndFormat - Una función que convierte y formatea la cantidad de divisa.
• originalAmount - La cantidad original de divisa.
• selector - El selector del elemento que contiene la cantidad de divisa.

Cuando está presente, la función currencyConverter recorrerá todos los selectores de precio coincidentes en su sitio y aplicará la lógica de conversión de divisas personalizada a cada uno.

Un caso de uso común para utilizar una función de convertidor de divisas personalizada es cuando tiene precios mostrados en un menú desplegable u otros elementos HTML complejos. Por ejemplo, si tiene un menú desplegable con precios mostrados junto a cada opción, 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>

En casos como este, no puedes simplemente seleccionar el precio directamente ya que hay texto adicional al lado. Al utilizar un convertidor de divisas personalizado, puedes extraer el precio del elemento y aplicar la lógica de conversión de divisas a este.

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