Cкрипт для автоматической конвертации валюты на Тильде

Не нашли подходящего решения? Мы можем доработать скрипт под ваши нужды или разработать необходимый скрипт с нуля. Если вам нужен конвертер валют, виджет для Тильды или калькулятор пересчета валют, напишите нам в Telegram. Обсудим вашу задачу и предложим варианты реализации!

Связаться

1. Главный функционал: загрузка курса валют

Что делает:

Отправляет запрос на API для получения курса валют (в данном случае доллар к белорусскому рублю).
После успешного ответа вызывает функцию, которая обновляет цены на сайте.

let exchangeRateFetched = false;
	function getExchangeRate() {
		fetch("https://api.nbrb.by/exrates/rates/USD?parammode=2")
			.then((response) => response.json())
			.then((data) => {
				const officialRate = data.Cur_OfficialRate;
				if (!exchangeRateFetched) {
					createNewPriceBlock(officialRate);
					exchangeRateFetched = true;
				}
			})
			.catch((error) => console.error("Ошибка при получении курса обмена:", error));
	}

2. Отображение новой цены в карточках товаров

Что делает:

Берет цену товара в исходной валюте (например, в долларах).
Умножает ее на курс валют и добавляет результат в интерфейс (в белорусских рублях).

Фишка: Добавляет новый блок с пересчитанной ценой, не удаляя оригинальную.

function createNewPriceBlock(rate) {
		const priceBlocks = document.querySelectorAll(".t-store__card__price");
		priceBlocks.forEach((block) => {
			const blockValue = block.querySelector(".js-store-prod-price-val").textContent;
			let newBlock = block.querySelector(".js-new-price");
			if (!newBlock) {
				newBlock = document.createElement("div");
				newBlock.className = "js-new-price js-product-price js-store-prod-price-val t-store__card__price-value";
				newBlock.style.marginLeft = "20px";
				newBlock.classList.add("js-new-price");
				block.appendChild(newBlock);
			}
			const newPrice = (Number(blockValue.replace(/s/g, "").replace(",", ".")) * rate).toFixed(2);

			newBlock.innerHTML = `≈ ${newPrice} BYN`;
		});
	}

3. Работа с модальными окнами (поп-апами)

Что делает:

Следит за изменениями в классах модальных окон.
Если окно открывается, обновляет цены внутри него с помощью функции getExchangeRatePopup ().

function setupPopupObserver(popupTarget) {
		let isPopupOpen = false;
		const popupObserver = new MutationObserver(function (mutations) {
			mutations.forEach(function (mutation) {
				if (!document.querySelector(".t-popup.t-popup_show")) {
					const newBlock = document.querySelector(".js-new-popup-price");
					if (newBlock) {
						newBlock.remove();
					}
					isPopupOpen = false;
				} else {
					if (!isPopupOpen) {
						getExchangeRatePopup();
						isPopupOpen = true;
					}
				}
			});
		});

		const popupConfig = { attributes: true, attributeFilter: ["class"] };
		popupObserver.observe(popupTarget, popupConfig);
	}

4. Обновление при изменении фильтров или добавлении товаров

Что делает:

Проверяет, нажал ли пользователь на элементы фильтрации, сортировки, «показать еще»
Если да, через секунду пересчитывает цены.

window.addEventListener("click", (event) => {
		if (event.target.closest(".t-checkbox") ||
			event.target.closest(".js-store-load-more-btn") || 
			event.target.closest(".t-store__filter__chosen-val") ||
			event.target.closest(".t-store__filter__reset") ||
			event.target.closest(".t-store__filter__custom-sel .t-store__filter__title")
			  ) {
			setTimeout(function () {
				getExchangeRate();
			}, 1000);
		}
	});

Итог: как работает скрипт

При загрузке страницы отправляется запрос на API для получения актуального курса валют.
Обновляются цены в карточках товаров и в модальных окнах.
Скрипт отслеживает действия пользователя (например, открытие фильтров) и пересчитывает цены, если это нужно.

Файл скрипта