Felugró ablakok

A felugró ablak építővel teljesen egyedi felugró ablakokat hozhatsz létre a Bricks-ben. A felugró ablak egy Felugró ablak típusú Bricks-sablon. A Bricks az élő oldalon legyártja a felugró ablak HTML-jét, alapból rejtve tartja, és interakciókkal vagy JavaScripttel nyitja és zárja.

Felugró ablakot használhatsz modális ablakokhoz, hírlevélűrlapokhoz, kilépési szándékú ajánlatokhoz, gyorsnézethez, térképi információs dobozokhoz és lekérdezési ciklusokban megjelenő kontextusfüggő tartalomhoz.

Felugró ablak sablon létrehozása

Hozz létre új sablont, és válaszd a Felugró ablak sablontípust. Mentsd a sablont, majd szerkeszd a Bricks-szel.

A felugró ablak sablonok másként néznek ki, mint a normál oldalsablonok:

• a felugró ablak tartalma középre igazítva jelenik meg a vásznon,
• a Sablonminta beállításai között van egy Felugró ablak csoport,
• a sablon nem használja a Tartalom kitöltése beállítást.

A felugró ablak tartalmát ugyanúgy építed, mint bármely más Bricks-elrendezést: szakaszokat, tárolókat, űrlapokat, gombokat, ikonokat, képeket vagy dinamikus adatot adhatsz a vászonhoz.

Elérhetőség és sablonfeltételek

A sablonfeltételek döntik el, hol jeleníti meg a Bricks a felugró ablak sablont. Nyisd meg a Sablonminta beállításai → Feltételek csoportot, és válaszd ki azokat az oldalakat, ahol a felugró ablaknak elérhetőnek kell lennie.

https://minta-bolt.hu/template/hirlevel-felugro-ablak/?bricks=run

A képen a Felugró ablak csoport első vezérlői láthatók: Padding, Főtengely igazítása, Kereszttengely igazítása, Bezárás ekkor, Z-index és a görgetési kapcsolók.

Például a lábléc felől megnyitható hírlevél felugró ablaknak általában „Teljes webhely” feltétel kell. A termék-gyorsnézet felugró ablaknak elég lehet, hogy csak a bolt- vagy termékarchívum-oldalakon legyen elérhető.

Ha a felugró ablakot az aktuális oldalon nem jeleníti meg a Bricks, az interakció nem tudja megnyitni, mert nincs felugró ablak elem a DOM-ban. Ha egy oldalon az Oldalbeállítások között be van kapcsolva a felugró ablakok letiltása, a Bricks az oldal felugró ablakait nem rendereli.

Ugyanazon az oldalon több felugró ablak sablon is megjeleníthető.

Felugró ablak beállításai

A felugró ablak beállításai a Sablonminta beállításai → Felugró ablak csoportban vannak. Globális alapértelmezéseket is megadhatsz a Sablonstílusok Felugró ablak vezérlőcsoportjában, a sablonbeállítások pedig egy adott felugró ablakra felülírják ezeket.

A fő beállítások:

• Padding: a felugró ablak burkolójának belső margója.
• Főtengely igazítása és Kereszttengely igazítása: a felugró ablak tartalmának elhelyezése a nézetablakban.
• Bezárás ekkor: választható a háttérrétegre kattintás, az ESC billentyű, a „Nincs”, vagy az alapértelmezett „Háttérréteg & ESC” viselkedés.
• Z-index: a felugró ablak rétegsorrendje.
• Görgetés (body): engedélyezi az oldal törzsének görgetését, amíg a felugró ablak nyitva van. Ha ki van kapcsolva, a Bricks no-scroll osztályt ad a törzsnek, amíg a felugró ablak nyitva van.
• Görgetés a tetejére: megnyitáskor a felugró ablak tartalmát az elejére görgeti.
• Automatikus fókusz letiltása: megakadályozza, hogy a Bricks a felugró ablak első fókuszálható elemére helyezze a fókuszt.
• Automatikus fókusz kikapcsolása bezáráskor: bezáráskor nem kerül fókusz az utoljára fókuszált elemre.
• Információs doboz (Térkép): kapcsold be, ha a felugró ablak sablon egy térkép „Info Box” eleméhez készült.
• Tartalom lekérése AJAX-on keresztül: a tartalmat a kezdeti DOM helyett igény szerint rendereli.
• AJAX-töltő: töltő animációt, és opcionálisan szelektort, színt és méretet választhatsz az AJAX felugró ablakokhoz.
• Töréspontok: megadja, mely töréspontokon jelenhet meg a felugró ablak.
• Háttérréteg: a háttérréteget állíthatod be vagy tilthatod le (Háttérréteg letiltása, Háttér, Átmenet).
• Tartalom: a .brx-popup-content burkolót stílusozhatod (belső margó, szélesség, magasság, háttér, szegély, dobozárnyék).
• Felugró ablakok korlátja: megszabhatod, milyen gyakran nyílhat meg.

