# Bővítések és példák

> Gyorsnézet és vásárlás utáni felugró ablak JetPopuppal, további betöltés, mennyiségválasztó, lapozás, termékek száma oldalanként, szűrők, ingyenes szállítás sávja és változatminták.

Ez a fejezet a JetWooBuilder kiegészítő lehetőségeit és gyakori megoldásait gyűjti össze. Több közülük további bővítményt igényel (JetPopup, JetSmartFilters, JetEngine), vagy külön letölthető kiegészítő bővítmény.

## Termék gyorsnézete JetPopuppal

A gyorsnézet a termék adatait felugró ablakban mutatja, így a vásárlónak nem kell másik oldalra lépnie. A JetPopup bővítményre van szükség.

A gyorsnézet felépítése három részből áll: egy üres popupból, egy Egyedi (termékoldali) sablonból, amely a popup tartalmát adja, és egy gombból, amely megnyitja.

1. Nyisd meg a **JetPopup** menüt, és hozz létre új popupot. Adj neki nevet, tedd közzé, és nyisd meg az Elementorban. A popup maradjon üres, csak a beállításai között kapcsold be az **Ajax betöltés** és a **Betöltés kényszerítése** beállítást (angol felirata: Loading content with Ajax, Force Loading). Frissítsd a popupot.
2. A **Crocoblock → Woo Page Builder** oldalon hozz létre **Egyedi** típusú sablont, és tedd bele azt, amit a gyorsnézetben látni szeretnél: **Termékoldali képek**, **Termékoldali cím**, metaadatok (cikkszám, kategóriák), ár, leírás, kosárba gomb stb. Tedd közzé.
3. Hozz létre egy **Archívumtétel** típusú sablont, és húzz be egy gomb widgetet. A **Haladó** fül **JetPopup** szakaszában kapcsold be a JetWooBuilder gyorsnézet kapcsolót, a **Csatolt popup** listában válaszd ki az üres popupot, az eseményt állítsd a widgetre kattintásra, a **Sablon** listában pedig válaszd ki az Egyedi sablont. Tedd közzé.
4. Hozz létre Bolt sablont, tegyél bele **Terméklista** (ciklus) widgetet, és rendeld hozzá a **WooCommerce → Beállítások → JetWooBuilder** fülön. Az **Egyéni termékarchívum** jelölőnégyzetet is kapcsold be, és válaszd ki az archívumsablont.
5. A **WooCommerce → Beállítások → JetWooBuilder** fül **Általános** részében a **Widgetek megjelenítési módja** legyen **Elementor alapértelmezése**.

**Termékrácsban** a gyorsnézet egyszerűbb: a **Termékrács** widgetben kapcsold be a **Gyorsnézet megjelenítése** kapcsolót (ez a JetPopup aktív állapotában látszik). A **Gyorsnézet** szakaszban megadható a gomb ikonja (**Gomb ikonja**), felirata (**Gomb feliratának szövege**), az ikon használata (**Ikon használata?**) és az ikon pozíciója (**Ikon pozíciója**: bal, felül, jobb, alul). A **Haladó** fül **JetPopup** szakaszában válaszd ki az üres popupot, állítsd az eseményt egyéni választóra, és írd be az egyéni választót: `.jet-quickview-button`. Kapcsold be a JetWooBuilder gyorsnézet beállítást, és válaszd ki a gyorsnézethez használt Egyedi sablont.

## Vásárlás utáni felugró értesítés

A JetPopuppal a kosárba tétel után felugró üzenetet jeleníthetsz meg, például „A termék a kosárba került” vagy „Köszönjük a vásárlást”. Az értesítés a **Termékrács**, a **Terméklista** és az **Archívum kosárba helyezés** widgethez kapcsolható.

1. A JetPopup menüben hozz létre új popupot (a tartalom típusa például Elementor), és tegyél bele tartalmat, például egy címsort a kívánt szöveggel. A popup beállításaiban kapcsold be az **Ajax betöltés** és a **Betöltés kényszerítése** beállítást, majd frissítsd a popupot.
2. A **Megjelenítési feltételek** mellett kattints a szerkesztésre, adj hozzá feltételt (például **Bevonás**, **Egész webhely**), és mentsd.
3. Nyisd meg az Elementorban azt az oldalt vagy sablont, ahol a termékeket kiírod, és húzd be a widgetet (például a **Termékrács** widgetet).
4. A **Haladó** fül **JetPopup** szakaszában kapcsold be a **JetWooBuilder Purchase Popup** beállítást, és válaszd ki a popupot a **Purchase Popup** listából.
5. Frissítsd az oldalt, majd a weboldalon tegyél egy terméket a kosárba: megjelenik az értesítés.

