Guides og artikler » Avancerede designmuligheder » Sprogvælger og valutavælger i popup (javascript kode)

Sprogvælger og valutavælger i popup (javascript kode)

Med denne kode kan du vise en popup på din hjemmeside/webshop, som lader den besøgende vælge sprog og valuta.

Bemærk at tilføjelser via javascript er på eget ansvar, og der er ingen garanti for at et "kode-snippet/plugin" som dette fortsat vil fungere efter platformen modtager opdateringer og udvidelser i fremtiden.

Koden skal indsættes i <head>. Find muligheden for at indsætte egne koder i <head> ved at søge efter "html" i administrationen.

Bemærk at koden skal tilpasses to steder, så den afspejler de sprog og valutaer du bruger i din webshop. Begge steder er fremhævet med fed herunder.

Standardkoden herunder er indstillet til at lave en popup hvis den besøgende bruger en browser, som IKKE er indstillet til dansk (eller hvis browseren ikke oplyser om sprog). Det er muligt at udvide denne indstilling på linje 10.

Popuppen bliver i øvrigt kun vist én gang, og kun hvis den besøgende ikke allerede har lavet et skifte af sprog/valuta. Det er også et krav at den besøgende har accepteret funktionelle cookies, da de bruges til at huske sprog- og valutavalg.

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