Az élő oldalon a Bricks a billentyűzetfókuszt a nyitott felugró ablakon belül tartja, bezáráskor visszaállítja a fókuszt, a Bezárás ekkor beállításnak megfelelően támogatja az ESC- és háttérrétegre kattintásos bezárást, és JavaScript-eseményeket bocsát ki.

Felugró ablak interakciói

A felugró ablak beállításpaneljén lejjebb az Interakciók csoport lehetővé teszi, hogy a felugró ablak eseményekre reagáljon. A felugró ablak sablonok interakciói ugyanazt az interakciórendszert használják, mint az elemek, kiegészítve két felugró ablak-specifikus kiváltóval:

• Felugró ablak megjelenítése: a felugró ablak megnyílása után fut le.
• Felugró ablak elrejtése: a felugró ablak bezárása után fut le.

Akkor használd ezeket, ha magának a felugró ablaknak kell követő műveleteket futtatnia: például animációt indítani, tárolóba írni, vagy másik elemet frissíteni, miután az ablak megnyílt vagy bezárult.

A legtöbb felugró ablakot egy másik elem interakciója nyitja. Például adj egy Kattintás interakciót egy Gombhoz, a Cél legyen Felugró ablak, válaszd ki a felugró ablak sablont, és használd az Elem megjelenítése műveletet.

Tipikus automatikus felugró ablak a Tartalom betöltve kiváltót használja.

Ha a felugró ablaknak nincs saját interakciója, és semmilyen más elem interakciója sem nyitja meg, a felugró ablak rejtve marad.

A felugró ablak megnyitásának és bezárásának menete

Amikor a Bricks megnyit egy felugró ablakot, az élő oldalon ezt a folyamatot követi:

1. Megkeresi a felugró ablak elemét a sablonazonosító vagy az elemcsomópont alapján.
2. Ellenőrzi a felugró ablak korlátait.
3. Ellenőrzi a felugró ablak töréspontszabályait.
4. Eltávolítja a hide osztályt.
5. Hozzáadja a no-scroll osztályt a törzshöz, kivéve ha a törzs görgetése engedélyezett.
6. Lekéri az AJAX felugró ablak tartalmát, ha a felugró ablak AJAX-ra van állítva.
7. A lekért tartalmat beszúrja a .brx-popup-content elembe.
8. Kibocsátja a bricks/ajax/popup/loaded eseményt, csak a beszúrt AJAX-tartalomnál.
9. Kibocsátja a bricks/popup/open eseményt.
10. Növeli a felugró ablak számlálóit.

Bezáráskor a Bricks hozzáadja a hide osztályt, eltávolítja a no-scroll osztályt a törzsről, ha nincs más nyitva lévő, nem görgethető törzsű felugró ablak, és kibocsátja a bricks/popup/close eseményt.

Ez a menet az egyéni kódnál számít:

• A bricks/ajax/popup/loaded eseményre figyelj, ha a frissen lekért AJAX felugró ablak DOM-jára van szükséged.
• A bricks/popup/open eseményre figyelj, ha a felugró ablaknak nyitva kell lennie.
• A bricks/popup/close eseményre figyelj, ha bezárás utáni takarításra van szükséged.

Felugró ablakok korlátja

Alapból a felugró ablak minden kiváltáskor megnyílhat. A Sablonminta beállításai → Felugró ablak → Felugró ablakok korlátja csoportban korlátozhatod, milyen gyakran nyílhat meg.

