Tùy chỉnh đơn vị tiền tệ hiển thị

Bạn có thể điều chỉnh cách trình bày các loại tiền tệ nước ngoài để phù hợp với nhu cầu và sở thích của bạn bằng cách tùy chỉnh định dạng hiển thị tiền tệ trong tích hợp JavaScript của bạn.

Các định dạng hiển thị tiền tệ 

Hello hỗ trợ các định dạng hiển thị tiền tệ sau:

• symbol (mặc định) - Hiển thị biểu tượng tiền tệ địa phương (ví dụ: €123).
• code - Sử dụng mã tiền tệ ISO (ví dụ: 123 USD).
• name - Hiển thị tên tiền tệ địa phương (ví dụ: 123 dollars).

Bạn có thể ghi đè định dạng hiển thị tiền tệ bằng cách sử dụng thuộc tính overrideCurrencyFormat trong phương thức Zonos.init. Thuộc tính này chấp nhận một trong các định dạng hiển thị tiền tệ được liệt kê ở trên. Việc ghi đè định dạng hiển thị tiền tệ sẽ áp dụng cho cả Hello và Zonos Checkout.

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

Sử dụng bộ chuyển đổi tiền tệ tùy chỉnh 

Đối với những trường hợp mà việc ghi đè định dạng hiển thị tiền tệ đơn giản không đủ cho nhu cầu của trang web của bạn, bạn có thể sử dụng bộ chuyển đổi tiền tệ tùy chỉnh để xử lý việc chuyển đổi và định dạng các khoản tiền tệ nước ngoài. Cách tiếp cận này cho phép bạn kiểm soát hoàn toàn cách các khoản tiền tệ được hiển thị trên trang web của bạn.

Để sử dụng bộ chuyển đổi tiền tệ tùy chỉnh, bạn cần triển khai hàm currencyConverter trong phương thức Zonos.init. Hàm này nên chấp nhận các tham số sau:

• convertAndFormat - Một hàm chuyển đổi và định dạng khoản tiền tệ.
• originalAmount - Khoản tiền tệ gốc.
• selector - Bộ chọn của phần tử chứa khoản tiền tệ.

Khi có mặt, hàm currencyConverter sẽ lặp qua tất cả các bộ chọn giá phù hợp trên trang web của bạn và áp dụng logic chuyển đổi tiền tệ tùy chỉnh cho từng cái.

Một trường hợp sử dụng phổ biến cho việc sử dụng hàm bộ chuyển đổi tiền tệ tùy chỉnh là khi bạn có giá được hiển thị trong menu thả xuống hoặc các phần tử HTML phức tạp khác. Ví dụ, nếu bạn có một menu thả xuống với giá được hiển thị bên cạnh mỗi tùy chọn, chẳng hạn như:

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

Trong những trường hợp như thế này, bạn không thể chỉ đơn giản chọn giá trực tiếp vì có văn bản bổ sung bên cạnh nó. Bằng cách sử dụng một bộ chuyển đổi tiền tệ tùy chỉnh, bạn có thể trích xuất giá từ phần tử và áp dụng logic chuyển đổi tiền tệ cho nó.

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