# Kosár elemek: Kosár összesen, Kosárkupon, Kosár tételei és Kosár (v2)

> A WooCommerce Kosár oldal Bricks elemei: az összesítő, a kuponmező, a tételek táblázata és az állapotokra bontott Kosár (v2).

A kosár elemek a WooCommerce **Kosár** oldalát építik fel. Csak Kosár oldal sablonban használd őket, külön Kosár sablonban, különben más oldalakon üres marad a kimenet. A kosár tételeit, az összesítőt és a kuponmezőt formázd egységesen (térközök, táblázatstílus), hogy a kosár könnyen használható legyen.

## Kosár összesen

A kosár végösszegét és a hozzá tartozó kiegészítő tartalmat jeleníti meg.

![A Kosár összesen elem beállításai](./kepek/elemek-10-cart-collaterals.webp)

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

| Beállítás | Mit csinál |
| --- | --- |
| Keresztértékesítések letiltása | Kikapcsolja a kosár alatti keresztértékesítési (cross-sell) termékeket. |
| Cím elrejtése | Elrejti az összesítő címsorát. |
| Cím | A címsor tipográfiája. |
| Részösszeg | A részösszeg sorának tipográfiája. |
| Összeg | A végösszeg sorának tipográfiája. |

A **Stílus** fülön a **Táblázat** csoportban margót, belső távolságot és szegélyt, a **Gomb** csoportban (a pénztárra lépő gomb) szélességet, hátteret, szegélyt és tipográfiát állíthatsz.

## Kosárkupon

A kuponkód beviteli mezője a Kosár oldalon.

![A Kosárkupon elem beállításai](./kepek/elemek-10-cart-coupon.webp)

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

| Beállítás | Mit csinál |
| --- | --- |
| Kosár frissítése AJAX-szal | A kupon beváltása oldalújratöltés nélkül frissíti a kosarat. |
| Irány | A beviteli mező és a gomb egymás mellett vagy egymás alatt áll. |

A **Beviteli mező** csoportban a helykitöltő szöveget, a szélességet, a háttérszínt, a szegélyt és a helyőrző tipográfiáját állíthatod. A **Gomb** csoportban a gomb szövege, szélessége, margója, háttérszíne, szegélye és tipográfiája adható meg.

## Kosár tételei

A kosár termékeinek táblázata, soronként a termékkel és a mennyiségváltoztató vezérlőkkel.

![A Kosár tételei elem beállításai](./kepek/elemek-10-cart-items.webp)

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

A **Stílus** fül csoportjai:

| Csoport | Mire vonatkozik |
| --- | --- |
| Termékek | A táblázat: a hivatkozás letiltása, a fejléc elrejtése, háttér, szegély és tipográfia; a törzs; a termékkép (letiltás, szélesség). |
| Gombok | A kosár gombjainak stílusa. |
| Kupon | A táblázatban megjelenő kuponrész stílusa. |

## Kosár (v2)

A WooCommerce Kosár oldalt két szerkeszthető állapotként jeleníti meg: **Megtöltött kosár** és **Üres kosár**. Csak a Kosár oldalon működik. Az elem a haladó moduláris WooCommerce elemek bekapcsolása után jelenik meg az elemlistában.

![A Kosár (v2) elem állapotai](./kepek/elemek-10-cart-v2.webp)

*A Kosár (v2) elem állapotai* (https://minta-bolt.hu/elemek-teszt/?bricks=run)

A tartalom fülön az **Állapot** választó kapcsol a két előnézet között:

| Állapot | Mikor használja a bolt |
| --- | --- |
| Megtöltött kosár | Ha a kosárban van termék. A szerkesztőben az aktuális vagy minta kosarat mutatja. |
| Üres kosár | Ha a kosár üres. |

A generált szerkezet mindkét állapotot belső gyermekelemként tartja, így a **Szerkezet** panelen külön szerkesztheted őket.

### Generált szerkezetek

Minden állapothoz a **Szerkezet beszúrása** funkcióval kiinduló tartalom generálható: teljes kosár blokk vagy teljes üres kosár blokk. A generált tartalom az állapot meglévő tartalma után kerül be, nem írja felül azt.

### Lekérdezések és dinamikus adatok

Egyéni kosársorokhoz használd a Kosár tartalma lekérdezéstípust. A Kosár (v2) elrendezésben a kosár összesítő címkéi is használhatók:

- `{woo_cart_items_count}`
- `{woo_cart_order_subtotal}`
- `{woo_cart_order_total}`
- `{woo_cart_shipping_method}`
- `{woo_free_shipping_remaining}`
- `{woo_free_shipping_progress}`

### Tippek

- A javasolt Kosár (v2) szerkezetet a haladó moduláris WooCommerce elemekkel vagy a Woo beállítási varázslóval hozhatod létre.
- Mindkét állapotot tervezd meg, hogy a kosár oldal akkor is teljes legyen, ha a vásárlónál van termék a kosárban, és akkor is, ha nincs.
- Ha külön Kosár és Üres kosár sablont szeretnél, használhatod a klasszikus Kosár sablon munkamenetet is.