# WooCommerce-termékek listázása

> Terméklista dinamikus címkékkel, akciós és sikerlistás jelvények, kiemelt termékek dinamikus táblában, és termékértékelések listája SQL-lekérdezéssel.

Négy megoldás WooCommerce-adatok listázására: teljes terméklista dinamikus címkékkel, jelvények a termékeken, kiemelt termékek táblázatban, és a termék értékeléseinek listája. Mindegyikhez kell az aktív WooCommerce és JetEngine; a szerkesztő az Elementor (az ingyenes változat elég).

## Terméklista dinamikus címkékkel

Előfeltétel egy WooCommerce-termékekhez létrehozott egyéni bejegyzéstípus is.

### A WooCommerce-lekérdezés

1. A **JetEngine → Lekérdezéskészítő** oldalon kattints az **Új hozzáadása** gombra.
2. Add meg a nevet (például „Termékek”), a **Lekérdezés típusa** legyen **WC Products Query**, a **Products Status** pedig **Any**.
3. Mentsd az **Add Query** gombbal.

### A listázási sablon

1. A **JetEngine → Listázások/komponensek** oldalon az **Új elem hozzáadása** gombbal hozz létre sablont: a **Listing source** legyen **Query Builder**, a **Query** az imént létrehozott lekérdezés, add meg a nevet (például „Products_listing_items”), a **Listing view** pedig legyen **Elementor**. Kattints a **Create Listing Item** gombra.
2. Add hozzá egy szakaszt az elrendezéshez.
3. **Kép:** húzz be egy **Image** widgetet, és a **Choose Image** mező dinamikus címke gombjával válaszd a **WooCommerce Product Image** elemet. A **Link** legyen **Custom URL**, a dinamikus címke a **WooCommerce Product Field**, a **Settings** listában pedig **Product URL**.
4. **Cím:** húzz be egy **Heading** widgetet, a dinamikus címke a **WooCommerce Product Field**, a **Settings** **Title**. A **Link** mezőnél ugyanígy a **WooCommerce Product Field** és a **Product URL**.
5. **Értékelés:** egy **Star Rating** widgetnél a dinamikus címke a **WooCommerce Product Field**, a **Settings** pedig **Average Rating**.
6. **Ár:** egy **Text Editor** widgetnél a dinamikus címke a **WooCommerce Product Field**, a **Settings** **Price HTML String**.
7. **Kosárba gomb:** a szokásos Elementor **Button** widget a terméktípusnak megfelelő feliratot és hivatkozást mutatja. A szövegnél a dinamikus címke a **WooCommerce Product Field**, a **Settings** **Add to Cart Text**; a **Link** mezőnél ugyanez a címke, a **Settings** **Add to Cart Text URL**.
8. Frissítsd a sablont az **Update** gombbal.

