shop prices in different currencies with free API

Sep 23

Written By Lev

The following code was added to allow browsing the shop in different currencies. The cost was meant to be kept minimal, while still making occasional API calls to update the currency rates, every 48 hours. I am using an API for this which is free for up to 5000 requests per month. To minimize the cost I make a single request upon selecting a different currency and store all of the rates in local storage, meaning all subsequent currency selections don’t incur any cost, unless the rates are outdated (older than 48 hours), or local storage is cleared. As of the last update, I store the currency rates in my firebase database, which further minimizes API calls. So even if the local storage is cleared, the rates are first queried from firebase, and only if those are outdated is an API call made.

A lot of the code is for creating and positioning the custom made menu for currency selection. The actual conversion is not complicated. Because I store rates with a single API request, the conversion takes place on the front-end. The API used is from freecurrencyapi.com.

The code presented is merely a proof of concept, as a lot of variables and statements will have to be adjusted if you are not using euros as your base currency in squarespace. As for now, it functions to maintain the selected currency for your browsing session, and takes into account price tag changes which occur when you select a different product variant with a different price. During the API call my base currency is set to USD, not euro. There is a conversion step in the script to allow EUR to become the base currency with the rate of 1.

HTML:

JAVASCRIPT:

<script type="module">
//firebase
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.12.5/firebase-app.js';
import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/10.12.5/firebase-auth.js';
import { getFirestore, doc, getDoc, setDoc, serverTimestamp, Timestamp } from 'https://www.gstatic.com/firebasejs/10.12.5/firebase-firestore.js';
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
//main
async function loadCurrency() {
const subString = 'shop';
const subStringTwo = 'shop/p/';
const getURL = window.location.href;  
if (getURL.includes(subString)) {
let categoryView = true;
const currencyUpdateInterval = 48 * 60 * 60 * 1000;
const currencySymbols = { AUD: 'A$', BGN: 'лв', BRL: 'R$', CAD: 'C$', CHF: 'CHF', CNY: '¥', CZK: 'Kč', DKK: 'kr', EUR: '€', GBP: '£', HKD: 'HK$', HRK: 'kn', HUF: 'Ft', IDR: 'Rp', ILS: '₪', INR: '₹', ISK: 'kr', JPY: '¥', KRW: '₩', MXN: '$', MYR: 'RM', NOK: 'kr', NZD: 'NZ$', PHP: '₱', PLN: 'zł', RON: 'lei', RUB: '₽', SEK: 'kr', SGD: 'S$', THB: '฿', TRY: '₺', USD: '$', ZAR: 'R' };
// Mobile check
const headerActions = document.querySelector('.header-actions');
let isTouch = false;
function checkHeader() {
const styles = window.getComputedStyle(headerActions);
isTouch = styles.getPropertyValue('display') !== 'flex';
}
checkHeader();
//initialize popover
let hideTimeout;
var popover = document.getElementById('custom-popover');
var popoverMessage = document.getElementById('popover-message');
function showPopover(message) {
popoverMessage.textContent = message;
popover.classList.add('show');
popover.style.pointerEvents = 'auto';
clearTimeout(hideTimeout);
hideTimeout = setTimeout(function() {
popover.classList.remove('show');
popover.style.pointerEvents = 'none';
}, 3000);
}
// Set currency
function setCurrency(currency) {
sessionStorage.setItem('selectedCurrency', currency);
function updatePrices(){
const currencyRates = localStorage.getItem('currencyRates');
const currencyRatesTime = localStorage.getItem('currencyRatesTime'); 
const ratesObject = JSON.parse(currencyRates);
const eurRate = ratesObject.data['EUR'];
for (const currency in ratesObject.data) {
ratesObject.data[currency] = ratesObject.data[currency] / eurRate; // Convert to EUR base
}
const rate = ratesObject.data[currency];
const priceTags = document.querySelectorAll('.product-price');
priceTags.forEach(priceTag => {
if (!priceTag.dataset.originalPrice) {
let originalPrice = parseFloat(priceTag.textContent.replace(/[^0-9.-]+/g, ''));
priceTag.dataset.originalPrice = originalPrice;
}
let originalPrice = parseFloat(priceTag.dataset.originalPrice);
let rate = ratesObject.data[currency];
let updatedPrice = originalPrice * rate; 
priceTag.innerHTML = currencySymbols[currency] + updatedPrice.toFixed(2);
//update price tag on variant select
function handleVariantChange() {
setTimeout(() => {
let priceText = priceTag.textContent.trim();
let currencySymbol = priceText.match(/[^0-9.,\s]+/)[0];
if (currencySymbol === '€') {
currency = sessionStorage.getItem('selectedCurrency');
originalPrice = parseFloat(priceTag.textContent.replace(/[^0-9.-]+/g, ''));
priceTag.dataset.originalPrice = originalPrice;
rate = ratesObject.data[currency];
updatedPrice = originalPrice * rate; 
priceTag.innerHTML = currencySymbols[currency] + updatedPrice.toFixed(2);
}
}, 0);
}
//monitor price tag changes due to variant selection
let variantSelectors = priceTag.closest(categoryView ? '.grid-item' : '.ProductItem').querySelectorAll('select');
variantSelectors.forEach(selector => {
if (!selector.dataset.listenerAdded) { 
selector.addEventListener('change', handleVariantChange);
selector.dataset.listenerAdded = true; //make sure we dont add the listener twice
}
});
});  
}
function storeRates(rates){ 
localStorage.setItem('currencyRates', rates);
const currentTime = new Date().toISOString();
localStorage.setItem('currencyRatesTime', currentTime);  
updatePrices();
}
//try get rates from firestore
async function getNewRates(){
const ratesDocRef = doc(db, 'currency', 'conversions');
try {
const ratesSnapshot = await getDoc(ratesDocRef);
const currentTime = new Date();
if (ratesSnapshot.exists()) {
const data = ratesSnapshot.data();
const rates = data.rates;
if (rates) {
const fetchedTime = data.ratesFetchedAt.toDate(); 
const differenceInMillis = currentTime - fetchedTime;
if (differenceInMillis < currencyUpdateInterval) {
storeRates(rates);
return;
} 
}
//otherwise get rates from api
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function () { 
const newRates = this.responseText;
storeRates(this.responseText);
setDoc(ratesDocRef, {
rates: newRates, 
ratesFetchedAt: serverTimestamp()
});
});
oReq.open("GET", "https://api.freecurrencyapi.com/v1/latest?apikey=YOURFREEAPIKEYGOESHERE");
oReq.send();
}
} catch (error) {
console.error("Error fetching rates:", error);
}
}
//but first try get rates from local storage
const currencyRates = localStorage.getItem('currencyRates');
const currencyRatesTime = localStorage.getItem('currencyRatesTime'); 
if (!currencyRates || !currencyRatesTime) {
getNewRates();
} else {
const storedTime = new Date(currencyRatesTime);
const differenceInMillis = new Date() - storedTime;
if (differenceInMillis > currencyUpdateInterval) {
getNewRates();
} else {
updatePrices();
}
} 
}
// Make custom options button with icon
function makeSelect() {
const newSelectButton = document.createElement('div');
newSelectButton.classList.add('newSelectButton');
let selectText = 'EUR';
const selectedCurrency = sessionStorage.getItem('selectedCurrency');
if (selectedCurrency){
selectText = selectedCurrency;
}
const iconDiv = document.createElement('div');
iconDiv.id = "currencyIcon";
iconDiv.classList.add('currencyIcon');
newSelectButton.appendChild(iconDiv);
const buttonText = document.createElement('div');
newSelectButton.appendChild(buttonText);
buttonText.innerHTML = selectText;
buttonText.classList.add('newSelectButtonText');
// Show the custom dropdown
newSelectButton.addEventListener('click', function (event) {
event.preventDefault();
const existingContainer = document.getElementById('customDropdownContainer');
if (existingContainer) {
existingContainer.remove();
}
// Create new dropdown container
const container = document.createElement('div');
container.id = 'customDropdownContainer';
container.classList.add('customDropdownContainer');
const optionContainer = document.createElement('div');
optionContainer.id = 'customDropdownOptionContainer';
optionContainer.classList.add('customDropdownOptionContainer');
container.appendChild(optionContainer);
// Populate menu
const optionEmptyStart = document.createElement('div');
optionEmptyStart.classList.add('customDropdownEmptyOption');
optionEmptyStart.id = 'optionEmptyStart';
optionContainer.appendChild(optionEmptyStart);
const options = [
"AUD", "BGN", "BRL", "CAD", "CHF", "CNY", "CZK", "DKK", "EUR", "GBP","HKD", "HRK", "HUF", "IDR", "ILS", "INR", "ISK", "JPY", "KRW", "MXN","MYR", "NOK", "NZD", "PHP", "PLN", "RON", "RUB", "SEK", "SGD", "THB", "TRY", "USD", "ZAR"
];
for (let i = 0; i < options.length; i++) {
const option = document.createElement('div');
option.classList.add('customDropdownOption');
if (i !== 0) {
option.innerHTML = options[i];
// Select the option and close the dropdown
option.addEventListener('click', function () {
setCurrency(options[i]);
buttonText.innerHTML = options[i];
container.remove();
if (buttonText.innerHTML !== 'EUR') {
$('#popoverMessage').off('click');
popoverMessage.style.color = "#ffc700";
showPopover('Prices on check-out will still be displayed in € (Euro).');
}
});
optionContainer.appendChild(option);
}
}
const optionEmptyEnd = document.createElement('div');
optionEmptyEnd.classList.add('customDropdownEmptyOption');
optionEmptyEnd.id = 'optionEmptyEnd';
optionContainer.appendChild(optionEmptyEnd);
// Append dropdown to body and position it
document.body.appendChild(container);
const zoomFactor = parseFloat(document.body.style.zoom) || 1;
const rectSelect = newSelectButton.getBoundingClientRect();
container.style.position = 'absolute';
container.style.top = `${(rectSelect.top + window.scrollY + 2) / zoomFactor}px`; 
container.style.left = `${(rectSelect.left + window.scrollX - 2) / zoomFactor}px`; 
container.style.width = `${newSelectButton.offsetWidth - 5 * zoomFactor}px`; 
// Close dropdown when clicking outside
document.addEventListener('click', function closeDropdown(event) {
if (!container.contains(event.target) && event.target !== newSelectButton) {
container.remove();
document.removeEventListener('click', closeDropdown);
}
});
});
// Append in category view
function appendCurrencyMainContainer(searchInput) {
const nestedCategories = document.querySelector('.nested-category-tree-wrapper');
const mainContainer = document.createElement('div');
mainContainer.id = 'currencyMainContainer';
mainContainer.classList.add('currencyMainContainer');
const currencyButtonContainer = document.createElement('div');
currencyButtonContainer.id = 'currencyButtonContainer';
currencyButtonContainer.classList.add('currencyButtonContainer');
currencyButtonContainer.appendChild(newSelectButton);
mainContainer.appendChild(currencyButtonContainer);
nestedCategories.insertBefore(mainContainer, searchInput);
}
// Append in product page above breadcrumbs
function appendCurrencyMainContainerProductView(breadcrumbs) {
const mainContainer = document.createElement('div');
mainContainer.id = 'currencyMainContainer';
mainContainer.classList.add('currencyMainContainer');
const currencyButtonContainer = document.createElement('div');
currencyButtonContainer.id = 'currencyButtonContainer';
currencyButtonContainer.classList.add('currencyButtonContainer');
currencyButtonContainer.appendChild(newSelectButton);
mainContainer.appendChild(currencyButtonContainer);
breadcrumbs.parentNode.insertBefore(mainContainer, breadcrumbs);
}  
// Wait for elements to load in and insert
const observer = new MutationObserver(mutationsList => {
mutationsList.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.id === 'shopSearchInput') {
appendCurrencyMainContainer(node);
observer.disconnect();
} else if (node.classList && node.classList.contains('custom-breadcrumb-container')) {
if (isTouch === false) { //not available on mobile on product page
appendCurrencyMainContainerProductView(node); 
}
observer.disconnect();
}
});
});
});
const targetNode = document.body;
const config = { childList: true, subtree: true };
observer.observe(targetNode, config);
}
makeSelect();
//update prices if currency is set
const selectedCurrency = sessionStorage.getItem('selectedCurrency');
if (selectedCurrency){
const nestedCategories = document.querySelector('.nested-category-tree-wrapper');
if (nestedCategories) {
categoryView = true;
} else {
categoryView = false;
}
setCurrency(selectedCurrency);
}
}
}
loadCurrency();
</script>

CSS:

#currencyMainContainer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: auto;
  z-index: 9999;
  font-size: 20px;
  text-transform: uppercase;
  margin: 0;
  margin-bottom: 10px;
  margin-top: -70px;
  margin-left: 25px;
}
#currencyButtonContainer {
  display: flex;
  justify-content: flex-start;
  width: 100px;
  align-items: center;
}
.currencyIcon {
  background-image: url('https://images.squarespace-cdn.com/content/v1/6654b2fee26f292de13f1a9d/d6427bf3-e1ef-4ce5-9333-7f75785b5728/coinstackIcon1.png');
  border: 0px !important;
  width: 25px !important;
  height: 25px !important;
  margin-left: -40px;
  margin-top: 2px;
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
//mobile currency menu
@media only screen and (max-width:790px) {
#currencyMainContainer {
  margin: 0;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: -20px;
  margin-left: 55px;
  } 
}

Lev https://polivantage.com

shop prices in different currencies with free API

Real time geographical dynamic weather effects

Custom drop-down menus in shop