A Bricks a megnyitás előtt ellenőrzi a korlátokat. Ha egy korlát elérte a határt, a felugró ablak nem nyílik meg, és a megnyitás-esemény sem fut le.

Négy korlátvezérlő van:

Korlát típusa	Böngészőtároló	Leírás
Oldalbetöltésenként	window.brx_popup_{id}_total	Az oldal újratöltésekor nullázódik.
Munkamenetenként	sessionStorage.brx_popup_{id}_total	A böngészőmunkamenet/lap tárolójának törlésekor nullázódik.
Munkameneteken át	localStorage.brx_popup_{id}_total	Addig marad, amíg a helyi tárolót nem törlik.
Mutasd újra .. óra múlva	localStorage.brx_popup_{id}_lastShown	Az utolsó megjelenítés időbélyegét tárolja, és a megadott számú óráig vár, mielőtt újra megnyithatóvá válik.

Az oldalbetöltésenkénti, munkamenetenkénti és munkameneteken átívelő számlálók minden sikeres megnyitáskor nőnek. Az óraalapú beállítás a legutóbbi megjelenítés időbélyegét akkor tárolja, amikor a felugró ablak átment a korlátellenőrzésen.

Felugró ablak töréspontjai

A töréspontbeállítások azt szabályozzák, hogy a felugró ablak megjeleníthető-e az aktuális nézetszélességnél.

A Bricks két módot támogat:

• Megjelenítés kezdete ezen a törésponton: a kiválasztott töréspont szélességétől felfelé jeleníti meg a felugró ablakot.
• Megjelenítés ezeken a töréspontokon: csak a kiválasztott töréspont-tartományokban jeleníti meg.

Ha az aktuális nézetablak nem felel meg a töréspontszabálynak, a Bricks nem nyitja meg a felugró ablakot.

A felugró ablak bezárása

Többféleképpen zárhatsz be egy felugró ablakot:

• A Bezárás ekkor beállítással: háttérrétegre kattintás és/vagy ESC.
• Adj a felugró ablakon belül egy bezáró ikont vagy gombot, és adj neki Elem elrejtése interakciót, amely a felugró ablakot célozza.
• Használj újrahasználható bezáróelemet, amely a .brx-popup osztályt célozza.
• Hívd a bricksClosePopup() függvényt JavaScriptből.

Példa: bezáró ikon a felugró ablakban

Adj egy Ikon elemet a felugró ablakhoz. Állítsd a kurzort mutatóra (pointer) a Stílusok → Elrendezés → Egyebek alatt.

Nyisd meg az Ikon elem Interakciók paneljét, és add hozzá:

• Kiváltó: Kattintás
• Cél: Felugró ablak
• Felugró ablak: az aktuális felugró ablak
• Művelet: Elem elrejtése

Ha ugyanazt a bezáró ikont különböző felugró ablakokban is használni akarod, hozd létre komponensként. Ekkor használd:

• Cél: CSS-szelektor
• CSS-szelektor: .brx-popup
• Művelet: Elem elrejtése

JavaScript segédfüggvények és események

A Bricks az élő oldalon felugró ablak segédfüggvényeket és egyéni eseményeket tesz elérhetővé.

Felugró ablak megnyitása és bezárása JavaScripttel

A felugró ablakokat a bricksOpenPopup és bricksClosePopup függvényekkel nyithatod és zárhatod. Mindkettő felugró ablak sablonazonosítót vagy felugró ablak elemcsomópontot fogad:

bricksOpenPopup(3321)
bricksClosePopup(3321)

const popup = document.querySelector('.brx-popup[data-popup-id="3321"]')
bricksOpenPopup(popup)
bricksClosePopup(popup)

Példa: felugró ablak megnyitása szelektorral

document.querySelectorAll('.brxe-heading, .my-custom-selector').forEach((el) => {
  el.addEventListener('click', () => {
    bricksOpenPopup(3321)
  })
})

Felugró ablak nyitási és zárási eseményeinek figyelése

A bricks/popup/open és bricks/popup/close eseményekkel kódot futtathatsz a felugró ablak megnyitásakor és bezárásakor.

