# Foglalási űrlap felugró ablakban

> Az Amelia beépített felugró ablaka: natív gombok Gutenbergben, Elementorban és Divi 5-ben, valamint a kézi beállítás CSS-osztállyal és shortcode-dal.

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.

![Az Amelia blokkok a Gutenberg blokkválasztójában](./kepek/foglalasi-urlapok-szerkesztok-blokkok.webp)

*Az Amelia blokkok a Gutenberg blokkválasztójában* (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á:

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

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

```text
[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.

![Egy gomb és az űrlap felugró ablakban a weboldalon](./kepek/foglalasi-urlapok-felugro-gomb.webp)

*Egy gomb és az űrlap felugró ablakban a weboldalon* (https://minta-bolt.hu/felugro-foglalas/)

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

![A lépésenkénti űrlap felugró ablakban](./kepek/foglalasi-urlapok-felugro-ablak.webp)

*A lépésenkénti űrlap felugró ablakban* (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.