Dinamikus listázás: egyéni WooCommerce-termékkártya az intelligens ciklusszerkesztővel

Egy WooCommerce-termékkártyának olyan adatok is kellenek, amelyek egy sima blogkártyán nincsenek: ár, akciós ár, Kosárba gomb. A Dinamikus listázás widget Intelligens ciklusszerkesztő (béta) stílusa termékekkel is ugyanúgy működik, mint más bejegyzéstípusokkal: a kártyát saját HTML-ben és CSS-ben írod meg, és a termék adatait dinamikus címkékkel illeszted be a címe és a kiemelt képe mellé.

A widget Pro, a The Plus Addons → Widgets oldalon be kell kapcsolni. Ehhez az Elementor és az aktív WooCommerce kell, legalább egy közzétett termékkel. A szerkesztő általános használatát, a mintákat és a bejegyzés dinamikus címkéit a Blog/bejegyzések listája: egyéni kártya fejezet írja le.

Lépések

1. Add az oldalra a Dinamikus listázás widgetet.
2. A Tartalom elrendezése szakaszban a Bejegyzés típusa mezőben válaszd a Termékek értéket.
3. A Stílus ikonjai közül válaszd az utolsót, az intelligens ciklusszerkesztőt.

https://minta-bolt.hu/wp-admin/post.php?post=205&action=elementor

A képen a Bejegyzés típusa mezőben a Termékek szerepel, és az utolsó stílus van kijelölve. A szakaszok között megjelent az Intelligens ciklusszerkesztő (béta).

4. Nyisd meg az Intelligens ciklusszerkesztő (béta) szakaszt. A HTML mezőbe írd a kártya szerkezetét, a CSS mezőbe a hozzá tartozó stílust.

https://minta-bolt.hu/wp-admin/post.php?post=205&action=elementor

A képen a HTML mezőben egy article kártya látszik a kiemelt képpel, a címmel, az árral és a Kosárba gombbal, alatta a CSS mezőben a hozzá tartozó szabályok.

Termékhez használható címkék

A termékeknél a bejegyzés általános címkéi (például {{tpae_title}}, {{tpae_permalink}}, {{tpae_image}}) mellett ezek is elérhetők:

Címke	Mit ír ki
{{tpae_product_price}}	a termék ára (az akciós árral együtt, ha van)
{{tpae_product_regular_price}}	a normál ár
{{tpae_product_sale_price}}	az akciós ár
{{tpae_product_sku}}	a termék cikkszáma (SKU)
{{tpae_product_add_to_cart}}	a Kosárba gomb

Változó termék esetén a normál és az akciós ár tartományként jelenik meg.

A példa HTML:

<article class="termek-kartya">
  <a href="{{tpae_permalink}}">{{tpae_image}}</a>
  <h3>{{tpae_title}}</h3>
  <div class="ar">{{tpae_product_price}}</div>
  {{tpae_product_add_to_cart}}
</article>

https://minta-bolt.hu/dl1-lista-termek/

A képen négy füzet látszik saját kártyával: cím, ár és a Kosárba teszem gomb. A WooCommerce gombja a saját árát is kiírja, ezért az ár a gomb mellett még egyszer látszik. Ha ez zavar, hagyd el a {{tpae_product_price}} címkét, vagy a gomb helyett csak az árat használd.

Szűrés termékkategória szerint

A Tartalom forrása szakaszban az osztályozás mezőben a WooCommerce saját osztályozásai is kiválaszthatók (termékkategória, termékcímke, márka). A Kategória szerinti szűrés így a termékrácsot ugyanúgy szűri, mint egy blogot. A fenti képen a rács fölött a termékkategóriák gombjai látszanak (Mind, Bögrék, Füzetek, Táskák). A szűrő beállításait a Dinamikus listázás: AJAX szűrő fejezet írja le.

Beállítás	Mit csinál	Alapérték
Bejegyzés típusa	Termékek esetén a WooCommerce-termékeket kérdezi le	Bejegyzés
Stílus	Az intelligens ciklusszerkesztővel nyers HTML/CSS kártya	Stílus 1
Osztályozás (a Tartalom forrása szakaszban)	A termékkategória, termékcímke és márka is elérhető a szűréshez	Kategória

Hibaelhárítás

• Nem jelenik meg termék. Ellenőrizd, hogy a WooCommerce aktív, a Bejegyzés típusa Termékek, és van közzétett termék.
• A Kosárba gomb nem látszik. Írd be a HTML-be a {{tpae_product_add_to_cart}} címkét.