# Woo Data widget, blokk és elem

> A WooCommerce sablonfüggvényei és horgai a JetEngine listázásban: Woo Data Elementorban, a blokkszerkesztőben és Bricksben, valamint a változatválasztók megjelenítése.

A klasszikus WooCommerce-funkciók szabványos horgokra (hook) és sablonfüggvényekre épülnek. A blokkszerkesztő-integráció bővülésével ez változik, de sok harmadik fél bővítménye még ezeket használja a WooCommerce-integrációhoz. A **Woo Data** a JetEngine listázásokban teszi lehetővé ezeknek a megjelenítését. Korábban ez csak kódrészletekkel vagy rövidkódokkal volt elérhető.

A widget/blokk/elem három szerkesztőben érhető el: Elementorban a widgetek panel **Listing Elements** részében, a blokkszerkesztőben **Woo Data** blokkként, Bricksben **Woo Data** elemként.

## Mikor használd

A Woo Data olyan JetEngine-listázásban működik, amely **WC Product Query** (WooCommerce-termék lekérdezés) típusú lekérdezést használ. A szkriptek megfelelő futásához a listázás burkolócímkéi legyenek `<ul>` és `<li>` (a **Listing Grid** beállításainál az **Unordered list (UL >LI)** **Wrapper tags**).

Különbségek a **Dynamic Field** widgethez képest:

- a horgokat a **Dynamic Field** nem tudja hívni, ezért harmadik fél elemeit nem lehet vele beilleszteni;
- a **Dynamic Field** alacsonyabb szintű elemeket ad ki (például a termék kosárba URL-jét), míg a Woo Data a teljes gombot rendereli;
- a Woo Data kimenetéhez nincsenek stílusbeállítások: ez könnyű módszer a WooCommerce sablonelemek megjelenítésére, lényegében a kódos hívással egyenértékű, a stílus az aktuális sablonból (témából) jön.

A harmadik féltől származó megoldásokkal, például a változatválasztók bővítményeivel való kompatibilitást is ez a widget teszi lehetővé. Szabványos sablonfüggvényekkel a listák és a többi WooCommerce-elem kinézete egységes marad.

## Előkészületek a termékváltozatokhoz

A WooCommerce-termékváltozatok megjelenítéséhez aktív kell legyen a WooCommerce, a Variation Swatches for WooCommerce és a JetEngine + CartFlows Variations Swatches kiegészítő. Emellett:

1. hozd létre a termékváltozatokat;
2. építs **WC Product Query** lekérdezést a termékváltozatok megjelenítéséhez;
3. a Woo Data elemet abba a listázási sablonba tedd, amely erre a lekérdezésre épül.

A részletes lépéseket a [CartFlows-változatválasztók a listában](https://hub.hellowp.io/hu/plugins/jet-engine/listazas-cartflows-swatches/) fejezet írja le.

## Lekérdezés és listázás Bricksben (példa)

1. A **JetEngine → Lekérdezéskészítő** oldalon kattints az **Új hozzáadása** gombra. Add meg a nevet („WC Query”), a típus legyen **WC Product Query**.
2. A **WC Product Query** részben állítsd a **Product Status** értékét **Published (publish)**, a **Product Type** értékét **variable** (változó) típusra. További beállításokat is megadhatsz. Kattints az **Add Query** gombra.
3. Nyisd meg a **JetEngine → Listázások/komponensek** oldalt, és kattints az **Új hozzáadása** gombra. A felugró ablakban a **Listing source** legyen **Query Builder**, a **Query** az imént készített lekérdezés, add meg a **Listing item name** értéket, a **Listing view** pedig legyen **Bricks**. Kattints a **Create Listing Item** gombra.
4. A Bricksben keresd meg a **Woo Data** elemet, és tedd az oldalra. A **General** fülön állíthatod be.

## A Woo Data beállításai

| Beállítás | Mit csinál |
|---|---|
| **Data Type** | A megjelenítendő WooCommerce-adat típusa: **Hook** vagy **Template Function**. |

Ha a **Hook** értéket választod:

| Beállítás | Mit csinál |
|---|---|
| **Hook Name** | A hívandó horog: **Before product**, **Before product title**, **Product title**, **After product title**, **After product**. |
| **Core Callbacks** | A szabványos WooCommerce-visszahívások szerepeltetése vagy elhagyása ezen a horgon. Alapból be van kapcsolva; kikapcsolva az alap WooCommerce-visszahívások nem futnak le ezen a horgon. Ez a WooCommerce magján kívüli, horgokkal hozzáadott funkciók beillesztéséhez hasznos. |

Ha a **Template Function** értéket választod:

| Beállítás | Mit csinál |
|---|---|
| **Template Function** | A megjelenítendő termékfüggvény (lásd lent). |
| **Add Link** | A **Product thumbnail** és a **Product title** függvénynél jelenik meg. Bekapcsolva a függvény kimenetét a termék egyedi oldalára mutató linkbe csomagolja. Alapértelmezetten ki van kapcsolva. |

A **Template Function** lehetőségei:

| Függvény | Mit ad a listához |
|---|---|
| **Add to cart** | Az „Add to cart” / „Select options” gombot. |
| **Quantity input** | A mennyiségválasztót. |
| **Product thumbnail** | A termék bélyegképét. Az **Add Link** kapcsolóval a képre kattintva a termék egyedi oldalára jutnak a látogatók. |
| **Product title** | A termék nevét. Az **Add Link** kapcsolóval a névre kattintva az egyedi oldalra jutnak. |
| **Product price** | A termék árát. |
| **Product rating** | A termék értékelését. |
| **Product sale flash** | Az akciós jelvényt. Bricksben a „Sale” jelvény csak akkor látszik, ha a **Bricks → Beállítások → WooCommerce** fül **Products** részének **Product Badge „Sale”** mezőjében a **Text** vagy a **Percentage** értéket választod. |
| **Product meta** | A termék metaadatait. |
| **CartFlows Variation Swatches** | A CartFlows Variations Swatches bővítmény termékváltozat-választóit. Csak akkor érhető el, ha a WooCommerce, a Variation Swatches for WooCommerce és a JetEngine + CartFlows Variations Swatches kiegészítő telepítve és aktív. |

A blokkszerkesztő **Woo Data** blokkjában a **General** beállítások ugyanezek, az **Advanced** beállítások között pedig az **ADDITIONAL CSS CLASS(ES)** szövegmező van a blokk módosításához. Az Elementor widget és a Bricks elem beállításai a fentiekhez hasonlók.

## Termékváltozatok megjelenítése

A termékváltozatok megjelenítéséhez a Woo Data widgeten/blokkon/elemen ezt állítsd be:

1. **Data Type**: **Template Function**;
2. **Template Function**: **CartFlows Variation Swatches**.

A **Listing Grid** oldalra (vagy bejegyzésre) helyezése után a **Wrapper tags** értéke legyen **Unordered list (UL >LI)**.

Az „Add to Cart” gomb megjelenítéséhez tegyél a listázásba egy másik Woo Data widgetet is: **Data Type**: **Template Function**, **Template Function**: **Add to cart**. Így a frontenden megjelennek a termékváltozat-választók.