© 2025 ideal.shop All rights reserved.
Language and currency selector in popup (javascript code)
With this code you can display a popup on your website/web shop that lets the visitor choose their language and currency.
Please note that additions via javascript are at your own risk and there is no guarantee that a "code snippet/plugin" like this will continue to work after the platform receives updates and extensions in the future.
The code must be inserted in the <head>. Find the option to insert your own code in the <head> by searching for "html" in the administration.
Note that the code needs to be customised in two places to reflect the languages and currencies you use in your online shop. Both places are highlighted in bold below.
The default code below is set to popup if the visitor is using a browser that is NOT set to Danish (or if the browser does not provide language information). It is possible to extend this setting on line 10.
The popup will only appear once and only if the visitor has not already made a language/currency change. It is also a requirement that the visitor has accepted functional cookies, as they are used to remember language and currency choices.
<script>
(function(){
// Modify these to match your needs
let header = 'Choose language and currency';
let button_text = 'Save and close';
let language_text = 'Language';
let currency_text = 'Currency';
let languages_that_should_not_show_popup = [ // Supports da, da-DK, en, en-GB, en-US, etc.
'da',
'da-DK',
];
let languages = { // Locale on the left, name on the right
'da-DK': 'Dansk',
'en-GB': 'English (GB)',
'en-EU': 'English (EU)',
'de-DE': 'Deutch',
'fr-FR': 'Français',
'nb-NO': 'Norsk',
'sv-SE': 'Svenska',
};
let currencies = { // Currency on the left, name on the right
'DKK': 'Danske kroner',
'EUR': 'Euro',
'GBP': 'Britiske pund',
'USD': 'Amerikanske dollar',
};
// You shouldn't need to modify below this line
function language_and_currency_popup()
{
if(get_cookie('currency_manual') === '1')
{
// Currency has been set manually, we do nothing
console.log('%c Currency and language popup', 'color: orange; font-weight: bold;', 'Not showing because of currency_manual');
return;
}
if(getsessionstorage('language_and_currency_popup_closed') === '1')
{
// User has seen and closed this popup, we do nothing
console.log('%c Currency and language popup', 'color: orange; font-weight: bold;', 'Not showing because of language_and_currency_popup_closed');
return;
}
if(languages_that_should_not_show_popup.length)
{
let browser_languages = window.navigator.languages;
for(let i = 0; i < languages_that_should_not_show_popup.length; i++)
{
let lang_key = languages_that_should_not_show_popup[i];
if(browser_languages.indexOf(lang_key) > -1)
{
// Browser reports one of the languages we should disregard
console.log('%c Currency and language popup', 'color: orange; font-weight: bold;', 'Not showing because browser reports one of the languages we should disregard', browser_languages, lang_key);
return;
}
}
}
let language_html = '';
let language_current = get_cookie('language') ?? '';
for(let lang_key in languages)
{
language_html += '<option value="'+lang_key+'"'+(language_current === lang_key ? ' selected' : '')+'>'+languages[lang_key]+'</option>';
}
let currency_html = '';
let currency_current = (get_cookie('currency') ?? '');
for(let currency_key in currencies)
{
currency_html += '<option value="'+currency_key+'"'+(currency_current.toUpperCase() === currency_key.toUpperCase() ? ' selected' : '')+'>'+currencies[currency_key]+'</option>';
}
// Show the popup/modal
let html = `
<div class="popup-close-button">×</div>
<div style="display: flex; flex-direction: column; text-align: center; padding: 2rem 0.5rem;">
<div style="font-size: 2rem; font-weight: bold;">${header}</div>
<div style="display: flex; flex-wrap: wrap; justify-content: space-evenly; padding: 2rem 0;">
<div>
<div style="font-size: 1.5rem; font-weight: bold;">${language_text}</div>
<select class="form-select language-select">${language_html}</select>
</div>
<div>
<div style="font-size: 1.5rem; font-weight: bold;">${currency_text}</div>
<select class="form-select currency-select">${currency_html}</select>
</div>
</div>
<div><button class="btn btn-success confirm-button" style="padding: 1rem 2rem;">${button_text}</button></div>
</div>
`;
modal_simple(false, html, undefined, {
path_change: window.location.pathname+window.location.search, // We want to preserve any URL parameters, so that external scripts do not fail
modal_unique_identifier: 'popup',
hide_header: true,
hide_footer: true
}, undefined, undefined, function(){
$('#modal_current button').on('click', function(){
let language = $('#modal_current select.language-select').val();
let currency = $('#modal_current select.currency-select').val().toLowerCase();
// Setting the required cookies
set_cookie('language', language, 365);
set_cookie('currency', currency, 365);
set_cookie('currency_manual', 1, 365);
setsessionstorage('language_and_currency_popup_closed', '1');
// Reloading
window.location.reload();
});
$('#modal_current .popup-close-button').on('click', function(){
modal_close_top_real();
setsessionstorage('language_and_currency_popup_closed', '1');
});
}, true, true);
}
function language_and_currency_popup_setup()
{
if(cookies_allowed('functional'))
{
setTimeout(language_and_currency_popup); // We want this pushed to the back
}
else
{
window.addEventListener('_cookies_functional_accepted', language_and_currency_popup, {once: true});
}
}
window.addEventListener('_after_load', language_and_currency_popup_setup, {once: true});
})();
</script>