# Dinamikus töredék és Minikosár

> A kosárfüggő tartalmat frissítő Dinamikus töredék elem és a kosár ikonját, darabszámát és lenyíló részleteit mutató Minikosár elem beállításai.

## Dinamikus töredék

A **Dinamikus töredék** a kosártól függő tartalmat újrarendereli, amikor megváltozik a WooCommerce-kosár. Fejlécben, tartalomban és láblécben használhatod, ott, ahol a tartalomnak a kosárváltozás után frissülnie kell: ingyenes szállítás felé tett előrehaladás, kosár végösszege vagy egyéni minikosár-tartalom.

![A Dinamikus töredék elem beállításai](./kepek/elemek-11-dynamic-fragment.webp)

*A Dinamikus töredék elem beállításai* (https://minta-bolt.hu/elemek-teszt/?bricks=run)

A **Tartalom** fülön a **Struktúra beszúrása** választóból kész kiindulási szerkezetet választhatsz, majd a **Generálás** gombbal beszúrhatod. Az aktuális struktúrához fűzi hozzá, soha nem írja felül a meglévő tartalmat. Két szerkezet közül választhatsz:

- **Minikosár**
- **Haladás az ingyenes szállítás felé**

Az elemnél a HTML-címke (alapértelmezés szerint `div`) és a megjelenítés (alapértelmezés szerint `block`) is állítható.

### Egyéni minikosár készítése

Egyszerű, egyéni minikosarat így készíthetsz:

1. Tegyél egy Dinamikus töredék elemet oda, ahol a minikosárnak meg kell jelennie.
2. Tegyél bele egy tárolót, és kapcsold be rajta a Kosár tartalma lekérdezési ciklust.
3. A cikluson belül tervezd meg a kosártétel sorát.
4. Használj kosártétel-címkéket, például `{featured_image}`, `{woo_cart_product_name}`, `{woo_cart_quantity:value}`, `{woo_cart_subtotal}` és `{woo_cart_remove_link:url}`.
5. A kosár összegeit mutató címkéket a cikluson kívülre, de még a Dinamikus töredéken belülre tedd. Ilyenek a `{woo_cart_items_count}`, `{woo_cart_order_subtotal}`, `{woo_cart_order_total}`, `{woo_free_shipping_remaining}` és `{woo_free_shipping_progress}`.

A töredék csak olyan tartalmat tartalmazzon, amelynek a kosárba tétel, a kosárból törlés vagy a mennyiségváltozás után frissülnie kell. A Dinamikus töredék burkolóját tartsd lekérdezési cikluson kívül, a kosárciklus viszont mehet a töredékbe.

### Mikor frissül

A töredék a WooCommerce kosár-, kupon- és pénztáresemények után frissül: kosárba tételkor, kosárból törléskor, a kosár kiürítésekor, az összegek frissülésekor, a pénztár frissülésekor, valamint kupon alkalmazásakor és eltávolításakor.

A frissítés után a Bricks újra lefuttatja a frontend függvényeit, és elküld egy eseményt a `document.body`-n:

```js
document.body.addEventListener('bricks/woocommerce/fragments/refreshed', (event) => {
  console.log(event.detail.fragments)
})
```

Ez az esemény az első szinkronizálásra és azokra a pénztári újraszámolásokra is lefut, amelyek nem változtatják a kosár tételeit. Egyéni sikerüzenethez vagy felugró ablakhoz inkább a „Kosár tartalma megváltozott” interakciós indítót használd: a megerősített AJAX-hozzáadás, -törlés vagy mennyiségváltozás és a hozzá tartozó felület frissítése után fut le.

### Korlátozások

- A Dinamikus töredék csak a weboldalon (frontenden) működik.
- A burkolót ne tedd lekérdezési cikluson belülre.
- A komponenspéldányok nem támogatottak.
- A forrásterület csak fejléc, tartalom vagy lábléc lehet.

## Minikosár

Kosár ikont mutat darabszámmal, és lenyíló kosárrészleteket.

![A Minikosár elem beállításai](./kepek/elemek-11-mini-cart.webp)

*A Minikosár elem beállításai* (https://minta-bolt.hu/elemek-teszt/?bricks=run)

A **Tartalom** fülön a következők állíthatók:

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Ikon | A kosár ikonja. | Kosár ikon |
| Ikon tipográfiája | Az ikon tipográfiája. Csak megadott ikonnál érhető el. | |
| Megnyitás kosárba tételkor (AJAX) | Kinyitja a minikosarat, ha AJAX-szal termék kerül a kosárba. | Ki |

### Kosár tételszáma

| Beállítás | Mit csinál |
| --- | --- |
| Láthatóság | A darabszám elrejtése vagy mindig mutatása. Alapértelmezés szerint üres kosárnál rejtett. |
| Háttérszín | A darabszám jelvényének háttere. |
| Szegély | A jelvény szegélye. |
| Tipográfia | A jelvény tipográfiája. |
| Átalakítás | A jelvény átalakítása (nem érhető el, ha a lenyíló rész fent vagy lent nyílik). |
| Magasság, Szélesség | A jelvény mérete. |
| Top, Jobb, Alul, Bal | A jelvény pozíciója. |

A jelvény beállításai csak akkor érhetők el, ha a **Láthatóság** nem „mindig rejtett”.

### Kosár részösszege

| Beállítás | Mit csinál |
| --- | --- |
| Pozíció | A részösszeg az ikontól jobbra vagy balra jelenjen meg. |
| Térköz | Az ikon és a részösszeg közti távolság. |
| Tipográfia | A részösszeg tipográfiája. |

A térköz és a tipográfia csak megadott pozíciónál érhető el.

### Kosár részletei

A lenyíló kosárrészletek beállításai. Ha az **Elrejtés** be van kapcsolva, a lenyíló rész nem jelenik meg, és az alábbiak közül a többi nem érhető el.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| Elrejtés | Elrejti a lenyíló kosárrészleteket. | Ki |
| Minikosár bezárásának megakadályozása külső kattintás esetén | A minikosár nem csukódik be, ha mellé kattintasz. | Ki |
| Off-Canvas | Az oldalsó panel iránya: fent, jobbra, lent vagy balra. | Letiltva |
| Magasság | A részletek magassága (fent vagy lent nyíló panelnél nem érhető el). | |
| Szélesség | A részletek szélessége (fent vagy lent nyíló panelnél nem érhető el). | 400px |
| Kép szélessége | A termékkép szélessége. | 60px |
| Padding | A részletek belső távolsága. | |
| Pozíció | A részletek pozíciója (csak kikapcsolt Off-Canvas esetén). | |
| Átalakítás | A részletek átalakítása (fent vagy lent nyíló panelnél nem érhető el). | |
| Háttér | A részletek háttérszíne. | |
| Szegély | A részletek szegélye. | |
| Dobozárnyék | A részletek árnyéka. | |
| Tipográfia (cím) | A cím tipográfiája. | |
| Tipográfia (mennyiség) | A mennyiség tipográfiája. | |

**Gombok:** a háttérszín, a szegély és a tipográfia állítható.

**Bezárás:** a bezárás ikon és a hozzá tartozó beállítások, ha van ikon megadva: tipográfia (betűtípus, vastagság, stílus, igazítás, díszítés, átalakítás, sormagasság és betűköz nélkül), pozíció, belső távolság, háttérszín és szegély.