WooCommerce-termékek listázása

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

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.

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.