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

    

    

        ×
        

    

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)

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.