# Egyéni minikosár készítése Dinamikus töredékkel

> Offcanvas minikosár lépésről lépésre: generált szerkezet, fejléc kosárikon darabszámmal, megnyitás kosárba helyezés után, frissítés és korlátok.

A **Dinamikus töredék** elemmel a fő Kosár oldalon kívül is használhatsz kosártól függő tartalmat, például egyéni minikosarat a fejléc Offcanvas elemében, egy lenyíló menüben vagy felugró ablakban. A Dinamikus töredék a WooCommerce-kosár változása után újrarendereli önmagát és a gyermekeit. A minikosárhoz tedd a kosárcikluson és az összegeken kívül a töredékbe a tételek ciklusát és az összegeket, így a termékek sorai, a mennyiségek, a részösszeg és a gombok a kosárba helyezés, eltávolítás és mennyiségváltoztatás után is naprakészek maradnak.

## Szokásos felépítés

A minikosarat általában a fejléc sablonba teszed, és Offcanvas elemben jeleníted meg:

- A fejlécben van a kosár ikonja és a kosár darabszáma.
- A kosár ikonja átváltja az Offcanvast.
- Az Offcanvas a generált minikosár-szerkezetet tartalmazza.

Kisebb elrendezésekhez a generált minikosarat lenyílóba vagy felugró ablakba is teheted. Offcanvas akkor jó, ha több hely kell a termékeknek, a mennyiségvezérlőknek, az összegeknek és a pénztárhoz vezető gomboknak.

## Offcanvas minikosár létrehozása

1. Nyisd meg a fejléc sablont vagy azt az oldalt, ahol a minikosárnak meg kell jelennie.
2. Adj hozzá egy **Offcanvas** elemet.
3. Az Offcanvas tartalmi területére tegyél egy **Dinamikus töredék** elemet.
4. A Dinamikus töredék vezérlői között keresd a **Struktúra beszúrása** választót.
5. Válaszd a **Minikosár** lehetőséget.
6. Kattints a **Generálás** gombra.

A Bricks a generált szerkezetet a Dinamikus töredéken belülre fűzi hozzá, a meglévő gyermekelemeket nem cseréli le.

## Mit generál a Bricks

A generált Minikosár szerkezet már tartalmazza a kosártétel elrendezését, az összegeket és a gombokat. Nem kell őket kézzel hozzáadnod, csak ha át akarod tervezni vagy a tartalmukat módosítani szeretnéd.

A Dinamikus töredékben a Bricks ezeket hozza létre:

- egy Részletek burkolót, amely a minikosár tartalmát fogja közre,
- egy kosárciklust a **Kosár tartalma** lekérdezéstípussal,
- a cikluson belül egy kosársort: termékkép, terméknév, termékár, termékkivonat, tételadatok, mennyiségvezérlő, eltávolító ikon és a sor részösszege,
- üres kosár üzenetet a Kosár tartalma ciklusból,
- a kosárciklus után egy külön blokkot a részösszegnek és a műveletgomboknak,
- erre a részösszeg-/gombblokkra feltételt, hogy csak akkor jelenjen meg, ha a kosárciklus több mint `0` eredményt ad,
- a **Kosár megtekintése** és a **Pénztár** gombot WooCommerce URL dinamikus adattal.

A generált kosársor a kosárcímkéket használja a Kosár tartalma cikluson belül:

| Címke vagy elem | Mire való |
|---|---|
| `{featured_image}` | A termék képe. |
| `{woo_cart_product_title:plain}` | A termék címe sima szövegként, variációs metaadatok nélkül. |
| Kosártétel-adat | A variáció tulajdonságai és a kompatibilis bővítmények tételadatai. |
| `{woo_cart_quantity}` | A mennyiség beviteli mezője. |
| `{woo_cart_quantity:value}` | A mennyiség számként, szövegesen. |
| `{woo_cart_subtotal}` | A sor részösszege. |
| `{woo_cart_remove_link:url}` | Az eltávolító URL hivatkozáshoz vagy ikonhoz. |

Egyéni sorhoz a `{woo_cart_item_price}` címkét használd, ha az egységárat formázva, akciós ár jelöléssel kéred. A `{woo_cart_item_save}` a mennyiséget is figyelembe vevő megtakarítást adja, és feltételben a `{woo_cart_item_save:value}` formában használható.

A részösszeg és a gombok a Kosár tartalma cikluson kívül, de még a Dinamikus töredéken belül vannak:

| Elem | Dinamikus adat |
|---|---|
| Részösszeg | `{woo_cart_order_subtotal}` |
| Kosár megtekintése gomb URL-je | `{woo_url:cart}` |
| Pénztár gomb URL-je | `{woo_url:checkout}` |

