# Interakciók > Eseményindítók, műveletek és célok: kattintásra, görgetésre, űrlapküldésre vagy WooCommerce-eseményre futó műveletek, böngészőtároló, JavaScript-függvények, animációk. Az interakciók műveletet futtatnak, ha a weboldalon (frontenden) történik valami. Egy egyszerű interakció kattintásra megmutat egy rejtett elemet. Egy összetettebb figyelhet lekérdezés-AJAX eseményt, ellenőrizheti a böngészőtárolót, AJAX-os felugró ablakot tölthet be a megfelelő bejegyzés-környezettel, vagy saját JavaScript-függvényt hívhat. Az interakció három fő részből áll: - **Eseményindító:** az esemény, amelyet a Bricks figyel, például kattintás, tartalom betöltése, görgetés, belépés a nézetablakba, sikeres űrlapküldés vagy lekérdezés-AJAX vége. - **Művelet:** a viselkedés, amelyet a Bricks lefuttat, például megjelenítés, elrejtés, osztály átváltása, elemhez görgetés, felugró ablak megnyitása, további találatok betöltése vagy JavaScript-függvény futtatása. - **Cél:** a művelet által érintett elem. A műveletől függően ez lehet maga az elem, egy CSS-választó vagy egy felugró ablak sablonja. ## Az interakciók megnyitása Elem szerkesztésekor kattints a panel fejlécében az **Interakciók** ikonra az interakciók felületének megnyitásához vagy bezárásához. Ha egy elemnek vannak interakciói, ugyanez az ikon a **Szerkezet** panelen is megjelenik. Rákattintva az elem interakcióihoz jutsz. ## Interakció hozzáadása Kattints az **Interakciók** cím melletti „+” (**Hozzáadás**) ikonra. Egy elemhez több interakciót is adhatsz. Az interakció címére kattintva átnevezheted. ![Az Interakciók panel egy interakcióval: azonosító, eseményindító, művelet, cél, egyszeri futtatás és feltételek](./kepek/funkciok-interakciok-panel.webp) *Az Interakciók panel egy interakcióval: azonosító, eseményindító, művelet, cél, egyszeri futtatás és feltételek* (https://minta-bolt.hu/elemek-teszt/?bricks=run) A képen az új interakció mezői láthatók: az **ID**, az **Eseményindító** (itt **Kattintás**), a **Kikapcsolás: preventDefault** kapcsoló, a **Művelet**, a **Cél**, a **Csak egyszer futtasd** kapcsoló, valamint a **Feltételek** a **Hozzáadás feltétel** gombbal és a **Kapcsolat** (**És**) választóval. Minden interakció saját azonosítót kap. A Bricks belsőleg használja, te pedig kimásolhatod, ha egy másik interakciónak egy adott animáció végét kell figyelnie. ## Eseményindítók Az **Eseményindító** azt határozza meg, mikor fusson az interakció. ### Elemindítók Az elemindítók a forráselemen figyelnek: - Kattintás - Rámutatás - Fókusz - Elmosás - Egér belépése - Egér kilépése - Belépés a nézetablakba - Kilépés a nézetablakból - Animáció vége - Lekérdezés AJAX-betöltő (Indítás) / (Vége) - Szűrés elküldése (Indítás) / (Vége) - Űrlap Küldés, Űrlap Sikeres, Űrlap Hiba A kattintásos interakciók alapból meghívják az `event.preventDefault()`-ot. Ha azt szeretnéd, hogy a kattintott elem megtartsa a normál böngészőviselkedését (például kövesse a hivatkozást), kapcsold be a **Kikapcsolás: preventDefault** beállítást. ### Nézetablak-indítók A **Belépés a nézetablakba** és a **Kilépés a nézetablakból** az interakció forráselemét figyeli. Mindkettőnél van egy **Elem láthatósága** beállítás, amely megadja, mekkora részének kell átlépnie a nézetablak határát: - `0%`: a belépés akkor fut, ha az elem bármely része láthatóvá válik. A kilépés akkor, ha az elem már egyáltalán nem látszik. - `50%`: a belépés akkor fut, ha az elem fele látható. A kilépés akkor, ha elérte ezt a mértéket, és a látható része fél alá csökken. - `100%`: a belépés akkor fut, ha az egész elem látható. A kilépés akkor, ha már nem látszik teljesen. Az alapérték `0%`. A `0` és `100` közötti értékek támogatottak. Az elemnek bele kell férnie az aktív nézetablak-területbe, hogy elérje a `100%`-ot, ezért a nézetablaknál magasabb vagy szélesebb elemeknél használj kisebb értéket. A **Belépés a nézetablakba** támogatja a **Gyökérmargó** (root margin) beállítást is. Ez az aktív nézetablak határát módosítja, míg az **Elem láthatósága** azt, mekkora részének kell az elemnek átlépnie ezt a határt. Például az `0px 0px -50% 0px` alsó gyökérmargó az alsó határt a nézetablak közepére viszi. A **Kilépés a nézetablakból** nem használ gyökérmargót. A megfigyelt elem a forráselem marad. Ha egy másik elemet akarsz animálni vagy módosítani, amikor a forrás átlépi a határt, válaszd célnak a **CSS-választót**, és add meg annak az elemnek a választóját. ### Böngésző- és ablakindítók Ezek nem egyetlen elem eseményéhez kötődnek: - Görgetés - Tartalom betöltve - Egér kilépése az ablakból A **Görgetés** indító görgetési eltolást fogad: pixelt, a dokumentum magasságához viszonyított százalékot vagy a nézetablak magasságához viszonyított `vh` értéket. A **Tartalom betöltve** késleltetést fogad, például `500ms` vagy `1s`. A **Csak egyszer futtasd** vezérlő a legtöbb indítónál elérhető, a **Tartalom betöltve** indítónál nem. ### Lekérdezésszűrő-indítók Ha a lekérdezésszűrők be vannak kapcsolva, a Bricks két további indítót ad: **Szűrő: üres** és **Szűrő: nem üres**. Ezek egy adott szűrőelem azonosítóját figyelik. Megadhatod a Bricks nyers azonosítóját, `#id`-t vagy `#brxe-id`-t, a Bricks összehasonlítás előtt egységesíti. A támogatott szűrőtípusok: Aktív szűrők, Jelölőnégyzet, Dátumválasztó, Választógomb, Tartomány, Keresés, Kiválasztás. Az Aktív szűrőknél, Jelölőnégyzetnél, Választógombnál és Kiválasztásnál a Bricks azt nézi, vannak-e elérhető lehetőségek vagy értékek. A Kiválasztásnál a helyőrző lehetőséget, a Jelölőnégyzetnél és Választógombnál az „Összes” lehetőséget nem számítja. A Dátumválasztónál és Keresésnél azt vizsgálja, üres-e az aktuális érték. A Tartománynál azt, hogy a kiválasztott tartomány eltér-e a szűrő minimum és maximum értékétől. ### WooCommerce-indítók Aktív WooCommerce esetén a Bricks WooCommerce-indítókat ad: - Kosárba helyezve - Kosárba helyezés - Eltávolítva a kosárból - Megváltozott a Bricks kosártartalma - Kosár frissítve - Kupon alkalmazva - Kupon eltávolítva - Frissültek a Bricks dinamikus töredékei - Megváltozott a Bricks pénztárlépése A hagyományos WooCommerce-indítók a WooCommerce frontend jQuery eseményeit figyelik. A **Megváltozott a Bricks kosártartalma**, a **Frissültek a Bricks dinamikus töredékei** és a **Megváltozott a Bricks pénztárlépése** a Bricks saját eseményeit figyeli. #### Megváltozott a Bricks kosártartalma Ezzel egyéni értesítést vagy felugró ablakot mutathatsz egy sikeres AJAX-os hozzáadás, eltávolítás vagy mennyiségváltoztatás után. Lefedi a kosár, a Pénztár v2, a minikosár és a **Kosártartalom** ciklus frissítéseit, a Dinamikus töredékekben lévő ciklusokat is. Az indító azután fut, hogy a szerver megerősítette a tételváltozást, és a kapcsolódó kosár-, pénztár- és töredékfrissítések lefutottak. Ha egy változáshoz több frissítési kérés kell, is egy értesítést ad. Az egymástól független, megerősített változások külön-külön adnak értesítést, még ha a frissítésük össze is vonódik. Nem fut: - az első oldalbetöltéskor vagy a gyorsítótárazott kosártartalom szinkronizálásakor, - ha úgy küldöd el a mennyiséget, hogy az érték nem változott, - sikertelen kérésnél vagy sikertelen kapcsolódó felületfrissítésnél, - kupon-, szállítás-, cím- vagy csak végösszeg-újraszámításnál. A WooCommerce-nek aktívnak kell lennie. Az indítóhoz nem kell a haladó moduláris elemek bekapcsolása vagy Dinamikus töredék az oldalon. A támogatott AJAX-os kosárfrissítéseket figyeli, ezért a sima oldalújratöltés vagy egy harmadik féltől származó egyéni kosárkérés nem garantáltan váltja ki. Válaszd azt az indítót, amelyik a kívánt viselkedéshez illik: | Indító | Mikor használd | | --- | --- | | Megváltozott a Bricks kosártartalma | Megerősítés mutatására, miután egy tétel sikeresen bekerült, eltávolításra került vagy megváltozott a mennyisége. | | Kosárba helyezve | Csak az AJAX-os hozzáadásra reagálsz, például egy minikosár Offcanvas átváltására. | | Kosár frissítve | A WooCommerce `updated_cart_totals` eseményére reagálsz. Ez nem általános megerősítés minden kosártétel-változásról, különösen a pénztárnál nem. | | Frissültek a Bricks dinamikus töredékei | Művelet a Dinamikus töredék tartalmának cseréje után. Előfordulhat az első szinkronizálásnál vagy pénztári újraszámításnál is, tételváltozás nélkül. | A „Kosár frissítve” felugró ablak elkészítése: 1. Hozz létre egy [felugró ablak sablont](https://hub.hellowp.io/hu/plugins/bricks-child/sablonok-felugro-ablakok/) a megerősítő üzenettel és egy bezáró vezérlővel. 2. Egy olyan elemen, amely a releváns oldalakon megjelenik, nyisd meg az **Interakciók** felületet, és adj hozzá egy interakciót. 3. Az **Eseményindító** legyen **Megváltozott a Bricks kosártartalma**. 4. A **Művelet** legyen **Elem megjelenítése**, a **Cél** **Felugró ablak**, és válaszd ki a sablont. 5. A **Csak egyszer futtasd** maradjon kikapcsolva, ha a felugró ablaknak minden megerősített változás után meg kell jelennie. Próbáld ki a weboldalon: adj hozzá terméket, változtasd meg a mennyiséget, majd távolítsd el. Változtatások között zárd be a felugró ablakot. Töltsd újra az oldalt, vagy csak a pénztári címet módosítsd, és ellenőrizd, hogy a felugró ablak zárva marad. ## Műveletek A **Művelet** az, amit a Bricks lefuttat, miután az indító átment a feltételeken. - Elem megjelenítése - Elem elrejtése - Kattintás az elemre - Attribútum beállítása - Attribútum eltávolítása - Attribútum átváltása - Offcanvas átváltása - Továbbiak betöltése (Lekérdezési ciklus) - Továbbiak betöltése (Képgaléria) - Animáció indítása - Görgetés ide - Pénztári lépés - JavaScript (Függvény) - Open address (Térkép) és Close address (Térkép) - Űrlap kiürítése - Böngészőtároló: Hozzáadás - Böngészőtároló: Eltávolítás - Böngészőtároló: Darabszám Az **Elem megjelenítése** és az **Elem elrejtése** működhet normál elemeken és felugró ablak sablonokon is. Normál elemeknél a Bricks a soron belüli `display` stílust módosítja. Felugró ablakoknál a felugró ablak megnyitási/zárási logikáját hívja. Az **Attribútum beállítása**, **eltávolítása** és **átváltása** a kijelölt célon működik. Ha az attribútum kulcsa `class`, a Bricks az osztályneveket a `classList`-en keresztül adja hozzá, távolítja el vagy váltja át. Minden más esetben magát az attribútumot állítja vagy távolítja. A **Kattintás az elemre** művelet minden célelemen meghívja a `.click()` függvényt. Hasznos, ha egy felületi vezérlőnek egy másik, már létező vezérlőt kell működésbe hoznia. Az **Űrlap kiürítése** törli a beviteli mezőket, szövegterületeket, legördülő listákat, jelölőnégyzeteket, választógombokat és a látható fájlkiválasztás-eredményeket. A rejtett mezőket nem üríti. Ha az interakciót **Űrlap Küldés**, **Űrlap Sikeres** vagy **Űrlap Hiba** indítja, a Bricks a megfelelő űrlapot üríti. Egyébként megadhatsz célűrlap-választót; ha nem adsz meg választót, az oldal összes űrlapját üríti. A térképes műveletekkel a **Térkép**/Információs doboz felugró ablakokat és a címinterakciókat kezelheted. ## Célok A legtöbb művelet a következő célmódok egyikét használja: - **Saját:** a forráselemen fut. - **CSS-választó:** minden, a választóra illeszkedő elemen fut. - **Felugró ablak:** a kiválasztott felugró ablak sablonon fut. Az elemválasztót vagy azonosítót váró célmezőknél használd a mező melletti másolás gombot, majd kattints jobb gombbal a célelemre a vásznon vagy a Szerkezet panelen, és válaszd a felkínált másolási műveletet. A választómezők az elem CSS-azonosítóját másolják `#`-tel; az űrlap- és szűrőeseménymezők a Bricks belső azonosítóját. Az `Esc` megnyomásával a másolás nélkül kilépsz ebből a módból. Egyes műveletek nem használják a szokásos célvezérlőt, mert saját célmezőjük van, vagy nincs célja. Ilyen a továbbiak betöltése, a böngészőtároló, az Offcanvas átváltása, a térképes műveletek és az űrlap kiürítése. Ha egy felugró ablakos interakció lekérdezési cikluson belül van, a Bricks először a kiválasztott felugró ablak sablonazonosítója és az aktuális ciklustétel azonosítója alapján próbál felugró ablakot találni. Ha nincs ciklustételhez tartozó felugró ablak, a sablonazonosítóra tér vissza. ## Csak egyszer futtasd Kapcsold be a **Csak egyszer futtasd** beállítást, ha az interakciónak az aktuális oldalbetöltés alatt csak egyszer kell lefutnia. Normál elemeseményeknél a Bricks egyszeri eseményfigyelőt használ. Dokumentumszintű eseményeknél (űrlap, AJAX, felugró ablak, szűrő, WooCommerce) a Bricks nyomon követi, és a lefutás után eltávolítja az interakciót. Az egyszeri futtatás csak az adott oldalbetöltésre érvényes, oldalbetöltések között nem tárolódik. Tartós vagy munkamenet-alapú szabályhoz használj böngészőtároló-műveleteket és interakciófeltételeket. ## Művelet: Görgetés ide A **Görgetés ide** a célelemhez viszi az oldalt. Beállításai: - **Eltolás (px):** a célpozícióból levon ennyi pixelt. - **Késleltetés (ms):** ennyit vár a görgetés előtt. A Bricks alapból kis késleltetést használ, hogy a DOM frissülhessen. Példa: miután a „Posts Query” AJAX-hívás befejeződik, az oldal a `#my-grid-wrapper` CSS-választójú elemhez görget, előtte `500` milliszekundumot várva. ## Művelet: Pénztári lépés A **Pénztári lépés** művelet a WooCommerce Pénztár v2 többlépéses elrendezéseihez érhető el. A pénztári folyamatot a következőre mozgathatja: - következő lépés, - előző lépés, - egy adott lépés, - egy adott pénztári mező. Kapcsold be a **Nézetbe görgetés** lehetőséget, ha azt szeretnéd, hogy a művelet a lépésváltás után a célként megadott lépést vagy mezőt a látótérbe görgesse. A Pénztár v2 a **Megváltozott a Bricks pénztárlépése** indítót is hozzáadja, amely az aktív pénztári lépés megváltozása után fut. A pénztár beállításairól lásd [Pénztár v2](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-penztar-v2/). ## Művelet: Offcanvas átváltása Az interakciók bármelyik elemről átválthatnak egy **Offcanvas** elemet. Állítsd a műveletet **Offcanvas átváltása**-ra, és add meg az Offcanvas CSS-választóját, például `#brxe-off123`. Ne alkalmazd ezt a műveletet közvetlenül magán a **Kapcsoló** elemen. ## Böngészőtároló A böngészőtároló-műveletek egy kulcsot írnak, törölnek vagy számolnak: - **Ablaktároló (window):** a `window` objektumban tárolódik, oldalbetöltéskor alaphelyzetbe áll. - **Munkamenet-tároló (session):** a `sessionStorage`-ban tárolódik, általában a böngészőlap vagy munkamenet végén törlődik. - **Helyi tároló (local):** a `localStorage`-ban tárolódik, a törlésig megmarad. A tárolóműveletek ugyanazt a **Kulcs** mezőt használják, mint az attribútumműveletek: - **Böngészőtároló: Hozzáadás** a beállított értéket írja a kulcsba. - **Böngészőtároló: Eltávolítás** eltávolítja a kulcsot. - **Böngészőtároló: Darabszám** számként olvassa a kulcsot (alapértelmezés `0`), eggyel növeli, és eltárolja az eredményt. A tároló főleg az interakciófeltételekkel együtt hasznos. Az egyik interakció például számolhatja, hányszor kattintottak egy gombra, egy másik pedig csak akkor fut, ha a számláló nagyobb, mint `2`. ## Művelet: JavaScript (Függvény) Az interakciók saját JavaScript-függvényeket is futtathatnak. Definiáld a függvényeket globálisan: ```html ``` A **Függvény neve (JavaScript)** mezőbe a függvény nevét írd zárójelek és `window.` nélkül: - `myHelperFunctions.myCall` - `myHelperFunctions.nestedFn.fn1` - `myHelperFunctions.nestedFn.fn2` - `toggleMiniCart` A fenti példából a `run()` nem hívható, mert a `toggleMiniCart()` belsejében van, nem a `window`-n. ### Függvényargumentumok Az **Argumentumok** ismétlővel értékeket adhatsz át a függvénynek. A `%brx%` helyőrző egy Bricks-objektumot ad át az interakció környezetével: - `source`: az interakciót kiváltó forráselem. - `targets`: a feloldott célelemek tömbje. - `target`: az aktuális célelem ennél a függvényhíváskor. ```js function playOrPauseVideo(brxParam, postId) { const target = brxParam?.target || false if (!target) { return } const video = target.querySelector('video') if (!video || !video.play || !video.pause) { return } if (video.paused) { video.play() } else { video.pause() } } ``` ## Interakciófeltételek Az interakciófeltételekkel az interakció csak akkor fut, ha a böngészőtároló megfelel a szabályaidnak. A feltételek az ablaktárolót, a munkamenet-tárolót és a helyi tárolót támogatják. Minden feltétel egy tárolókulcsot vizsgál az alábbi összehasonlítások egyikével: - létezik - nem létezik - `==` - `!=` - `>=` - `<=` - `>` - `<` A számszerű összehasonlításoknál a Bricks a tárolt és az összehasonlító értéket számmá alakítja. A nem számszerű értékek ilyenkor `0`-nak számítanak. A **Kapcsolat** beállítás dönti el, hogy minden feltételnek teljesülnie kell (**És**), vagy elég, ha bármelyik teljesül (**Vagy**). Például az az interakció fut, ha a `window.some_key` értéke `some_value`. ## Animációk Az interakciók animációihoz a Bricks az Animate.css-t használja. ### Művelet: Animáció indítása Állítsd a műveletet **Animáció indítása**-ra, és válassz animációtípust, időtartamot és opcionálisan késleltetést. Ha a cél felugró ablak, a Bricks az animációt a `.brx-popup-content` elemre alkalmazza. Ha az animáció neve tartalmazza az `In` szót, a Bricks megnyitja a felugró ablakot. Ha a felugró ablak tartalmának animációja `Out`-ot tartalmaz, az animáció végén bezárja. ### A felugró ablakok animációi A felugró ablakok a nyitási és zárási animációkat közvetlenül kezelik. Ha egy felugró ablakot animáció után akarsz megnyitni vagy bezárni, állítsd a műveletet **Animáció indítása**-ra, és válassz `In` vagy `Out` végű animációt. Nincs szükség második interakcióra, amely csak az animáció végét figyelné a felugró ablak megnyitásához vagy bezárásához. ### Indító: Animáció vége Az **Animáció vége** egy másik interakciót futtathat egy **Animáció indítása** művelet befejezése után. A **Célinterakció azonosítója** mezővel megadhatod, melyik animációs interakciót figyelje. Ha üresen hagyod, a Bricks ugyanazon interakciócsoport előző **Animáció indítása** interakcióját keresi. Ha a megadott azonosító az aktuális interakcióra vagy olyan interakcióra mutat, amely nem **Animáció indítása**, a Bricks figyelmen kívül hagyja. Ugyanezt a JavaScript-eseményt te is figyelheted: ```js document.addEventListener('bricks/animation/end/xyyyeh', (event) => { const element = event.detail.el || false if (!element) { return } // Saját logika }) ``` A saját animációk hozzáadásáról lásd [Egyéni animáció az interakciókhoz](https://hub.hellowp.io/hu/plugins/bricks-child/funkciok-egyeni-animacio/). ## Lekérdezés AJAX-betöltő indítói A **Lekérdezés AJAX-betöltő (Indítás)** és **(Vége)** a kiválasztott lekérdezés Bricks AJAX kezdő/záró eseményeit figyeli. Az **Indítás** a lekérdezés AJAX-kérésének elindulása előtt futtat műveletet, a **Vége** a befejezése után. A **Szűrés elküldése** indítókat a **Szűrő - Küldés** elem AJAX-os beküldéseihez, vagy a Szűrő szűrés indítása interakciókat bekapcsoló Enter-gombos kereséshez használd. ##### Példa: halványítás AJAX-betöltés közben 1. Hozz létre rácselrendezést a lekérdezési ciklusodnak, és adj hozzá egy egyéni osztályt, amely `0.5` átlátszatlanságot állít be. 2. Adj hozzá egy interakciót, amely az osztályt hozzáadja, amikor az AJAX elindul. 3. Adj hozzá egy másikat, amely eltávolítja az osztályt, amikor az AJAX véget ér. A mögöttes JavaScript-eseményt is figyelheted: ```js document.addEventListener('bricks/ajax/start', (event) => { const queryId = event.detail.queryId || false if (!queryId) { return } // Saját logika }) ``` ## Szűrés elküldése indítók A **Szűrés elküldése (Indítás)** és **(Vége)** a **Szűrő - Küldés** elem AJAX-os beküldéseit figyeli a kiválasztott lekérdezésazonosítóhoz. Akkor is futnak, ha a látogató Entert nyom egy **Szűrő - Keresés** elemben, ha a **Szűrő szűrés indítása interakciók** be van kapcsolva. A sima gépelés nem futtatja őket. - A **Szűrés elküldése (Indítás)** azután fut, hogy a Bricks frissítette a kiválasztott szűrőértékeket, és az AJAX szűrési kérés indulása előtt. - A **Szűrés elküldése (Vége)** az AJAX szűrési kérés befejezése után fut. A **Lekérdezés** vezérlőben válaszd ki a célzott lekérdezést. A Bricks csak akkor futtatja az interakciót, ha az esemény `queryId`-je egyezik a kiválasztott lekérdezéssel. Hasznos, ha a szűrők mobilon egy Offcanvasban vannak: adj hozzá egy **Szűrés elküldése (Vége)** interakciót, amely bezárja az Offcanvast, és az a szűrési eredmények betöltése után fut. Ha az Offcanvasnak azonnal be kell záródnia, amikor a látogató a Küldés gombra kattint, használd a **Szűrés elküldése (Indítás)** indítót. Ezek az indítók csak olyan AJAX-os szűrési beküldéseknél futnak, amelyek az aktuális oldal eredményeit frissítik. Nem futnak, ha a Küldés vagy Keresés elem másik URL-re irányít át. A kapcsolódó szűrőelemekről lásd [Szűrő: küldés](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-szuro-kuldes/). ## Űrlapindítók Az interakciók a Bricks űrlapeseményeit is figyelhetik: **Űrlap Küldés**, **Űrlap Sikeres**, **Űrlap Hiba**. - **Űrlap Küldés:** azután fut, hogy a Bricks előkészítette az űrlapadatokat, és az AJAX űrlapkérés elküldése előtt. ```js document.addEventListener('bricks/form/submit', (event) => { const elementId = event.detail.elementId const formData = event.detail.formData console.log('Element ID:', elementId) console.log('Form Data:', formData) }) ``` - **Űrlap Sikeres:** sikeres AJAX űrlapválasz után fut. ```js document.addEventListener('bricks/form/success', (event) => { const elementId = event.detail.elementId const formData = event.detail.formData const res = event.detail.res // Saját logika }) ``` - **Űrlap Hiba:** hibás AJAX űrlapválasz után fut. ```js document.addEventListener('bricks/form/error', (event) => { const elementId = event.detail.elementId const formData = event.detail.formData const res = event.detail.res // Saját logika }) ``` Az Interakciók panelen az űrlapindítónál add meg az **Űrlap azonosítóját**. A Bricks elfogadja az `abcde`, `#abcde` és `#brxe-abcde` formát, és az űrlapelem azonosítójához hasonlítja. ## Indító: Szűrő: üres / nem üres A **Szűrő: üres** és a **Szűrő: nem üres** akkor érhető el, ha a lekérdezésszűrők funkció aktív. Arra valók, hogy elrejtsd, megmutasd vagy más módon frissítsd a szűrőelemek körüli felületet, ha a szűrők lehetőségei vagy értékei az oldal első betöltése vagy egy lekérdezésszűrő-AJAX frissítés után kiürülnek. A **Szűrő: üres** akkor fut, ha: - az Aktív szűrők nem mutatnak tartalmat, - a Jelölőnégyzetnek, Választógombnak vagy Kiválasztásnak nincs elérhető lehetősége (az „Összes” és a helyőrző nem számít), - a Dátumválasztó vagy Keresés aktuális értéke üres, - a Tartomány még a minimum/maximum alapértéken áll. A **Szűrő: nem üres** akkor fut, ha: - az Aktív szűrők tartalmat mutatnak, - a Jelölőnégyzetnek, Választógombnak vagy Kiválasztásnak van elérhető lehetősége, - a Dátumválasztónak vagy Keresésnek van aktuális értéke, - a Tartomány eltér a minimum/maximum alapértéktől. Példa: ha egy **Szűrő - Kiválasztás** nem ad vissza lehetőséget, rejtsd el a burkolóját, hogy ne maradjon üres vezérlő. Add hozzá a párját is, a **Szűrő: nem üres** interakciót, amely újra megmutatja a burkolót, amikor visszatérnek a lehetőségek. ## Példa: felugró ablak megnyitása Hírlevél-felugró ablak megnyitása a lábléc egy gombjáról: 1. Hozz létre egy „Hírlevél felugró ablak” nevű felugró ablak sablont. 2. Állítsd a sablon feltételeit arra, ahol elérhetőnek kell lennie, például **Teljes webhely**. 3. Adj egy gombot a láblécbe. 4. Adj a gombhoz **Kattintás** interakciót. 5. Állítsd a célt **Felugró ablak**-ra, válaszd ki a hírlevél sablont, és használd az **Elem megjelenítése** műveletet. Ezután a gomb mindenhol megnyitja a felugró ablakot, ahol a sablon megjelenik. ## Példa: egyéni tipp (tooltip) rámutatáskor Hozz létre egy rejtett tippelemet, például egy Div-et `.my-tooltip` osztállyal, az **Ikon** elem közelében. Adj az ikonhoz két interakciót: - **Rámutatás** vagy **Egér belépése**: a `.my-tooltip` megjelenítése. - **Egér kilépése**: a `.my-tooltip` elrejtése. ## Példa: egyéni kapcsológomb Építhetsz egyéni kapcsológombot két **Ikon** elemből egy Div-ben. Adj a burkoló Div-nek `.toggle-button` egyéni osztályt, és használj ilyen CSS-t: ```css %root% .toggle-close-icon { display: none; } %root%.is-open .toggle-open-icon { display: none; } %root%.is-open .toggle-close-icon { display: block; } ``` Az alapértelmezett ikon osztálya legyen `.toggle-open-icon`, az aktívé `.toggle-close-icon`. Ezután adj hozzá interakciókat: - Az alapértelmezett ikonon: add hozzá az `is-open` osztályt a burkolóhoz. - Az aktív ikonon: távolítsd el az `is-open` osztályt a burkolóról.