document.addEventListener('bricks/popup/open', (event) => {
  const popupId = event.detail.popupId
  const popupElement = event.detail.popupElement

  if (popupId == 3321) {
    console.log('3321 popup is opened')
  }
})

document.addEventListener('bricks/popup/close', (event) => {
  const popupId = event.detail.popupId
  const popupElement = event.detail.popupElement

  if (popupId == 3321) {
    console.log('3321 popup is closed')
  }
})

Használd az event.detail.popupId és event.detail.popupElement tulajdonságot. A tulajdonság neve detail, nem details.

Felugró ablak lekérdezési cikluson belül

Lekérdezési cikluson belül is elhelyezhetsz felugró ablakot a Sablon elemmel. A felugró ablak sablonon belül a dinamikus adatok az aktuális ciklus-elemre hivatkozhatnak.

Tipikus példa: egy termék-lekérdezési cikluson belül egy „Gyorsnézet” gomb, amely interakcióval megjeleníti a kiválasztott gyorsnézeti felugró ablakot.

A Bricks újabb változataiban a lekérdezési ciklusos felugró ablakokhoz a Bricks ciklusspecifikus felugró ablak HTML-t tud építeni. Régebbi változatoknál ne a lekérdezési ciklus div elemén állítsd be az interakciót, hanem a ciklus-elemen belüli egyik elemen.

Példa: ciklusos felugró ablak megnyitása a lekérdezési elem azonosítójával és a ciklusindexszel

Ha az oldalon már megjelent egy ciklusos felugró ablak, a lekérdezési elem azonosítójával és a ciklusindexszel célozhatod:

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(() => {
    const queryId = 'vfiqrn'
    const targetPopup = document.querySelector(
      `.brx-popup[data-popup-loop="${queryId}"][data-popup-loop-index="7"]`
    )

    bricksOpenPopup(targetPopup)
  }, 200)
})

A kis késleltetés az egyéni kód elemekben azért hasznos, mert időt ad a Bricks frontend globális változóinak és a felugró ablak jelölésének az inicializálásra.

AJAX felugró ablak

Az AJAX felugró ablakkal könnyebb marad a kezdeti DOM: a Bricks a felugró ablak tartalmát csak megnyitáskor kéri le. Kapcsold be a Tartalom lekérése AJAX-on keresztül beállítást.

Ez különösen lekérdezési ciklusokon belüli felugró ablakoknál hasznos, ahol az összes felugró ablak teljes tartalmának az oldal betöltésekor való rendereléséhez sok erőforrás kellene.

AJAX bekapcsolva:

• a felugró ablak burkolója megjelenik az oldalon,
• a .brx-popup-content a szerkesztő előnézetén kívül üresen indul,
• a Bricks a felugró ablak megnyitásakor a REST-végpontról kéri le a tartalmat,
• a visszaadott HTML-t és dinamikus CSS-t a .brx-popup-content elembe szúrja,
• további beágyazott felugró ablak HTML-t a törzshöz fűzhet, ha az AJAX-tartalom ciklusos AJAX felugró ablakokat tartalmaz.

Az AJAX felugró ablak renderelése bejegyzés-, kifejezés- és felhasználói kontextust támogat. Azt a dinamikus adatot, amelynek nincs stabil objektumazonosítója (például egyes ismétlő sorok), nem mindig lehet AJAX felugró ablak kontextusként feloldani.

AJAX felugró ablak kontextusbeállítások

Amikor egy interakció felugró ablakot nyit, a Bricks kontextusvezérlőket kínál az AJAX felugró ablakokhoz. A Bricks megpróbálja automatikusan kikövetkeztetni az aktuális kontextust. Normál bejegyzés-, kifejezés- és felhasználói ciklusokban ez gyakran működik. Egymásba ágyazott lekérdezési ciklusoknál, komponenspéldányoknál, egyéni mező ismétlőknél vagy összetettebb dinamikus adatbeállításoknál az automatikus kontextus hibás vagy hiányzó lehet.

Ezeket a mezőket akkor használd, ha az AJAX felugró ablakban a dinamikus adat üresen vagy rossz objektumból jelenik meg:

• Kontextus típusa: Bejegyzés, Kifejezés vagy Felhasználó.
• Kontextus azonosítója: az objektum azonosítója, amelyhez a dinamikus adatot renderelni kell.

