# Termékmegjelenítő widgetek

> A Termékrács, a Terméklista, a Kategóriarács, a Taxonómiai csempék és a WooCommerce-műveletek widget beállításai, lekérdezése és körhintája.

Ezek a **Globális widgetek**: bármelyik Elementor-oldalra, sablonba behúzhatók, nem kötődnek egy sablontípushoz. A widgetet a **Crocoblock → JetPlugins Settings → JetWooBuilder → Widgetek** oldal **Globális widgetek** szakaszában kapcsolhatod be, ha ki van kapcsolva. A bekapcsolt widgetek száma a webhely teljesítményére hat, ezért csak a ténylegesen használtakat hagyd bekapcsolva.

A widgetek az Elementor panelen a **JetWooBuilder** csoportban vannak: **Kategóriarács**, **Terméklista**, **Termékrács**, **Taxonómiai csempék**, **WooCommerce-műveletek**.

## Termékrács

A **Termékrács** a termékeket rácsban, vagy körhintában írja ki. Az előbeállításokkal és az archívumtétel sablonokkal működik.

![A Termékrács beállításai a szerkesztőben](./kepek/szerkeszto-termekracs.webp)

*A Termékrács beállításai a szerkesztőben* (https://minta-bolt.hu/wp-admin/post.php?post=27&action=elementor)

A beállítások a **Termékrács** szakaszban vannak:

| Beállítás | Mit csinál |
|---|---|
| **Előbeállítások** | Előre megadott beállításkészlet, amellyel gyorsan megkapod a kívánt kinézetet. |
| **Oszlopok** | Az oszlopok száma számítógépen, táblagépen és mobilon külön. |
| **Rámutatás érintőképernyőn** | A rámutatási hatás érintőképernyőn is működik. |
| **Azonos oszlopmagasság** | Kiegyenlíti a különböző képméretű és szöveghosszú elemek magasságát. |
| **Hézag az oszlopok között**, **Hézag a sorok között** | Külön hézag az oszlopok és a sorok között. |
| **Rejtett termékek** | Megjeleníti a „rejtett” katalógus-láthatóságú termékeket is. Ezt az állapotot a termék szerkesztésénél vagy gyorsszerkesztésénél adhatod meg. |
| **Termékelem kattinthatóvá tétele** | A termékre kattintva a termékoldalra jut a vásárló. |
| **Megnyitás új ablakban** | A termékoldal új ablakban nyílik meg. |
| **Aktuális lekérdezés használata** | Csak a termékarchívum-sablonokban működik: az aktuális kategória, címke vagy más osztályozás termékeit írja ki. Például a „Nőknek” kategória oldalán csak a női termékek látszanak. |
| **Termékek száma** | Hány termék jelenjen meg. |
| **Lekérdezés alapja** | A lekérdezés szempontja: kiemelt, akciós, címke és más osztályozás. |
| **Kizárás ID-k alapján** | A kihagyandó termékek azonosítói. Dinamikus címkével kizárhatók például egy adott eladó termékei. |
| **Rendezés alapja** | A rendezés szempontja: dátum, módosítás dátuma, azonosító, ár, cím, véletlen, eladások, legjobban értékelt, menüsorrend, cikkszám, aktuális, készletállapot. |
| **Rendelés** | Növekvő vagy csökkenő sorrend. A **Cím** szerinti növekvő rendezés ábécésorrendet ad, a **Dátum** szerinti csökkenő a legújabbat mutatja elöl. |

Az **Aktuális lekérdezés használata** kikapcsolt állapotában további mezők jelennek meg: **Kategóriák bevonása**, **Kategóriák kizárása**, **Címke felvétele**, **Taxonómia slug**, **Bevonás azonosítók alapján**, **Készletállapot** és **Szülőbejegyzések ID-i**. Ha az **Egyéni lekérdezést** (lásd lent) használod, a lekérdezés beállításai nem érvényesek.

A termékkártya elemei és a hozzájuk tartozó beállítások:

| Beállítás | Mit csinál |
|---|---|
| **Cím** | A termék neve. Kikapcsolva elrejti. Bekapcsolva megjelennek a **Közvetlen hivatkozás engedélyezése** (a címre kattintva a termékoldalra jut), a **HTML-címke** (H1 és H6 között, div, span vagy p), a **Csonkolás típusa** és a **Hossz**, a **Sortörés engedélyezése** és a **Címhez tartozó buboréksúgó bekapcsolása**. |
| **Csonkolás típusa**, **Hossz** | A cím hossza szavakban vagy betűkben. A **-1** a teljes címet írja ki, a **0** elrejti. |
| **Bélyegkép-effektus engedélyezése** | Rámutatáskor a termék galériájának második képét mutatja. Az effektus típusát a **Crocoblock → JetPlugins Settings → JetWooBuilder** oldalon állíthatod (lásd [Beállítások](https://hub.hellowp.io/hu/plugins/jet-woo-builder/beallitasok/)). |
| **Bélyegkép közvetlen hivatkozásának engedélyezése** | A képre kattintva a termékoldalra jut a vásárló. |
| **Képméret** | A termékkép mérete. |
| **Jelvények**, **Jelvény felirata** | Jelvények. A feliratban használható a **%percentage_sale%** és a **%numeric_sale%** makró, amely az engedmény százalékos vagy számszerű értékét írja ki. |
| **Rövid leírás** | A rövid leírás, saját **Csonkolás típusa** és **Hossz** beállítással. |
| **Kategóriák**, **Kategóriák száma** | A termék kategóriái. A **0** az összeset kiírja. |
| **Címkék**, **Címkék száma** | A termék címkéi. A **0** az összeset kiírja. |
| **Ár** | A termék ára. |
| **Készletállapot** | A készletállapot. Bekapcsolva szerkeszthető a **Készleten felirat**, az **Utánrendelhető felirat** és a **Nincs raktáron felirat**. |
| **Értékelés**, **Nincs értékelés** | Az értékelés. A **Nincs értékelés** kapcsoló akkor is kiírja az üres csillagokat, ha még senki sem értékelte a terméket. |
| **SKU** | A cikkszám. |
| **Kosárba gomb** | A **Kosárba teszem** gomb. Bekapcsolva elérhető a **Mennyiségmező** (több darab is kosárba tehető) és a **Használd az alapértelmezett ajax add to cart stílusokat** (a WooCommerce alapstílusa az AJAX-os gombhoz). |
| **Nincs találati üzenet** | A „nincs találat” értesítés, például ha a widgetet a keresési oldal sablonjába teszed. A szöveg helyett dinamikus címke vagy shortcode is használható. |
| **Lekérdezés ID** | Egyedi azonosító a lekérdezéshez, amellyel a szerveroldali szűrés működik. Dinamikus címkével is megadható. |

Ha a **JetPopup** aktív, megjelenik a **Gyorsnézet megjelenítése** kapcsoló és a **Gyorsnézetgomb sorrendje**: a gomb a termék gyorsnézetét nyitja meg felugró ablakban (lásd [Bővítések és példák](https://hub.hellowp.io/hu/plugins/jet-woo-builder/bovitesek/)). Ha a **JetCompareWishlist** is aktív, az **Összehasonlítás** és a **Kívánságlista** gombok is beállíthatók a rácson. A gombok sorrendje, ikonja és felirata megadható, a **Kosárba teszem** gomb mindig az első.

### Gyorsnézet, összehasonlítás és kívánságlista fül

Ha a JetPopup aktív, és a **Gyorsnézet megjelenítése** kapcsolót bekapcsoltad, a panelen megjelenik a **Gyorsnézet** szakasz. Itt állíthatod a gomb ikonját (**Gomb ikonja**, könyvtárból vagy feltöltött SVG-ből), a feliratát (**Gomb feliratának szövege**), az ikon használatát (**Ikon használata?**), és az ikon helyét (**Ikon pozíciója**: bal, felül, jobb vagy alul).

Ha a JetCompareWishlist aktív, és a **Crocoblock → JetPlugins Settings → JetCompareWishlist** oldalon az összehasonlítás, illetve a kívánságlista funkció be van kapcsolva, a panelen megjelenik egy-egy szakasz az **Összehasonlítás** és a **Kívánságlista** gombnak. Mindkettőn ugyanazok a beállítások vannak:

- a gomb bekapcsolása;
- az ikon be- és kikapcsolása, az ikon kiválasztása (könyvtárból vagy SVG-fájlból) és az ikon helye (bal, felül, jobb, alul);
- a **Normál** és a **Hozzáadva** fül: a gomb kinézete, illetve az a nézet, amelyet a vásárló az összehasonlító oldalra vagy a kívánságlistára tett termék mellett lát. Mindkét fülön megadható az ikon és a felirat;
- a **Hozzáadva** fülön az eltávolítógombként használat kapcsolója: bekapcsolva a vásárló ugyanazzal a gombbal kiveheti a terméket az összehasonlításból vagy a kívánságlistáról;
- a gombok sorrendje számítógépen, táblagépen és mobilon külön. A **Kosárba teszem** gomb mindig az első; alapból az összehasonlítás gombja kerül mögé, a kívánságlistáé pedig az összehasonlítás mögé.

### Egyéni lekérdezés (JetEngine)

Ha a JetEngine aktív, megjelenik az **Egyéni lekérdezés** szakasz. Az **Egyéni lekérdezés engedélyezése** kapcsolóval a JetEngine Query Builder egyik, WC termék típusú lekérdezését alkalmazhatod a rácsra.

### Körhinta

A **Körhinta** szakaszban a **Carousel engedélyezése** kapcsolóval a rács csúszkává alakul. A beállítások:

| Beállítás | Mit csinál |
|---|---|
| **Irány** | Vízszintes vagy függőleges görgetés. |
| **Diák minimális magassága** | A diák legkisebb magassága, eszközönként külön. |
| **Carousel magassága** | A körhinta magassága, eszközönként külön. |
| **Görgetésenkénti diák száma** | Hány dia mozog egyszerre, eszközönként külön. |
| **Térköz az elemek között** | A diák közötti távolság képpontban, eszközönként külön. |
| **Dia túlcsordulása**, **Túlcsordulás** | Bekapcsolva a következő dia egy része is látszik (például 0,5 a fél diát mutatja). |
| **Navigáció** | Nyilak a görgetéshez. |
| **Előző nyíl**, **Következő nyíl** | Egyéni nyílikonok (csak SVG). |
| **Lapozás** | Pontok a körhinta alján. Elérhető hozzá a **Dinamikus pontok** kapcsoló. |
| **Automatikus lejátszás** | Magától görgeti a diákat. |
| **Késleltetés** | A görgetések közti idő (például az 500 gyakori, az 5000 ritkább görgetést jelent). |
| **Letiltás interakció esetén** | Ha a látogató kezel a körhintán, az automatikus lejátszás megáll az oldal újratöltéséig. |
| **Ismétlés** | Körbeérő görgetés. Kikapcsolva az utolsó dia után visszafelé halad. |
| **Animáció sebessége** | A mozgás sebessége (például a 100 hirtelen, az 1000 lágyabb mozgás). |
| **Érintés szimulálása** | Számítógépen is lehet húzással görgetni. |
| **Szabad mód**, **Sebesség** | A szabad módban a görgetés sebessége. |
| **Középre igazított diák** | A túlcsordulást a körhinta két oldalán osztja el (a **Dia túlcsordulása** bekapcsolásakor). |

A **Stílus** fülön az oszlopok, az elemek (normál és rámutatásos állapotban), a bélyegkép, a cím, az ár, a gomb, a körhinta nyilai és pontjai és a többi elem formázható. A **Haladó** fülön az elrendezés, a mozgási hatások, a transzformálás, a háttér, a maszk, a reszponzív beállítások, az attribútumok és az egyéni CSS található.

![A bolt oldal a Termékráccsal](./kepek/bolt-frontend.webp)

*A bolt oldal a Termékráccsal* (https://minta-bolt.hu/bolt/)

## Terméklista

A **Terméklista** ugyanazokat a termékeket listanézetben írja ki: több lista-elrendezést kínál, és a termék adatait (ár, készletállapot, cikkszám) a kívánt módon jeleníti meg. Egyszerű és változó termékekkel is működik.

A widgetet a **Globális widgetek** szakaszban kell bekapcsolni (lásd fent), majd a Bolt sablonba vagy bármely Elementor-oldalra be lehet húzni.

A **Terméklista** szakasz beállításai megegyeznek a Termékrácséval, a következő eltérésekkel:

| Beállítás | Mit csinál |
|---|---|
| **Bélyegkép pozíciója** | Bal, jobb vagy fent. A bélyegkép-effektus a Terméklistán nem működik. |
| **Készletállapot** | Bekapcsolva szerkeszthető a **Készleten felirat**, az **Utánrendelhető felirat** és a **Nincs raktáron felirat**. |
| **Értékelés**, **Nincs értékelés** | A **Nincs értékelés** kapcsoló az üres csillagokat is kiírja, ha nincs értékelés. |

A **Lekérdezés alapja**, a **Kizárás ID-k alapján**, a **Rendezés alapja** és a **Rendelés** csak akkor látszik, ha az **Aktuális lekérdezés használata** ki van kapcsolva.

A **Stílus** fül szakaszai: **Listaelem**, **Bélyegkép**, **Jelvények**, **Tartalom**, **Cím**, **Kategóriák**, **Ár**, **Készletállapotok**, **Értékelés**, **SKU**, **Gomb**, **Gyorsnézet** és **Nincs találati üzenet**. A listaelemnél függőleges igazítás (**Felül**, **Középen**, **Alul**, **Kinyújtás**), a listaelemek távolsága, normál és rámutatásos háttér, árnyék, szegély, lekerekítés és belső margó állítható. A bélyegképnél CSS-szűrők is (például elmosás, fényerő, kontraszt). Az **Ár** szakaszban az akciós ár a normál ár fölé vagy alá igazítható (blokk megjelenítési típussal).

A JetPopup, a JetEngine és a JetCompareWishlist esetén megjelenő szakaszok a Termékrácséval egyeznek. A Termékrácshoz hasonlóan a **Haladó** fülön többek között az **Elrendezés**, a mozgási hatások, a háttér, az attribútumok és az egyéni CSS állítható.

## Kategóriarács

A **Kategóriarács** a WooCommerce kategóriákat rácsban írja ki. Ahhoz, hogy jól mutasson, legyen néhány kategóriád névvel, bélyegképpel és leírással.

A **Kategóriarács** szakasz beállításai:

| Beállítás | Mit csinál |
|---|---|
| **Előbeállítások** | Más-más elrendezés: a leírás a választott előbeállítástól függően máshol jelenik meg. |
| **Oszlopok** | Az oszlopok száma, az Elementor egyéni töréspontjaival is kompatibilis, eszközönként külön. |
| **Rámutatás érintőképernyőn**, **Azonos oszlopmagasság** | Mint a Termékrácsnál. |
| **Oszlopok közötti térköz**, **Sorok közötti térköz** | Kapcsolható hézag az oszlopok és sorok között. |
| **Elem kattinthatóvá tétele**, **Megnyitás új ablakban** | A kártya kattinthatósága és az új ablakban nyitás. |
| **Kategóriák száma** | Hány kategória jelenjen meg. |
| **Lekérdezés alapja** | Az összes kategória, csak a szülőkategóriák, vagy kategóriák azonosító szerint. |
| **Kizárás ID-k alapján**, **Bevonás azonosítók alapján**, **Szülőkategória-ID** | A kategóriák szűrése azonosítók szerint. |
| **Rendezés alapja**, **Rendelés** | A rendezés szempontja (név, azonosító, darabszám) és iránya. |
| **Üres kifejezések elrejtése**, **Alkategóriák elrejtése**, **Nem kategorizált elrejtése** | Elrejti az üres kategóriákat, az alkategóriákat és a nem kategorizált kategóriát. |
| **Képméret** | A kategóriakép mérete. |
| **Cím**, **HTML-címke**, **Csonkolás típusa**, **Hossz** | A kategória nevének megjelenítése és hossza. |
| **Termékek darabszáma**, **Szám előtt**, **Szám után** | A kategória termékeinek száma és a szám előtti és utáni szöveg. |
| **Leírás hossza**, **Csonkítás utáni szöveg** | A leírás megjelenített szavainak száma és a levágott szöveg után kiírt jel. |

A **Körhinta** szakasz ugyanaz, mint a Termékrácsnál. A **Stílus** fülön az oszlopok, a kategóriaelemek (normál és rámutatásos), a bélyegkép, a tartalom, a cím, a darabszám és a nyilak, pontok formázhatók.

## Taxonómiai csempék

A **Taxonómiai csempék** a termékkategóriákat vagy címkéket kattintható csempék formájában írja ki. Jól mutat a kezdőoldalon, mert a termékkínálatot szempontok szerint szűkíti.

1. Ha címkéket is használsz, vedd fel őket a **Termékek → Címkék** oldalon (név, leírás, slug).
2. Nyisd meg az oldalt az Elementorban, és húzd be a **Taxonómiai csempék** widgetet.
3. A **Taxonómiai csempék** szakaszban állítsd be a tartalmat, majd a **Stílus** fülön a kinézetet.
4. Tedd közzé az oldalt.

A **Taxonómiai csempék** szakasz beállításai:

| Beállítás | Mit csinál |
|---|---|
| **Elrendezés** | A csempék elrendezése. |
| **Minimális magasság** | A csempék legkisebb magassága, eszközönként külön. |
| **Kiemelt doboz szélessége** | A kiemelt csempe szélessége. |
| **Sorok száma** | A sorok száma. |
| **Megnyitás új ablakban** | A csempe hivatkozását új ablakban nyitja meg. |
| **Taxonómia típusa** | Kategóriákat vagy címkéket mutat. |
| **Bevonás azonosítók alapján** | Csak a megadott azonosítójú elemek jelennek meg (vesszővel elválasztott lista). |
| **Kizárás ID-k alapján** | A megadott azonosítójú elemek kimaradnak. |
| **Rendezés alapja**, **Rendelés** | A csempék sorrendje. |
| **Üres kifejezések elrejtése** | Elrejti az üres kategóriákat vagy címkéket. |
| **Nem kategorizált elrejtése** | Elrejti a nem kategorizált kategóriát. |
| **Cím HTML-címkéje**, **Cím hossza** | A cím HTML-címkéje és hossza szavakban. |
| **Leírás hossza** | A leírás megjelenített hossza. |
| **Darabszámok megjelenítése** | A termékek száma, amelyhez megadható a **Pozíció** és a szám előtti és utáni szöveg (**Szám előtt**, **Szám után**). |

### Egyéni taxonómiák a csempékben

Alapból a widget a WooCommerce kategóriákat és címkéket mutatja. A gyermektémád `functions.php` fájljába írt kódrészlettel a saját (például JetEngine-nel létrehozott) taxonómiáid vagy a WordPress bejegyzéskategóriák is megjeleníthetők.

1. Hozd létre az egyéni taxonómiákat és hozzájuk a kép típusú metamezőket, majd töltsd fel a képeket.
2. A gyermektéma `functions.php` fájljában egy kódrészlettel regisztráld a taxonómiát a widget **Taxonómia típusa** listájába: a taxonómia kulcsához adj egy tetszőleges megjelenítendő nevet. Több taxonómiához minden sort ismételd meg a saját kulcsával.
3. Egy második kódrészlettel add meg, melyik metamezőből jöjjön az egyes taxonómiák képe. Több taxonómiánál a feltételt ismételd meg a saját nevekkel és azonosítókkal.
4. A bejegyzéskategóriákhoz ugyanezt a két kódrészletet használd a bejegyzéskategória (`category`) kulccsal, és a kép metamezőjét (például `category_featured_image`) add meg.
5. Húzd be a widgetet az oldalra, és ellenőrizd, hogy az egyéni taxonómiák megjelennek a **Taxonómia típusa** listában.

## Terméklista (ciklus) és lapozás a boltoldalon

A boltsablonba való **Terméklista** (ciklus) widget az archívumtétel sablonnal írja ki a termékeket, és két elrendezés közt váltható; a beállításai a [Bolt, archívum és kategóriák](https://hub.hellowp.io/hu/plugins/jet-woo-builder/bolt-es-archivum/) fejezetben vannak. A widget **Terméklista** szakaszán egy figyelmeztetés is áll: az egyéni sablon funkció használata előtt be kell kapcsolnod az egyéni termékarchívum opcióját a **WooCommerce → Beállítások → JetWooBuilder** fülön.

![A Terméklista (ciklus) widget beállításai](./kepek/widgetek-ciklus-beallitasok.webp)

*A Terméklista (ciklus) widget beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=elementor)

A képen a widget egyetlen szakasza látszik, a fenti figyelmeztetéssel.

### Termékek lapozása widget

A **Termékek lapozása** widget oldalakra bontja a termékarchívumon kiírt termékeket. A **Termékrács**, a **Terméklista** és a **Terméklista** (ciklus) widgettel kiírt termékekhez is használható. A widget az **Üzletoldali termékwidgetek** csoportban van, a **Crocoblock → JetPlugins Settings → JetWooBuilder → Widgetek** oldalon kapcsolhatod be. A termékeket kiíró widgetek közül legalább egyet szintén be kell kapcsolnod.

1. Hozz létre **Bolt** típusú sablont a **Crocoblock → Woo Page Builder** oldalon.
2. Húzd be a **Termékrácsot**, válassz előbeállítást, és kapcsold be az **Aktuális lekérdezés használata** kapcsolót, hogy az archívumok a saját termékeiket mutassák. A **Termékek száma** mezőben add meg, hány termék legyen egy oldalon (például 4).
3. Húzd be a **Termékek lapozása** widgetet a rács alá.
4. A **Tartalom** fülön a widget csak a fő lekérdezéssel működik. Az **Előző és következő oldalak hivatkozásainak engedélyezése** alapból be van kapcsolva; ilyenkor az **Előző címke**, az **Előző ikon**, a **Következő címke** és a **Következő ikon** átírható.
5. A **Stílus** fülön a lapozó, 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 az eredményt a weboldalon.

![A Termékek lapozása widget beállításai](./kepek/widgetek-lapozas-beallitasok.webp)

*A Termékek lapozása widget beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=elementor)

A képen az előző és következő oldal gombjainak felirata és ikonja látszik.

![Termékrács négy termékkel a weboldalon](./kepek/widgetek-termekracs-frontend.webp)

*Termékrács négy termékkel a weboldalon* (https://minta-bolt.hu/termekracs/)

A weboldalon a rács az oldalankénti terméket írja ki; a lapozó az archívumsablonban jelenik meg.

## WooCommerce-műveletek

A **WooCommerce-műveletek** widget a szokásos WooCommerce hookokat tölti be a tartalomba, így harmadik féltől származó bővítmények vagy saját kód kimenete bekerül a termékoldalra, az archívumba vagy a termékek listájába. A widget alapból be van kapcsolva a **Globális widgetek** között, és a JetEngine termékekhez készült listáiban is használható.

A widget a hookok mögé rendelt tartalmat hívja meg, és önmagában nem ad ki saját kimenetet vagy elrendezést: csak a hook hívását végzi, ezért kevesebb beágyazást generál.

Az elérhető hookok:

| Csoport | Hookok |
|---|---|
| Termékoldal | `woocommerce_before_single_product_summary` (az összefoglaló előtt), `woocommerce_single_product_summary` (a rövid leírásban), `woocommerce_after_single_product_summary` (az összefoglaló után) |
| Boltlista (egy termékelem) | `woocommerce_before_shop_loop_item`, `woocommerce_before_shop_loop_item_title`, `woocommerce_shop_loop_item_title`, `woocommerce_after_shop_loop_item_title`, `woocommerce_after_shop_loop_item` |

A hookok kódja a WooCommerce `templates/content-product.php` (archívum) és `templates/content-single-product.php` (termékoldal) fájljában található. A widget **Tartalom** és **Haladó** fülén választhatod ki, melyik hookot hívja meg.