Foglalási űrlap felugró ablakban

Az Amelia felugró ablakával a foglalási űrlap külön oldal nélkül, modális ablakban nyílik meg, amikor a látogató egy gombra vagy hivatkozásra kattint. A funkció be van építve az Ameliába, nem kell hozzá külön bővítmény.

Natív felugró gombok

Gutenbergben, Elementorban és Divi 5-ben kész gombmodul van a felugró ablakhoz, nem kell kézzel osztályt vagy egyedi hivatkozást beállítanod. Jelenleg két modul érhető el:

• Foglalási gomb (a blokkválasztóban „Amelia: foglalási gomb”): a lépésenkénti foglalási űrlapot nyitja meg.
• Eseménylista-gomb (a blokkválasztóban „Amelia: eseménylista-gomb”): az eseménylista űrlapot nyitja meg.

https://minta-bolt.hu/wp-admin/post-new.php?post_type=page

A képen a blokkválasztó látszik: az Amelia csoportban megtalálod a két gombot is.

A gomb beállítása:

1. Add hozzá a gombmodult az oldalhoz.
2. Írd át a gomb feliratát.
3. Ha szeretnéd, kapcsold be a foglalási paraméterek előválasztását.
4. A gombot a szerkesztő saját stílusbeállításaival formázd meg.

Az előválasztással kategóriát, szolgáltatást, munkavállalót, helyszínt, eseményt és más támogatott paramétert állíthatsz be előre. Ha nem választasz előre semmit, a felugró ablak az alapnézetet nyitja, és minden elérhető elemet mutat. A látogató a gombra kattintva a kiválasztott űrlapot felugró ablakban kapja meg.

Kézi beállítás

A kézi módszer az Amelia minden űrlapjával működik, és bármi indíthatja, ami CSS-osztályt kaphat: gomb, szöveges hivatkozás vagy ikon. Az űrlap a kattintás után jelenik meg modális ablakban, és bezárul, amikor a vásárló befejezi vagy elhagyja a foglalást.

1. Az indító elem létrehozása

Tegyél az oldalra egy kattintható elemet, és adj neki egyedi CSS-osztályt. Gutenbergben például szúrj be egy Gombok blokkot, írd át a feliratát, majd a Haladó panelen add meg az osztályt, például amelia-popup. Az űrlap később erre az osztályra hivatkozik.

2. Az űrlap összekötése az indítóval

Az űrlapot tetszőleges helyre elhelyezheted az oldalon, a builder modulokkal vagy shortcode-dal. Ha felugró ablakként állítod be, az Amelia automatikusan elrejti, és csak a kattintásra mutatja. Shortcode-nál ezeket az attribútumokat add hozzá:

trigger="osztalynev" trigger_type="class" in_dialog="1"

Például a szűretlen lépésenkénti űrlap az amelia-popup osztályra:

[ameliastepbooking trigger="amelia-popup" trigger_type="class" in_dialog="1"]

Gutenberg-, Elementor- vagy Divi-modulnál illeszd be az űrlap modulját, kapcsold be az Amelia felugró ablakos megjelenítés kapcsolóját, és az oldalsó menüben add meg az indítót és a típusát.

https://minta-bolt.hu/felugro-foglalas/

Kattintás előtt csak a gomb látszik, az űrlap rejtve van.

https://minta-bolt.hu/felugro-foglalas/

Kattintás után az űrlap az oldal fölött modális ablakban nyílik meg.

Szöveges hivatkozás vagy ikon indítóként

Bármely HTML-elem lehet indító, amelyhez osztály adható. Egy egyszerű hivatkozásnak ugyanazt az osztályt add meg. A href értéke lehet üres vagy helyőrző, mert a működést az osztály adja, nem a hivatkozás célja.

Melyik űrlap és szerkesztő támogatja a natív gombot?

• Natív gombmodul csak a lépésenkénti foglalási és az eseménylista űrlaphoz van.
• A natív gombmodulok Gutenbergben, Elementorban és Divi 5-ben elérhetők.
• Minden más űrlaphoz és szerkesztőhöz a kézi beállítás kell: shortcode-attribútumok és indítóosztály.

Mire figyelj

• A kézi beállítás bármilyen elemmel működik, amelyhez CSS-osztály adható.
• Az indító osztálynak pontosan egyeznie kell az űrlap trigger értékével.
• Kézi beállításnál az in_dialog="1" attribútum kötelező.
• Az űrlap shortcode-ja az oldalon bárhová kerülhet.
• Előválasztás nélkül a felugró ablak az alapnézetet nyitja, minden elérhető elemmel.