A generált eltávolító ikon a `{woo_cart_remove_link:url}` címkét használja hivatkozásként. Tartsd meg az eltávolító elemen a `product-remove` CSS-osztályt, hogy a WooCommerce kosárműködése célba tudja venni.

## Kosár ikon a fejlécben

A fejléc sablonban, a navigáció közelében adj hozzá egy második Dinamikus töredéket a kosár ikonnak és a darabszámnak. Ennek csak a kis kosárindítót kell tartalmaznia, a teljes minikosarat nem.

A fejléc Dinamikus töredékében:

1. Adj hozzá egy **Ikon** elemet, és válassz kosárikont.
2. Adj hozzá egy **Text basic** elemet a kosár darabszámának.
3. A darabszám szövege legyen `{woo_cart_items_count}`.
4. Pozícionáld a darabszámot kis jelvényként a kosárikon fölé.
5. Adj a darabszámra elemfeltételt, hogy csak akkor jelenjen meg, ha a `{woo_cart_items_count}` értéke nagyobb, mint `0`.
6. Adj interakciót a kosárikonra:
   - Eseményindító: **Kattintás**
   - Művelet: **Offcanvas átváltása**
   - Offcanvas: CSS-választó, a cél Offcanvas elem azonosítója, például `#brxe-evudao`

Mivel az ikon és a darabszám a Dinamikus töredékben van, a darabszám a kosár változása után frissül. A fejléc többi részét tartsd a töredéken kívül, kivéve, ha az is kosáradattól függ.

## Offcanvas megnyitása kosárba helyezés után

A minikosár Offcanvasát megnyithatod, amikor egy termék AJAX-szal kerül a kosárba. Az Offcanvas elemen adj hozzá egy interakciót:

- Eseményindító: **Kosárba helyezve**
- Művelet: **Offcanvas átváltása**
- Offcanvas: CSS-választó, az Offcanvas elem azonosítója

Ha nem akarod, hogy ez a pénztáron is működjön, adj feltételt az Offcanvasra. Például csak akkor jelenjen meg, ha az aktuális URL nem tartalmazza a `{woo_url:checkout}` címkét.

Ha az Offcanvasnak csak hozzáadás után kell váltania, maradj a **Kosárba helyezve** eseményindítónál. A 2.4-es verziótól elérhető „kosár tartalma megváltozott” eseményindító a sikeres AJAX-os mennyiségváltoztatás és eltávolítás után is lefut, ezért az **Offcanvas átváltása** művelettel ezeknél a frissítéseknél is átváltaná a minikosarat.

## A frissítés kipróbálása

A Dinamikus töredék a látogatói oldalon frissül a WooCommerce kosáreseményei után: kosárba helyezés, eltávolítás, kosár kiürítése, kosár összegeinek frissítése, pénztár frissítése, kupon alkalmazása és eltávolítása.

A Bricks „dinamikus töredékek frissítve” interakciós eseménye jelzi, hogy a töredék tartalma kicserélődött. Ez futhat a kezdeti szinkronizálás vagy a pénztári újraszámolás közben is, kosártétel-változás nélkül. Ha egyéni „Kosár frissítve” visszaigazolást akarsz mutatni, használd a „kosár tartalma megváltozott” eseményt, mert az megvárja a megerősített tételváltozást és a kapcsolódó felületi frissítéseket.

A minikosár kipróbálása:

1. Nyisd meg a minikosarat tartalmazó oldalt a látogatói oldalon.
2. Tegyél egy terméket a kosárba.
3. Ellenőrizd, hogy a minikosár az oldal újratöltése nélkül frissül.
4. Ellenőrizd, hogy a fejléc kosárszámlálója is frissül.
5. Kattints a kosár ikonjára, és ellenőrizd, hogy az Offcanvas kinyílik.
6. Ha az elrendezésed tartalmaz mennyiségvezérlőt, töröld a tételt vagy változtasd a mennyiséget.
7. Ellenőrizd, hogy a sorok, a részösszeg és a gombok továbbra is jól jelennek meg.

## Korlátok

- A Dinamikus töredék csak a látogatói oldalon működik.
- A Dinamikus töredék burkolóját tartsd más lekérdezési cikluson kívül. A Kosár tartalma ciklus lehet a töredéken belül.
- Komponenspéldányok nem támogatottak.
- A töredéknek a fejlécből, a tartalomból vagy a láblécből kell megjelennie.
- A töredék csak kosártól függő tartalmat foglaljon magában. A statikus fejléc-, menü- vagy elrendezéselemeknek nem kell benne lenniük.

A Dinamikus töredék és a Minikosár elem beállításait az [Elemek: Dinamikus töredék és Minikosár](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-dinamikus-toredek-minikosar/) fejezet, az interakciókat a [Interakciók](https://hub.hellowp.io/hu/plugins/bricks-child/funkciok-interakciok/) fejezet írja le.