Zadanie od klienta
Pre klienta som riešil urgentnú požiadavkou na zobrazenie dôležitého informačného popup okna na viacjazyčnom WordPress webe. Popup mal slúžiť ako bezpečnostné upozornenie pre návštevníkov webu a zobrazovať sa na všetkých jazykových mutáciách stránky.
Na začiatku bolo narýchlo použité hotové riešenie pomocou pluginu (Popup Maker), ktoré však v kombinácii s viacjazyčným webom nefungovalo spoľahlivo:
- popup sa na ostatným jazykových mutáciách zobrazoval opakovane aj po zatvorení
- cookies sa nenastavovali správne pre jednotlivé jazyky
- text popupu nebolo možné jednoducho meniť podľa jazykovej mutácie
- riešenie bolo závislé od konkrétneho pluginu a jeho obmedzení
Problém
Pri viacjazyčných weboch (WPML, Polylang, TranslatePress) je častým problémom to, že pluginy pracujú len s jednou globálnou cookies hodnotou alebo nerozlišujú jazyk podľa URL či html lang atribútu. Výsledkom je zlá používateľská skúsenosť a nepredvídateľné správanie popup okna.
Riešenie
Rozhodol som sa preto pre vlastné (custom) riešenie bez závislosti na akomkoľvek pop-up plugine.
Cieľom bolo:
- plná kontrola nad správaním popupu
- samostatná cookies pre každý jazyk
- automatická detekcia jazyka podľa
<html lang> - kompatibilita s akýmkoľvek multilingual pluginom
- jednoduchá údržba a rozšíriteľnosť
Výsledkom je ľahký HTML + CSS + JavaScript popup, ktorý funguje spoľahlivo na všetkých jazykových mutáciách.
Použité riešenie – kompletný kód
HTML
<div id="custom-popup" style="display:none;">
<div class="popup-overlay"></div>
<div class="popup-content">
<button id="popup-close">×</button>
<p class="popup-text"></p>
</div>
</div>
CSS
#custom-popup {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.popup-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.5);
}
.popup-content {
position: relative;
width: 95%;
max-width: 622px;
padding: 25px;
background: #fff;
border-radius: 20px;
z-index: 10;
}
.popup-text {
text-align: center;
font-weight: 300;
line-height: 1.5;
}
#popup-close {
position: absolute;
top:20px;
right:20px;
border:none;
cursor: pointer;
background:#C91653;
color:#fff;
width:40px;
height:40px;
font-size:40px;
line-height:1;
}
JavaScript (jazyk + cookies)
<script>
// Spustí sa až po úplnom načítaní HTML dokumentu
document.addEventListener('DOMContentLoaded', function() {
// Referencia na hlavný kontajner popup
var popup = document.getElementById('custom-popup');
// Tlačidlo na zatvorenie popup
var closeBtn = document.getElementById('popup-close');
// Element, do ktorého sa dynamicky vkladá text podľa jazyka
var popupText = document.querySelector('.popup-text');
// Zistenie aktuálneho jazyka webu z <html lang="">
// Ak by nebol definovaný, použije sa slovenská verzia
var lang = document.documentElement.lang || 'sk';
// Texty popup pre jednotlivé jazykové mutácie
// Kľúč zodpovedá hodnote <html lang="">
var texts = {
sk: 'Slovenská verzia textu…',
en: 'Anglická verzia textu…',
de: 'Nemecká verzia textu…',
it: 'Talianska verzia textu…',
fr: 'Francúzska verzia textu…'
};
// Vloženie správneho textu do popup
// Ak jazyk neexistuje, použije sa fallback (EN)
popupText.innerHTML = texts[lang] || texts.en;
// Pomocná funkcia na čítanie cookies podľa názvu
function getCookie(name) {
var value = '; ' + document.cookie;
var parts = value.split('; ' + name + '=');
if (parts.length === 2) {
return parts.pop().split(';').shift();
}
}
// Názov cookies je jedinečný pre každý jazyk
// Vďaka tomu sa popup správa samostatne pre SK / EN / DE atď.
var cookieName = 'customPopupClosed_' + lang;
// Ak cookie neexistuje, popup sa zobrazí
if (!getCookie(cookieName)) {
popup.style.display = 'flex';
}
// Kliknutie na tlačidlo „close“
closeBtn.addEventListener('click', function() {
// Skrytie popup
popup.style.display = 'none';
// Nastavenie cookies na 1 rok
var expiry = new Date();
expiry.setTime(expiry.getTime() + (365 * 24 * 60 * 60 * 1000));
// Uloženie cookies – popup sa už pre daný jazyk nezobrazí
document.cookie =
cookieName + '=true; path=/; expires=' + expiry.toUTCString();
});
});
</script>
Výsledok
- popup sa zobrazí iba raz pre každý jazyk (po kliknutí na krížik zavrieť)
- text sa automaticky prispôsobí jazykovej mutácii
- riešenie funguje nezávisle od WPML, Polylang či iného pluginu
- výrazne lepšia používateľská skúsenosť
- jednoduchá údržba bez zbytočných pluginov
Záver
Tento projekt je ukážkou toho, že custom riešenie je často spoľahlivejšie než hotový plugin, najmä pri technicky citlivých funkciách na viacjazyčných weboch.
Ak potrebujete:
- úpravu WordPress webu
- custom funkcionalitu
- riešenie problémov s WPML / Polylang
- optimalizáciu UX a výkonu
👉 rád vám pomôžem.
