Custom popup riešenie pre viacjazyčný WordPress web (prípadová štúdia)
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.