## További betöltés (Load More) kiegészítő

A **Products Grid Load More** kiegészítő a termékrács egy részét elrejti, és gombra kattintásra vagy görgetésre tölti be a következő adagot. A kiegészítő külön bővítményként tölthető le (a Crocoblock eszköztárából), és a szokásos módon telepíthető: **Bővítmények → Új hozzáadása → Bővítmény feltöltése**, majd aktiválás. A JetWooBuilder legyen naprakész.

1. Nyisd meg az oldalt az Elementorban, és jelöld ki a **Termékrács** widgetet.
2. Az **Általános** részben a **Termékek száma** mezőben add meg, hány termék jelenjen meg egyszerre (ennyi tölt be minden görgetésnél vagy kattintásnál).
3. Nyisd meg a **Load More** szakaszt, és kapcsold be a kapcsolót. Két újabb beállítás jelenik meg: a **Load more Type** és a **Load More Trigger ID**.
4. A **Load more Type** két értéke: **By Button Click** (gombra kattintáskor) és **By Page Scrolling** (az oldal görgetésekor). Görgetésnél nincs más teendő.
5. Gombra kattintás esetén a termékrács alá tegyél egy elemet (kép, szöveg, gomb, animáció stb.), és a **Haladó** fülön adj neki **CSS ID**-t. Az Elementor gomb widgetjénél a **Gomb azonosítója** mezőt töltsd ki.
6. Másold be ezt az azonosítót a termékrács **Load More Trigger ID** mezőjébe.
7. Frissítsd az oldalt, és próbáld ki a weboldalon.

## Egyéni mennyiségválasztó (Custom Quantity Selectors) kiegészítő

A kiegészítő plusz és mínusz gombokat ad a mennyiségmezőhöz. Külön bővítményként tölthető le, és a szokásos módon feltölthető (**Bővítmények → Új hozzáadása → Bővítmény feltöltése**), majd aktiválható. A JetWooBuilder legyen naprakész.

A kiegészítő a **Termékrács**, a **Terméklista**, a **Termékoldali kosárba helyezés** és az **Archívum kosárba helyezés** widgetben működik, a kosár sablonjában pedig a **Kosártáblázat** widgetben.

1. Nyisd meg a boltoldalt az Elementorban, és jelöld ki a **Termékrács** vagy a **Terméklista** widgetet.
2. Kapcsold be a **Kosárba gomb** és a **Mennyiségmező** kapcsolót. A mennyiségmező megjelenik a kosárba gomb mellett.
3. A Tartalom fülön új **Quantity Selector** szakasz jelenik meg: kapcsold be az **Enable Quantity Selector** beállítást.
4. Állítsd be a gombok pozícióját, szélességét és a növelő, csökkentő ikont. A **Stílus** fülön az ikon mérete, a rámutatási hatás, a szín és háttér, a szegély, az árnyék és a margók állíthatók.

A termékoldali és archív kosárba gomb widgetjén ugyanezek a beállítások találhatók.

### A kiválasztható darabszám korlátozása

A felső határ megadásához tegyél PHP-kódot a gyermektémád `functions.php` fájljába, vagy használj kódrészlet-kezelő bővítményt (például Code Snippets). Példa, amely minden terméknél legfeljebb 10 darabot enged:

```php
add_filter( 'woocommerce_quantity_input_args', 'set_max_quantity_for_all_products', 10, 2 );
function set_max_quantity_for_all_products( $args, $product ) {
	$args['max_value'] = 10; // a legnagyobb mennyiség
	return $args;
}
```

A kód példa, igényeid szerint módosíthatod. A weboldalon a vásárló ezután legfeljebb a megadott darabszámot teheti a kosárba.

## Lapozás a termékarchívumon

A **Termékek lapozása** widget a termékeket oldalakra bontja a **Termékrács**, **Terméklista** vagy **Terméklista** (ciklus) widget kimenetén.

