# Gyakorlati példák

> Változatok táblázata a termékoldalon, árazási tábla és összehasonlító táblák lépésről lépésre.

## Változatok táblázata a termékoldalon

Ezzel a változó termékek változatait táblázatban mutathatod a termékoldalon, a termékkategória-archívumot pedig külön táblázattal.

1. Nyisd meg a **WooCommerce → Beállítások → Terméktábla** oldalt.
2. A **Columns** lapon állítsd be a termékoldali táblázat oszlopait, például **Termék ID**, **Termék neve**, **Termékkép**, **Ár** és **Gombok**.
3. A **Gombok** oszlop **VARIATIONS** listájában válaszd azt a lehetőséget, amelyben a vásárló kiválaszthatja az attribútumokat (például szín és méret), és közvetlenül a táblából kosárba teheti a terméket.
4. Állítsd be a **Settings**, **Filters** és **Design** lapot, majd a **Presets Manager** gombbal mentsd el az előbeállítást, például „Változatok fül” néven.
5. A tartalomban megjelenő változattáblához kevesebb hely van, ezért ott töröld az **Termék ID** és az **Ár** oszlopot, és ezt is mentsd külön előbeállításként.
6. A kategória-archívumhoz készíts harmadik előbeállítást. Oszlopok: **Termék neve**, **Termékkép**, **Ár**, **Címkék**, **Gombok**. A **Gombok** oszlop **VARIATIONS** listájában válaszd a termékoldalra mutató „Bővebben” gombot (ez csak változó termékeknél működik). A **Filters** lapon kapcsold be az **Enable Filters** kapcsolót: az osztályozásszűrőnél a termékcímkéket válaszd, a keresőszűrőt hagyd alapon.
7. Az **Integration** lapon kapcsold be a **Termékkategóriák**, **Termékváltozatok fül** és **Termékváltozatok a tartalomban** helyszínt, és mindhez válaszd ki a megfelelő előbeállítást.
8. Kattints a **Beállítások mentése** gombra.

A termékoldalon a változattábla a termék összefoglalója alatt jelenik meg, a **Változatok** fül a WooCommerce fülei között. A kategória-archívumban a termékrács helyett szűrős terméktábla lesz.

### Egyedi sablon (JetWooBuilder)

