Woo Data widget, blokk és elem

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 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.