С помощью кода Wix Velo вы можете создать функционал конвертера валют на своем сайте: перевод определенной суммы денег из одной валюты в другую.

Описание

В этом примере посетители сайта выбирают исходную и целевую валюты и указывают сумму для конвертации. После запуска преобразования отображается целевая сумма и время операции.

Код

Главная

import { currencies } from 'wix-pay';


$w.onReady(function () {
    initDropdowns();
    $w('#convertButton').onClick(() => conversionHandler());
});


async function initDropdowns() {
    const listOfAllCurrencies = await currencies.getAllCurrencies();
    const optionsArray = formAsDropdownOptions(listOfAllCurrencies);
    optionsArray.sort((option1, option2) => compareOptionsAlphabetically(option1.label, option2.label));
    $w('#dropdownFrom').options = optionsArray;
    $w('#dropdownTo').options = optionsArray;
}


function formAsDropdownOptions(listOfAllCurrencies) {
    const optionsArray = listOfAllCurrencies.map((currencyItem) => {
        return {
            'value': currencyItem.code,
            'label': currencyItem.code,
        }
    });
    return optionsArray;
}


function compareOptionsAlphabetically(label1, label2) {
    if (label1 > label2) {
        return 1;
    }
    return -1;
}


async function conversionHandler() {
    const amount = Number($w('#amountInput').value);
    const fromCurrency = $w('#dropdownFrom').value;
    const toCurrency = $w('#dropdownTo').value;
    const convertionResult = await currencies.currencyConverter.convertAmounts({
        'amounts': [amount],
        'from': fromCurrency,
        'to': toCurrency
    });
    const result = String((convertionResult.amounts[0]));
    const timestamp = String(convertionResult.timestamp);
    $w('#resultInput').value = result;
    $w('#timestampText').text = `Rates are valid to \n ${timestamp}`;
    $w('#timestampText').expand();
}

Элементы страницы

На нашем сайте мы добавили следующие элементы:

2 окна ввода текста: для ввода суммы для конвертации и для отображения конвертированной суммы в целевой валюте

2 раскрывающихся списка: для выбора исходной и целевой валют

Кнопка: для запуска преобразования

Текстовый элемент: для отображения временной метки коэффициента конверсии.

Код страницы

Наш код делает следующее:

  1. Импортирует API валют из модуля wix-pay.

  2. После загрузки отображаются все валюты, которые Wix поддерживает для конвертации.

  3. Сортировка валюты по алфавиту.

← Все руководства по WixНайти другой материал →