Használhatsz dinamikus adatot, például {post_id}, {term_id}, vagy olyan egyéni mező értéket, amely bejegyzés-, kifejezés- vagy felhasználóazonosítóra oldódik fel.

AJAX felugró ablak megnyitása kontextussal JavaScriptben

A bricksOpenPopup három paramétert fogad:

• object: felugró ablak azonosítója vagy felugró ablak elemcsomópontja.
• timeout: a felugró ablak animációja/számlálója által használt időtúllépés ezredmásodpercben.
• additionalParams: az AJAX felugró ablak kontextusadata.

bricksOpenPopup(
  1190,
  0,
  {
    popupContextId: 668,
    popupContextType: 'post'
  }
)

bricksOpenPopup(
  2350,
  0,
  {
    popupContextId: 39,
    popupContextType: 'term'
  }
)

A felhasználók számára ezeket a paramétereket általában az Interakciók panel kezeli. JavaScriptet akkor használj, ha egyéni szkriptből nyitsz felugró ablakokat.

AJAX felugró ablak események

Az AJAX felugró ablakok három AJAX-specifikus eseményt bocsátanak ki:

• bricks/ajax/popup/start: az AJAX felugró ablak kérése előtt.
• bricks/ajax/popup/end: az AJAX felugró ablak kérésének befejezése után.
• bricks/ajax/popup/loaded: a lekért felugró ablak tartalmának a DOM-ba illesztése után.

Mindegyik esemény az event.detail.popupId és event.detail.popupElement értéket használja.

document.addEventListener('bricks/ajax/popup/loaded', (event) => {
  const popupId = event.detail.popupId
  const popupElement = event.detail.popupElement

  if (popupId == 3321) {
    console.log('3321 AJAX popup content DOM loaded')
  }
})

Az AJAX felugró ablak megnyitásának sorrendje:

1. bricks/ajax/popup/start
2. bricks/ajax/popup/end
3. bricks/ajax/popup/loaded
4. bricks/popup/open

A bricks/ajax/popup/loaded csak akkor fut le, ha AJAX-tartalom kerül beszúrásra. A nem AJAX felugró ablakok a megnyitás után közvetlenül a bricks/popup/open eseményt bocsátják ki.

Felugró ablak beállítási példák

Példa: felugró ablak megjelenítése, amikor az egér elhagyja a böngészőablakot

A felugró ablak sablon és elrendezés létrehozása után nyisd meg a Sablonminta beállításai → Felugró ablak csoportot, görgess az Interakciók részhez, és adj hozzá egy Egér elhagyja az ablakot interakciót, amely megjeleníti a felugró ablakot.

Valódi kilépési szándékú felugró ablakhoz kombináld ezt felugró ablak korlátokkal vagy böngészőtároló-feltételekkel, hogy az ablak ne jelenjen meg túl gyakran.

Példa: felugró ablak megjelenítése egy dátum/időpont előtt

A sablonfeltételek azt döntik el, hol érhető el a felugró ablak sablon. Az elemfeltételek azt, hogy a felugró ablak tartalma megjelenik-e.

Ha a felugró ablakot csak egy adott dátum előtt akarod megjeleníteni, adj Elemfeltételt a felugró ablak legkülső elemére. Ha a feltétel nem teljesül, a Bricks nem rendereli a felugró ablak tartalmát, és kihagyja a felugró ablak HTML-jét. Az ezt a felugró ablakot célzó kiváltónak így nincs megnyitható felugró ablak eleme az oldalon.

Példa: felugró ablak megnyitása/bezárása kiváltóként

A felugró ablak sablon interakciói reagálhatnak a megnyitás vagy bezárás utáni eseményre. Például:

1. Nyisd meg a Sablonminta beállításai → Felugró ablak → Interakciók részt.
2. Adj hozzá egy Felugró ablak megjelenítése kiváltót.
3. A műveletet állítsd Böngészőtároló: Számlálás értékre.
4. Tárolj egy kulcsot, például newsletter_popup_opened.

Ezután máshol interakciófeltételekkel ellenőrizheted ezt a kulcsot, és módosíthatod az oldal viselkedését.