# CartFlows-változatválasztók a listában

> A CartFlows Variation Swatches változatválasztók megjelenítése Listing Gridben a Woo Data elemmel, WC Product lekérdezésre építve.

Ha a webáruházad a CartFlows Variation Swatches bővítményt használja, a változatos termékek színes vagy képes választóit a JetEngine listázásában is megjelenítheted a **Woo Data** elemmel. Elementorban, a blokkszerkesztőben és Bricksben egyaránt működik.

## Követelmények

- WooCommerce, telepítve és aktívan.
- A CartFlows Variation Swatches bővítmény, aktívan.
- A JetEngine és a CartFlows Variation Swatches közötti kiegészítő (a JetEngine + CartFlows Variations Swatches addon), telepítve és aktívan.
- JetEngine, aktívan.

## 1. WooCommerce-lekérdezés

1. Nyisd meg a **JetEngine → Lekérdezéskészítő** oldalt, és kattints az új lekérdezés hozzáadására.
2. Az **Általános** részben add meg a lekérdezés nevét (például „WC lekérdezés”), a **Lekérdezés típusa** legyen **WC Product Query**.
3. A **WC Product Query** részben a **Product Status** legyen **Published (publish)**, a **Product Type** pedig **variable** (változatos termék).
4. Szükség szerint állíts be más lekérdezési beállításokat, és mentsd.

## 2. Listázási sablon

1. A **JetEngine → Listázások/komponensek** oldalon kattints az **Új elem hozzáadása** gombra.
2. A felugró ablakban a forrás legyen **Lekérdezéskészítő**, a **Query** listában válaszd ki az előbbi lekérdezést, add meg a sablon nevét, a nézet pedig legyen olyan, amelyben a Woo Data elérhető: **Elementor**, **Blokkok (Gutenberg)** vagy **Bricks**.
3. Kattints a sablon létrehozására, és a szerkesztőben add hozzá a **Woo Data** widgetet (blokkot, elemet) többször, mindegyiknél a **Data Type** legyen **Template Function**:

| Template Function | Mit mutat | Megjegyzés |
|---|---|---|
| **Product title** | A termék neve | Az **Add link** kapcsolóval a név a termékoldalra mutat. |
| **Post thumbnail** | A termék képe | Az **Add link** kapcsolóval a kép a termékoldalra mutat. |
| **CartFlows Variation** | A változatválasztók | A frontenden jelennek meg helyesen. |
| **Product price** | A termék ára | |
| **Add to cart** | A „Válassz lehetőséget” vagy kosárba gomb | |

4. Mentsd a sablont (**Publish**).

## 3. Listing Grid az oldalon

1. Nyisd meg az oldalt vagy sablont (például „Termékek”), és add hozzá a **Listing Grid** elemet. A **Listing** listában válaszd ki az elkészült sablont.
2. A **Wrapper Tags** mezőben válaszd az **Unordered list (UL > LI)** értéket, hogy az elrendezés a frontenden helyesen jelenjen meg.
3. Az **Advanced** fül **Layout** részében a **CSS Classes** mezőbe írd be: `listing-ul`.
4. Mentsd az oldalt.

Elementorban és a blokkszerkesztőben a `listing-ul` osztály kell. **Bricksben** viszont a `data-listing-ul` értéket írd a CSS-osztályok közé.

## Eredmény

A frontenden a Listing Grid a termékeket a változatválasztókkal együtt mutatja: a termék nevét, képét, a választókat, az árat és a kosárba gombot.