# WooCommerce-popupok: gyorsnézet és vásárlási értesítés

> Termék gyorsnézet popup és „a termék a kosárba került” értesítés készítése a JetPopuppal és a JetWooBuilderrel.

A popupot WooCommerce-es elemekhez is kötheted. Két gyakori példa: a termék gyorsnézete és a kosárba tétel utáni értesítés. Mindkettőhöz kell a **WooCommerce**, az **Elementor**, a **JetPopup** és a **JetWooBuilder** bővítmény.

## Termék gyorsnézet popup

A vásárló a termék adatait egy felugró ablakban látja, nem kell külön oldalra mennie. A megoldás három részből áll: egy üres popupból, egy egyedi termék sablonból (ez adja a popup tartalmát) és egy gombból, amely megnyitja.

### 1. Üres popup létrehozása

1. Menj a **JetPopup → Új popup hozzáadása** menüpontra.
2. Adj nevet a popupnak, majd hozd létre, és nyisd meg az Elementor szerkesztőjében.
3. A popupba **ne tegyél semmit**.
4. A bal alsó sarokban a fogaskerék ikonnal nyisd meg a **JetPopup Beállítások** panelt, és kapcsold be a **Loading content with Ajax** és a **Force Loading** kapcsolót.
5. Kattints a **Frissítés** gombra.

### 2. Egyedi termék sablon

1. Menj a **JetPlugins → Jet Woo Template** oldalra, és kattints az **Új sablon hozzáadása** gombra.
2. A sablon típusának válaszd az **Egyedi** (single) értéket, add meg a nevét, és hozd létre.
3. Építsd fel a gyorsnézet kinézetét: például **Single Image** widget a termékképhez, **Single Title** a névhez, a termék adatai (cikkszám, kategóriák), az ár, a leírás és a kosárba gomb.
4. Kattints a **Közzététel** gombra.

### 3. Archív sablon és a gomb

1. A **JetPlugins → Jet Woo Template** oldalon hozz létre egy **Archív** típusú sablont, és válassz hozzá kész elrendezést.
2. Húzz a munkaterületre egy **Gomb** widgetet.
3. Nyisd meg a **Haladó** fület, a **JetPopup** szekciót, és kapcsold be a **Jet Woo Builder Quick View** kapcsolót.
4. A **Csatolt felugró ablak** listában válaszd ki a korábban létrehozott üres popupot.
5. Az **Indítási típus** legyen **Kattintás widgetre**.
6. A **Template** listában válaszd ki a 2. lépésben készített egyedi termék sablont.
7. Kattints a **Közzététel** gombra.

### 4. Az archív sablon bekötése a boltba

1. Készíts egy bolt (shop) oldal sablont, amelyben szerepel a **Products Loop** widget. Ha még nincs ilyen, add hozzá.
2. A **WooCommerce → Beállítások** oldalon rendeld a sablont a bolt oldalához.
3. Ugyanott, a **Termékarchívum** résznél kapcsold be az **Egyéni termékarchívum** lehetőséget, és a **Termékarchívum sablon** listában válaszd ki az archív sablont.
4. Az **Általános** résznél válaszd az Elementor alapértelmezett sablonját.
5. Mentsd a beállításokat.

Nyisd meg a bolt oldalát: a gombra kattintva megnyílik a popup a termék adataival.

### Gyorsnézet a Products Grid widgetben

A gyorsnézet a **Products Grid** widgetben is használható:

1. Add a **Products Grid** widgetet a bolt oldalhoz, és az **Általános** beállításoknál kapcsold be a **Show Quick View** lehetőséget.
2. A **Haladó → JetPopup** szekcióban válaszd ki az üres popupot.
3. Az **Indítási típus** legyen **Kattintás egyéni szelektorra**, a szelektor mezőbe pedig írd be: `.jet-quickview-button`
4. Kapcsold be a **JetWooBuilder Quick View** lehetőséget, és válaszd ki a kívánt sablont.

## Vásárlási értesítés popup

Ez a popup a termék kosárba tétele után jelenik meg, például a „A termék bekerült a kosárba” vagy a „Köszönjük a vásárlást” üzenettel. A **Products Grid**, a **Products List** és az **Archive Add to Cart** widgethez csatolható.

### 1. A popup elkészítése

1. Menj a **JetPopup → Új popup létrehozása** menüpontra.
2. Válaszd ki a tartalom típusát (például **Elementor**), írj nevet (nem kötelező), és szükség esetén válassz előbeállítást.
3. Kattints a **Létrehozás** gombra.
4. A szerkesztőben tedd a popupba a kívánt tartalmat, például egy **Címsor** widgetet az üzenettel. A kinézetét a **Beállítások → Stílus → Popup konténer** résznél alakíthatod (például a háttérszín).
5. A **Beállítások** szekcióban kapcsold be a **Loading content with Ajax** és a **Force Loading** kapcsolót.
6. Kattints a **Frissítés** gombra.

### 2. Megjelenési feltétel

1. A **Display Conditions** mező mellett kattints az **Edit** gombra.
2. A megnyíló ablakban kattints a **+ Add condition** gombra.
3. Állítsd be: **Include**, **Entire**, **Entire Site**, majd mentsd a feltételt.

A feltételekről bővebben a [Megjelenési feltételek](https://hub.hellowp.io/hu/plugins/jet-popup/megjelenesi-feltetelek/) fejezetben olvashatsz.

### 3. A popup csatolása a widgethez

1. Nyisd meg az Elementorban azt az oldalt vagy sablont, ahol a termékek megjelennek, és húzd be a **Products Grid**, a **Products List** vagy az **Archive Add to Cart** widgetet.
2. A **Haladó** fülön nyisd ki a **JetPopup** szekciót, és kapcsold be a **JetWooBuilder Purchase Popup** kapcsolót.
3. A **Purchase Popup** listában válaszd ki az elkészített popupot.
4. Kattints a **Frissítés** gombra.

Próbáld ki a weboldalon: tegyél egy terméket a kosárba, és megjelenik a vásárlási popup.