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

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.