# Mezők modális ablakban

> A kiegészítő mezők áthelyezése egy felugró ablakba, amelyet egy gomb nyit meg a termékoldalon.

Ha egy terméken sok a mező, a mezők egy részét vagy mindegyiket felugró ablakba (modális ablakba) teheted. A termékoldal így rövid marad, a vásárló pedig egy gombbal, például „Szabd személyre” felirattal nyitja meg a lehetőségeket. Alapból minden mező a termékoldalon látszik, a modális ablak választható beállítás.

## Bekapcsolás

1. Nyisd meg a terméket, és a **Termék adatok** panelen válaszd a **Product Add-Ons** fület.
2. A mezők listája alatt, a **Termékbeállítások** részben keresd meg a **Csoportok megjelenítése ilyen formában** listát.
3. Válaszd a **Modális ablak** értéket. Két új mező jelenik meg.
4. A **Megjelenítendő mezők száma** mezőben add meg, hány mező maradjon a termékoldalon:
   - **0**: minden mező csak a modális ablakban látszik,
   - például **2**: két mező a termékoldalon, a többi az ablakban.
5. A **Gomb szövege** mezőbe írd be a megnyitó gomb feliratát. Ha üresen hagyod, a gomb felirata **Továbbiak** lesz.
6. Kattints a termék **Frissítés** gombjára.

![A modális ablak beállításai](./kepek/csoportok-modal-beallitas.webp)

*A modális ablak beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=edit)

A képen a **Modális ablak** érték kiválasztása után megjelenő **Megjelenítendő mezők száma** és **Gomb szövege** mező látszik.

## Mit lát a vásárló

- A termékoldalon csak a gomb látszik (és a megadott számú mező), a gomb nyitja meg a személyre szabási lehetőségeket.
- Ha a vásárló úgy teszi kosárba a terméket, hogy nem nyitotta meg az ablakot és nem töltötte ki a kötelező mezőket, a szokásos hibaüzenetek jelennek meg.

## Formázás

Amíg az ablak nyitva van, a bővítmény a `pewc-lightbox-active` osztályt teszi a `<body>` elemre, erre épülhet az egyedi CSS. Az ablakban a kiegészítő űrlap egy másolata látszik.

## Kapcsolódó fejezetek

- [Csoportok elrendezése és megjelenítése](https://hub.hellowp.io/hu/plugins/product-extras-for-woocommerce/csoportok-elrendezes/)