Ha egyedi termékoldali sablont használsz, a változattáblát shortcode-dal is beteheted: a [shortcode-generátorban](https://hub.hellowp.io/hu/plugins/jet-product-tables/shortcode/) válaszd a **Product Variations** lekérdezést és a **Current product** forrást, másold ki a shortcode-ot, és illeszd be a sablon **Shortcode** widgetjébe. Ugyanígy tehetsz terméktáblát a terméklista- és kategória-archívum sablonjába is.

## Árazási tábla

Előfizetési csomagok táblázatát készíthetsz változó termékből.

1. Hozz létre egy új terméket (**Termékek → Új hozzáadása**), nevezd el, és a termékadatoknál válaszd a **Variálható termék** típust.
2. Az **Attribútumok** fülön vegyél fel egy új attribútumot, például „Előfizetési csomag” néven, az értékeket függőleges vonallal válaszd el: `Alap | Haladó | Prémium`. Jelöld be a „Változatokhoz használható” négyzetet, és mentsd az attribútumokat.
3. A **Változatok** fülön kattints a **Változatok létrehozása** gombra, majd nyisd ki a változatokat, és add meg az árat, a képet és a leírást.
4. Tedd közzé a terméket.
5. A **WooCommerce → Beállítások → Terméktábla** oldalon az **Columns** lapon add hozzá a **Teljes leírás** oszlopot, és töröld a **Termék neve** oszlopot, mert a csomag neve a leírásban szerepel. Az oszlopok **LABEL** mezőjét ürítsd ki, hogy ne legyen fejléc felirat.
6. A **Settings** lapon a **DIRECTION** legyen **Vertical** (vagy hagyd **Horizontal**, ha sorokban szeretnéd).
7. A **Design** lapon a **Table Body** szakaszban állíts be háttérszínt, váltakozó háttérszínt, szegélyt és belső margót.
8. Mentsd az előbeállítást (például „Előfizetések”), majd a **Beállítások mentése** gombbal az egészet.
9. Jelenítsd meg a táblát:
   - **Blokkal:** a **Product Table** blokk **Setup Table** ablakában a **Query** lapon válaszd a **Product Variations** típust, a **GET VARIATIONS FROM** listában a **Specific product ID(s)** lehetőséget, és add meg a termék azonosítóját. A **Columns** lapon válaszd ki az előbeállítást, majd **Done**.
   - **Elementor widgettel:** a **Query** lapon adhatod meg a megjelenítendő termékek azonosítóit az **Include Products** mezőben, a **Settings** lapon a **Direction** legyen **Vertical**, a **Filters** lapon pedig kapcsold ki az **Inherit global filters** kapcsolót, és ürítsd ki a szűrő típusát, ha nem kell szűrő.
   - **Shortcode-dal** (Elementorban vagy Bricksben): a generátorban a **Product Variations** lekérdezés és a **Specific product ID(s)** forrás, a **Columns** lapon az előbeállítás kiválasztása, majd a shortcode másolása a **Shortcode** elembe.

## Összehasonlító táblák

Három tipikus felhasználás, mindhez előbeállítás az alap. Hozz létre egy „Összehasonlító tábla” előbeállítást négy oszloppal (**Termékkép**, **Termék neve**, **Ár**, **Gombok**), a **Termékkép** és **Termék neve** oszlopnál kapcsold be a **Kapcsolt** kapcsolót, a **DIRECTION** legyen **Horizontal**, a szűrőket kapcsold ki, és mentsd.

### Stílusok összehasonlítása (blokk)

1. Keresd meg a **Termékek → Összes termék** listában az összehasonlítani kívánt termékek azonosítóit: vidd fölé az egeret a termék neve fölé, és olvasd le az „ID” értéket.
2. A cikkben szúrj be egy **Product Table** blokkot, és nyisd meg a **Setup Table** ablakot.
3. A **Query** lapon a **QUERY TYPE** legyen **Products**, és az **INCLUDE** mezőbe írd az azonosítókat vesszővel elválasztva.
4. A **Settings** lapon válaszd ki az előbeállítást, majd **Done**.

### Méretek összehasonlítása (shortcode)

Egy termék változatait mutatja, például méretenként más leírással.

1. A változó termék minden változatánál töltsd ki a **Leírás** mezőt (például a méreteket).
2. A shortcode-generátor **Query** lapján: **QUERY TYPE: Product Variations**, **GET VARIATIONS FROM: Specific product IDs**, és add meg a termék azonosítóját.
3. A **Columns** lapon töröld a **Termék neve** oszlopot, és adj hozzá **Teljes leírás** oszlopot. A mezők: **Termékkép**, **Teljes leírás**, **Ár**, **Gombok**.
4. A **Settings** lapon kapcsold ki a fejlécet és a láblécet, a **DIRECTION** legyen **Horizontal**.
5. A **Filters** lapon kapcsold ki az **Enable Filters** kapcsolót.
6. Generáld és másold ki a shortcode-ot, majd illeszd be a cikkbe egy **Shortcode** blokkba.

### Évszakos összehasonlítás (blokk, függőleges)

1. Gyűjtsd ki a termékek azonosítóit.
2. Szúrj be egy **Product Table** blokkot, és add meg az azonosítókat az **INCLUDE** mezőben.
3. A **Columns** lapon alakítsd ki a sorrendet: **Termék neve**, **Termékkép**, **Összegzés**, **Címkék**, **Ár**, **Gombok**.
4. A **Settings** lapon kapcsold ki a fejlécet és láblécet, a **DIRECTION** legyen **Vertical**.
5. A **Filters** lapon kapcsold ki az **Enable Filters** kapcsolót, majd **Done**.

### Stílus

Hogy a táblák illeszkedjenek a webhelyhez, a **WooCommerce → Beállítások → Terméktábla → Design** lapon állíts színeket, betűket és szegélyeket. Az előbeállításokban lévő változtatások minden táblán érvényesülnek, ahol az előbeállítást használod.