1. A **Crocoblock → JetPlugins Settings → JetWooBuilder → Widgetek** oldalon, az **Üzletoldali termékwidgetek** szakaszban kapcsold be a **Termékek lapozása** kapcsolót. A termékeket kiíró widgetnek (Termékrács, Terméklista vagy a ciklus) is bekapcsolva kell lennie.
2. Hozz létre **Bolt** típusú sablont, és húzd be a **Termékrács** widgetet. Válassz előbeállítást, és kapcsold be az **Aktuális lekérdezés használata** kapcsolót, hogy a kategóriák, címkék és osztályozások termékei látsszanak. A **Termékek száma** mezőben add meg az oldalankénti termékek számát (például 4).
3. Húzd be a **Termékek lapozása** widgetet.
4. Az **Előző és következő oldalak hivatkozásainak engedélyezése** kapcsoló alapból be van kapcsolva: megadhatod az **Előző címke**, **Előző ikon**, **Következő címke** és **Következő ikon** beállítást.
5. A **Stílus** fülön a lapozás, a navigáció és a navigációs ikonok tipográfiája, színe, háttere, kitöltése, szegélye és igazítása állítható, a **Haladó** fülön az **Elrendezés**.
6. Nézd meg a weboldalon a lapozás működését.

## Termékek száma oldalanként: választó a látogatónak

A JetSmartFilters bővítménnyel megoldható, hogy a látogató válassza ki, hány termék látszódjon egy oldalon a Termékrácsban. Ez minden WordPress-tartalomtípuson működik.

1. A **Smart Filters → Add New** oldalon hozz létre szűrőt. Adj neki nevet (például „Termékek oldalanként”), válaszd típusnak a **Select** vagy **Radio** értéket.
2. Adatforrásnak válaszd a **Manual Input** (kézi megadás) értéket, és az **Options List** (opciólista) alatt az **Add New** gombbal vegyél fel értékeket, például 4, 8 és 12 (a címke és az érték legyen azonos).
3. A **Query Variable** mezőnél kattints a dinamikus címke gombjára, válaszd a **Plain Query Variable** elemet, és a **Variable Name** mezőbe írd: `posts_per_page`.
4. A **Filter Labels** szakaszban megadhatod a szűrő és az aktív szűrő feliratát. Frissítsd a szűrőt.
5. Nyisd meg az oldalt vagy sablont a **Termékrácssal**, és húzd be a szűrő megfelelő widgetjét (a Select vagy Radio szűrő widgetet). Válaszd ki a szűrőt, és a **This filter for** listában a **JetWooBuilder Products Grid** értéket.
6. A weboldalon alapból az első opció értéke szerinti darabszám látszik, a választóval a látogató átválthat a többire.

## Szűrők a termékrácshoz

A JetSmartFilters szűrői a Termékrácshoz is kapcsolhatók (ár szerinti szűrés, szűrés kategóriák szerint, lapozás). A szűrők a **Termékrács** widgethez a szűrő widgetjében, a **This filter for** listában választható **JetWooBuilder Products Grid** értékkel kapcsolódnak.

## Ingyenes szállítás sávja a kosárban

A kosár sablonjában folyamatjelző sáv mutatja, mennyi hiányzik az ingyenes szállításhoz. A megoldáshoz a JetEngine, a JetElements, a JetWooBuilder és a WooCommerce kell.

1. **JetEngine lekérdezés:** a **JetEngine → Query Builder** oldalon adj hozzá új lekérdezést **SQL/AI Query** típussal. A **From table** listában válaszd a `postmeta` értéket. Az első **Where** feltétel: oszlop `meta_key`, összehasonlítás egyenlő, érték `_price`. A második: oszlop `post_id`, összehasonlítás „In the list”, érték a **WC Products in Cart** makró. Ezek összegyűjtik a kosárban lévő termékek árait. Mentsd a lekérdezést.
2. **Folyamatjelző sáv:** a kosár sablonjába húzd be a JetElements **Progress Bar** widgetjét. A **Current Value** mezőhöz válaszd a JetEngine **Dynamic Function** dinamikus címkéjét: **Function** értéke **SQL query results**, **Query Column** értéke `meta_value`, **Additional Function** értéke **Sum**. A **Max Value** mezőbe írd be az ingyenes szállítás határát.
3. **Üzenet az elérés után:** egy címsor widgettel (például „Gratulálunk, ingyenes a szállítás!”) a **Haladó** fül **Dynamic Visibility** szakaszában állítsd be, hogy az üzenet csak akkor látsszon, ha a fenti dinamikus függvény értéke nagyobb vagy egyenlő a határral. A folyamatjelzőt ugyanígy elrejtheted a határ elérése után.
4. **Ingyenes szállítás a WooCommerce-ben:** a **WooCommerce → Beállítások → Szállítás** oldalon adj hozzá szállítási módot: válaszd az ingyenes szállítást, a feltétele legyen minimális rendelési összeg, és az összeg egyezzen a sáv határával.
5. A weboldalon tegyél termékeket a kosárba: az összeg növelésével a sáv telik, a határ elérésekor megjelenik a gratuláló üzenet, és az ingyenes szállítás is felkínálódik.