Az oldalon húzd be a **Listing Grid** widgetet, és válaszd ki a sablont (lásd [Listing Grid widget](https://hub.hellowp.io/hu/plugins/jet-engine/listazas-listing-grid/)).

### Az akciós ár stílusa

Az akciós ár alapból dőlt betűs. Ha ugyanolyan stílust akarsz a rendes és az akciós árnak:

1. A sablonban a **Text Editor** widget **Advanced** fülén nyisd meg a **Layout** szakaszt, és a **CSS Classes** mezőbe írd: `listing-price`. Frissítsd a sablont.
2. A **Megjelenés → Testreszabás → További CSS** mezőbe illessz be egy `.listing-price` osztályra vonatkozó CSS-t a kívánt stílussal (például az áthúzott ár `del` és az akciós ár `ins` elemének betűstílusával), majd kattints a **Közzététel** gombra.
3. Frissítsd az oldalt a **Listing Grid** widgettel: az árak mostantól ugyanolyan stílusúak.

## Az akció végének megjelenítése visszaszámlálóval

A WooCommerce-termékek akciójának lejárati idejét a **Countdown Timer** widget és a dinamikus címkék mutatják. A példa a fenti terméklista sablonját (a „Products_listing_items” elemet) bővíti.

### A visszaszámláló

1. A **JetEngine → Listázások/komponensek** oldalon nyisd meg a termékek sablonját, és húzd be a **Countdown Timer** widgetet oda, ahol látszódnia kell.
2. A **General** beállításoknál kapcsold ki vagy be az idő egységeinek kapcsolóit.
3. A **Settings** fülön a **Due Date** mezőnél kattints a dinamikus címke gombra, és válaszd a **WooCommerce Product Field** elemet, a **Settings** listában pedig a **Date on Sale to** értéket. Ez adja az akció végét.
4. Ha kell, stílusozd, és kattints az **Update** gombra.
5. Tegyél a sablonba **Heading** widgetet is a szöveggel (például „Az akció vége:”), és frissítsd a sablont.

Eleinte két gond van: a visszaszámláló minden terméknél megjelenik, és nullákat mutat, függetlenül attól, hogy van-e megadott akciós záró dátum.

### Az akció időzítése

1. Nyiss meg egy akciós terméket, és kattints a **Szerkesztés** gombra.
2. Az **Általános** adatoknál, az akciós ár mellett kattints az **Ütemezés** hivatkozásra, és add meg az akció kezdetét és végét.
3. Frissítsd a terméket, és töltsd újra a listát: a visszaszámláló az adott termék végét mutatja.

A beállítás csak az adott termékre vonatkozik, ezért minden akciós terméknél be kell állítani az akció végét.

### A visszaszámláló elrejtése, ha nincs akció

1. Nyisd meg a termékek sablonját, jelöld ki a **Countdown Timer** widgetet, és az **Advanced** fül **Dynamic Visibility** részén kapcsold be az **Enable** kapcsolót.
2. A **Visibility condition type** legyen **Show element if condition met**.
3. A **Conditions** listából válaszd a **Greater than** feltételt: ez azt ellenőrzi, hogy az akció vége későbbi, mint a mostani idő.
4. A dinamikus címke gombbal válaszd a **WooCommerce Product Field** elemet, az akció végét adó beállítással (**Date on Sale to**).
5. A **Value** mezőbe írd: `now`. A **Context** legyen **Default**, az **Data type** pedig **Datetime**.
6. Ugyanezeket a láthatósági feltételeket állítsd be a **Heading** widgetnél is, hogy a szöveg is eltűnjön.
7. Kattints az **Update** gombra, és töltsd újra a listát: a nem akciós termékeknél nem jelenik meg a visszaszámláló.

## Akciós és sikerlistás jelvények

A jelvény egy szöveges **Heading** widget, amely feltételtől függően látszik. A listázási sablonban:

1. Nyisd meg a termékek sablonját. Ha a jelvényt a termékkártya tetejére teszed, előbb adj hozzá egy **Inner Section** elemet. Húzz be egy **Heading** widgetet.
2. **Akciós jelvény:** a **Title** mezőbe írd a feliratot (például „Akció!”), az **HTML Tag** legyen **span**. Az **Advanced** fülön nyisd meg a **Dynamic Visibility** szakaszt, és kapcsold be az **Enable** kapcsolót. A **Visibility condition type** legyen **Show element if condition met**, a **Conditions** pedig **Exist**. A dinamikus címke gombbal válaszd a **WooCommerce Product Field** elemet, a **Setting** mezőben pedig a **Plain Sale Price** értéket. Stílusozd a jelvényt, és frissítsd a sablont.
3. **Sikerlistás jelvény:** másold le a **Heading** widgetet (jobb gombbal **Duplicate**). A **Title** legyen például „Sikerlista”, állítsd be a stílusát, és a **Dynamic Visibility** szakaszban adj meg feltételt arra, hogy a termék sikerterméknek számít: a **Conditions** legyen **Greater than**, a mező a termék eladásainak száma, a **Value** pedig a küszöb (a példában öt eladás).
4. Frissítsd a sablont és az oldalt: a jelvények csak azoknál a termékeknél jelennek meg, amelyek teljesítik a feltételt.

## Kiemelt termékek dinamikus táblában

### A lekérdezés

1. A **JetEngine → Lekérdezéskészítő** oldalon az **Új hozzáadása** gombbal hozz létre lekérdezést (például „Kiemelt termékek”), a **Lekérdezés típusa** legyen **WC Product Query**.
2. A **General** fülön válaszd ki a **Product Status** értékét, ha kell (itt **Published (publish)**).
3. A **Specific** fülön kattints az **Add new** gombra, a **Feature** legyen **Featured**, a **Status** pedig **True**.
4. Mentsd az **Add Query** gombbal.

### A táblázat

1. A **JetEngine → JetEngine → Modulok** fülön ellenőrizd, hogy be van kapcsolva a **Dinamikus táblázatépítő** modul. Ha nem, kapcsold be, és várd meg a rövid telepítést. Kattints a **Go to Tables Builder** gombra.
2. Az **Add new** gombbal hozz létre táblázatot. Add meg a **Name** mezőt, a **Data Query** listában válaszd ki a lekérdezést, és kattints a **Fetch Data** gombra.
3. A **Columns** fülön a **New column** gombbal vedd fel az oszlopokat:
   - **Kép** oszlop: a **Column Content** legyen **Template**, a **Custom Template** listában pedig egy korábban elkészített listázási sablon, amely a **Dynamic Image** widgettel a **Featured Image** forrásból mutat képet.
   - **Cím** oszlop: a **Column Content** **Raw Value**, a **Data Source** **Post/Term/User/Object Field**, a **Select Field** **Title**.
   - **Kategória** oszlop: ugyanígy, a **Select Field** **Categories**.
   - **Ár** oszlop: ugyanígy, a **Select Field** **Plain Price**. Kapcsold be a **Customize Column Output** kapcsolót, és az **Output Format** mezőbe írd például: `%s Ft` (a `%s` a dinamikus érték helye, ami körül tetszőleges szöveget adhatsz).
4. A **Table Styles** fülön az oszlopfejlécek és cellák függőleges és vízszintes igazítását állíthatod. A **Reload Preview** gombbal megnézheted az előnézetet.
5. Kattints a **Create Table** gombra.

### A táblázat az oldalon

Add hozzá az oldalhoz a **Dynamic Table** widgetet (Gutenbergben, Elementorban és Bricksben is van), és válaszd ki a táblázatot. A **Content** szakasz beállításait és a **Style** fület szükség szerint módosítsd (például szegélyt adhatsz a fejlécnek és a törzsnek). Mentsd az oldalt: a táblázat a frontenden a kiemelt termékeket mutatja.

## Termékértékelések listája

A cél: az egyedi termékoldalon a termék értékeléseinek listája. Szükséges még a JetWooBuilder is (a példa az ő egyedi termék sablonját használja).

### SQL-lekérdezés az értékelésekhez

1. A **JetEngine → Lekérdezéskészítő** oldalon kattints az **Új hozzáadása** gombra. Add meg a nevet (például „Termékértékelések”), a **Lekérdezés típusa** legyen **SQL/AI lekérdezés**.

![Az Új lekérdezés hozzáadása oldal SQL/AI lekérdezés típussal](./kepek/listazas-2-sql-lekerdezes.webp)

*Az Új lekérdezés hozzáadása oldal SQL/AI lekérdezés típussal* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=add)

A képen a **Lekérdezés típusa** mezőben az **SQL/AI lekérdezés** látszik; ennek a fülén állítod be a táblákat és a feltételeket.

2. A **Custom SQL Query** részben a **From table** listából válaszd a `commentmeta` táblát, és kapcsold be a **Use Join** kapcsolót.
3. A **Join Type** legyen **Inner Join**, a **Join Table** `comments`. A **When current table column** mezőbe `comment_ID`, az **Is equal to other table column** mezőbe `column_id` kerül.
4. A **Where** részben az **Add new** gombbal vedd fel a feltételeket:
   - a `commentmeta.meta_key` **Equal** `rating`, így kapod meg az értékelés pontszámát;
   - a `comments.comment_post_ID` **Equal** **Current ID**, így csak az aktuális termék értékelései jönnek;
   - a `comments.comment_approved` **Equal** `1`, így csak a jóváhagyott értékelések.
5. Mentsd az **Add Query** gombbal.

### A listázási sablon

1. A **JetEngine → Listázások/komponensek** oldalon az **Új elem hozzáadása** gombbal hozz létre sablont: a **Listing source** legyen **Query Builder**, a **Query** az SQL-lekérdezés, a nevet add meg (például „Termékértékelések listája”), a nézet Elementor.
2. A **Dynamic Field** widgettel írd ki az adatokat. A **Source** legyen **Post/Term/User/Object Data**, az **Object Field** listában a **Hozzászólás** szakasz mezői közül válassz. Például a **Post ID** mezőnél kapcsold be a **Filter field output** kapcsolót, és válaszd a **Get post/page title** visszahívást: ez a termék címét mutatja, amelyhez az értékelés tartozik.
3. A csillagos értékelést az Elementor **Rating** widgetje mutatja: a **Rating** mezőnél a dinamikus címke gombbal válaszd a **Current Object Field** elemet, és a lekérdezéshez tartozó szakaszból a `meta_value` mezőt.
4. Az értékelés szövegét egy másik **Dynamic Field** mutatja az **Object Field** **Content** értékével.
5. Tedd közzé a sablont.

### A lista a termékoldalon

1. A **Woo Page Builder** oldalon nyisd meg az egyedi termékoldal sablonját szerkesztésre.
2. Adj hozzá **Listing Grid** widgetet, és válaszd ki a termékértékelések sablonját. Stílusozd, majd tedd közzé.
3. Nyiss meg egy terméket a frontenden: a lista az adott termék értékeléseit mutatja.