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

> Termékkártya írása HTML-ből és CSS-ből a Dinamikus listázás widgetben: bejegyzéstípus Termékek, ár, SKU és Kosárba gomb dinamikus címkékkel, szűrés termékkategória szerint.

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](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/bejegyzes-termek-listak-smart-loop/) 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**.

![A Tartalom elrendezése szakasz Termékek bejegyzéstípussal és az intelligens ciklusszerkesztő stílussal](./kepek/dinamikus-listak-lista-panel-elrendezes.webp)

*A Tartalom elrendezése szakasz Termékek bejegyzéstípussal és az intelligens ciklusszerkesztő stílussal* (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.

![Az Intelligens ciklusszerkesztő HTML és CSS mezője egy termékkártyával](./kepek/dinamikus-listak-lista-panel-ciklus.webp)

*Az Intelligens ciklusszerkesztő HTML és CSS mezője egy termékkártyával* (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:

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

![Termékkártyák az oldalon, saját HTML-lel és CSS-sel](./kepek/dinamikus-listak-lista-termek-elo.webp)

*Termékkártyák az oldalon, saját HTML-lel és CSS-sel* (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ő](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/dinamikus-listak-lista-ajax-url/) 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.