## Változatok árai és az árintervallum

Változó terméknél minden változatnak külön ára lehet. Ehhez a WooCommerce és az Elementor mellett a JetWooBuilder **Termékoldali ár** és **Termékoldali kosárba helyezés** widgetje kell, valamint egy közzétett Egyedi (termékoldali) sablon.

1. Nyisd meg a **Termékek** listát, és szerkeszd a változó terméket.
2. A termékadatok között nyisd meg a **Változatok** részt, és a kívánt változat mellett kattints a szerkesztésre.
3. Töltsd ki a változat rendes árát. Akciós árat és az akció kezdő- és záródátumát is megadhatod (az **Ütemezés** hivatkozás mutatja a dátummezőket).
4. Görgess le, és mentsd a változtatásokat.
5. A termékoldali sablonban a **Termékoldali ár** widget a legkisebb és a legnagyobb változatár közötti intervallumot írja ki.
6. A **Termékoldali kosárba helyezés** widget kiválasztómezőket ad a változat kiválasztásához. A weboldalon a kiválasztás után a widget a választott változat árát mutatja.

## Termékattribútumok megjelenítése

A változatok kiválasztása a termék attribútumain alapul. Az attribútumokat a **Termékek → Attribútumok** oldalon hozhatod létre és kezelheted, és itt rendelheted hozzájuk az értékeket is. Azt, hogy az attribútumok hol jelennek meg a vásárlónak, a sablon határozza meg.

- **Termékoldal:** a **Termékoldali kosárba helyezés** widget legördülő listákat ad az attribútumokhoz, így a vásárló kiválaszthatja a kívánt változatot. Tedd be a widgetet az Egyedi sablonba, tedd közzé, és a weboldalon nézd meg.
- **Archívum:** az **Archívum kosárba helyezés** widget változó terméknél a **Válassz lehetőséget** jellegű gombot adja, amely a termék oldalára visz, ahol a változat kiválasztható. Tedd be a widgetet az Archívumtétel sablonba.
- **Bolt:** a **Termékrács** vagy a **Terméklista** widget a termékeket kiírja, és a változó termék gombja a termékoldalra viszi a látogatót.

Ha a változatokat táblázatban szeretnéd felsorolni, azt a JetProductTables bővítmény tudja, vagy a JetEngine **Listázó rács** widgetje, amellyel a változatok mind kiírhatók.

## Változatminták (variation swatches) a termékrácsban és a listában

A változatminták (színes, képes választók) a WooCommerce változó termékeihez a Variation Swatches for WooCommerce bővítménnyel adhatók, de a **Termékrács** és a **Terméklista** widgetben ehhez sablonmódosítás kell. Ehhez gyermektéma szükséges.

1. A gyermektéma mappájában hozz létre egy `jet-woo-builder` mappát.
2. Másold ide a JetWooBuilder `templates/widgets` mappáját. Termékrácshoz a `global` mappa kell, azon belül a `products-grid` mappában csak az `item-button` és a `loop-item` fájlokat hagyd meg (Terméklistához a `products-list` mappa kell). A többi mappát töröld.
3. A Variation Swatches beállításai között az Archive / Shop fülön másold ki a **Product wrapper** mező értékét (például `wvs-archive-product-wrapper`), és add hozzá a `loop-item` fájl `$classes` sorához.
4. Az `item-button` fájl `$class` blokkjába írd be: `woo_variation_swatches()->show_archive_page_swatches();`
5. A gyermektéma `functions.php` fájljába tedd be a `wvs_pro_get_current_url()` függvényt pótló kódrészletet (a Variation Swatches 2-es verziójától ez a függvény már nincs benne), majd a bővítményhez tartozó többi kódot.
6. Nézd meg a weboldalon a termékrácsot.