# Kosár oldal

> A WooCommerce Kosár oldal két építési módja: Kosár v2 állapotokkal és a hagyományos sablonos mód, valamint az egyéni kosártétel-lista a Kosár tartalma ciklussal.

A **Kosár** a WooCommerce különleges oldala. A WooCommerce telepítésekor automatikusan létrejön, és a **WooCommerce → Beállítások → Haladó** oldalon van hozzárendelve. A Bricks két módon építi fel:

- **Kosár v2 mód:** a hozzárendelt Kosár oldalt közvetlenül a haladó moduláris WooCommerce-elemekkel és a Kosár v2 elemmel építed (lásd [WooCommerce haladó moduláris elemek](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-modularis-elemek/)).
- **Kosár v1 mód:** a hagyományos WooCommerce-kosár rövidkódja marad az oldalon, a kimenetet pedig külön Bricks Kosár és Üres kosár sablon szabja testre.

Új vagy újratervezett oldalhoz a v2 módot használd, ha a teli és az üres kosár állapotát egy helyen szeretnéd szerkeszteni. A v1 mód a rövidkódos és sablonos megoldásra épülő meglévő webhelyeknek való. A **Woo beállítási varázsló** bármelyik módot ellenőrizni vagy létrehozni tudja. Ugyanezekkel a v2 adatokkal a Dinamikus töredék elemben egyéni minikosarat is építhetsz a fejlécben.

## Kosár v2 mód

Bekapcsolt haladó moduláris elemekkel a Kosár v2 a teli és az üres kosár képernyőjét szerkeszthető állapotként tartja a hozzárendelt Kosár oldalon. A Woo beállítási varázslóban válaszd a **Haladó (v2)** lehetőséget: a varázsló lecseréli a Kosár oldal tartalmát a Kosár v2 elemre és a generált állapotszerkezetre.

A Kosár v2 két állapota:

- **Teli kosár:** a terméket tartalmazó kosárhoz.
- **Üres kosár:** a termék nélküli kosárhoz.

Mindkét állapot kiinduló tartalmat generálhat a **Struktúra beszúrása** választóból. A teli kosár állapotban a **Teljes kosárblokk**, az üres kosár állapotban a **Teljes üres kosárblokk** szerkezetet használd. A generált szerkezet az állapot meglévő tartalmához fűződik hozzá, ezért beszúrás után a generált elemeket tetszés szerint mozgathatod, stílusozhatod vagy törölheted.

A Kosár v2 az ajánlott mód, ha közvetlenül a Kosár oldalt tervezed, egy helyen váltasz a teli és üres előnézet között, és használni akarod a v2 kosár dinamikus címkéit. A Kosár v2 elrendezésekben használhatod a **Kosár tartalma** lekérdezési ciklust és a kosár összegeit adó címkéket:

| Címke | Mit ad |
|---|---|
| `{woo_cart_items_count}` | A kosárban lévő tételek száma. |
| `{woo_cart_order_subtotal}` | A kosár részösszege. |
| `{woo_cart_order_total}` | A kosár végösszege. |
| `{woo_cart_shipping_method}` | A kiválasztott szállítási mód. |
| `{woo_free_shipping_remaining}` | Mennyi hiányzik az ingyenes szállításhoz. |
| `{woo_free_shipping_progress}` | Az ingyenes szállítás felé tett haladás. |

A Kosár v2 elem beállításait a [Kosár elemek](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-kosar-elemek/) fejezet írja le.

## Kosár v1 mód

A hagyományos mód a hozzárendelt Kosár oldalon a WooCommerce `[woocommerce_cart]` rövidkódját jeleníti meg, a kosár képernyőit pedig a Bricks WooCommerce sablontípusai szabják testre. A rövidkódot közvetlenül az oldalra is teheted, vagy a Kosár oldalt Bricks-kel szerkesztve egy **Rövidkód** elembe írhatod `[woocommerce_cart]` tartalommal.

A Bricks két sablontípust ad a kosár testreszabásához:

- **WooCommerce - Kosár:** akkor jelenik meg, ha a kosárban van termék.
- **WooCommerce - Üres kosár:** akkor jelenik meg, ha a kosár üres.

Alapból a Bricks sablonjában két zóna látszik: a kosártételek táblázata és a kosár összesítője. Ha ezt a képernyőt át akarod szabni, hozz létre egy **WooCommerce - Kosár** típusú sablont.

### A Kosár sablon

A Kosár sablont megnyitva három, erre a sablontípusra jellemző új elemet kapsz:

| Elem | Mit csinál |
|---|---|
| **Kosár tételei** | A kosár tartalmának táblázata. A táblázat részeit elrejtheted, a táblázat elemeit és a gombokat stílusozhatod, a kuponmezőt pedig elrejtheted, hogy külön, a Kosárkupon elemmel helyezd el. Egyéni elrendezéshez lásd lejjebb a Kosár tartalma ciklust. |
| **Kosár összesen** | A kosár összesítő zónája. Elrejtheted a kosár keresztértékesítéseit, stílusozhatod az összesítő táblázatot és a gombot. |
| **Kosárkupon** | A kuponmező. Akkor használd, ha nem akarod a kuponmezőt a kosártételek táblázatához kapcsolni. A mező és a kupon alkalmazása gomb stílusozható. |

### Az Üres kosár sablon

A **WooCommerce - Üres kosár** sablontípus azt szabja testre, hogyan jelenik meg a Kosár oldal, amikor a kosár üres. Alapból egy üzenetet és egy, a boltba visszavezető gombot mutat. Ha át akarod szabni, hozz létre ilyen típusú sablont, tedd bele a szükséges elemeket, és állítsd be őket.

## A Kosár tartalma ciklus

A **Kosár tartalma** lekérdezési ciklus a kosár összes látható termékén végigmegy. Így dinamikus adat címkékkel kiírhatod a kosártétel adatait: a termék nevét (bejegyzés címe), a termékképet (kiemelt kép), az árat, a leírást, a cikkszámot és másokat. A ciklus kosártartalom-elrendezésekhez való, és nem korlátozódik a Kosár oldalra.

Ezzel saját kosártétel-listát építhetsz. A Dinamikus töredékben ugyanez a ciklus egyéni minikosárhoz is használható, amely a kosár változása után frissül. Egyéni kosársorokhoz külön címke adja a címet, a tétel adatait, az egységárat és a megtakarítást.

### Saját kosártétel-lista építése a Kosár oldalon

Alapból a kosár termékeit táblázat mutatja, ez az alapértelmezett WooCommerce-sablonban és a **Kosár tételei** elemnél is így van. Más elrendezéshez adj hozzá egy tárolót, kapcsold be rajta a lekérdezési ciklust, és állítsd **Kosár tartalma** típusúra. A tárolóban használhatod a következő dinamikus adat címkéket. A kosárspecifikus címkék a Bricks 1.5.3 óta léteznek, a cikkszám és a GTIN a cikluson belül a 2.4-es verziótól érhető el.

| Címke | Mit ad |
|---|---|
| `{woo_cart_product_name}` | A hivatkozott terméknevet a kosártétel metaadataival és más, hagyományos WooCommerce-kimenettel együtt. |
| `{woo_cart_product_title}` | A terméknevet a kosártétel metaadatai nélkül. A `:plain` módosítóval a hivatkozás is elmarad. |
| Kosártétel-adat elem | A variáció tulajdonságait és a kompatibilis bővítményektől érkező tételadatokat a termék címétől külön írja ki. |
| `{woo_cart_remove_link}` | A kosárból törlő hivatkozás (alapból „x” a tartalma). Tedd a címkét tartalmazó elemre a `product-remove` CSS-osztályt. Ne használd Rich text elemben, mert a további „<a>” címke miatt az AJAX nem működik. |
| `{woo_product_price}` | A termék ára. A Kosár tartalma cikluson belül nem mutatja az akciós árat. |
| `{woo_cart_item_price}` | Az aktuális egységár, akciónál a WooCommerce akciós ár jelölésével. A `:value` a formázatlan aktuális egységárat adja. |
| `{woo_cart_item_save}` | A termék megtakarítása a teljes kosárbeli mennyiségre. A `:value` a formázatlan megtakarítást, a `:percentage` a kedvezmény százalékát adja számként. |
| `{woo_product_sku}` | A kosártétel termékének cikkszáma. |
| `{woo_product_gtin}` | A kosártétel termékének GTIN-je. |
| `{woo_cart_quantity}` | A mennyiség beviteli mezője a kosárban. |
| `{woo_cart_quantity:value}` | A kosártétel mennyisége szövegként. |
| `{woo_cart_subtotal}` | A tétel részösszege (ár szorozva mennyiséggel). |
| `{woo_cart_update}` | A kosár frissítése gomb és a hozzá tartozó nonce. A cikluson kívül, de a kosárűrlapon belül használd. |

A kosár összeg- és pénztári címkéi (`{woo_cart_items_count}`, `{woo_cart_order_subtotal}`, `{woo_cart_order_total}`, `{woo_cart_shipping_method}`, `{woo_free_shipping_remaining}`, `{woo_free_shipping_progress}`) szintén használhatók. Egyéni minikosárnál a töredék legyen a Dinamikus töredék elem, benne egy gyermekelem a Kosár tartalma ciklussal. A tételcímkék a cikluson belülre, az összegek a cikluson kívülre, de még a Dinamikus töredék burkolón belülre kerülnek.

### A kosárűrlap

A mennyiségi beviteli mezők használatához a terméklistás ciklust egy `form` címkébe kell csomagolnod:

1. Csomagold a ciklus tárolóját egy másik tárolóba (vagy div-be, vagy blokkba).
2. A külső elem HTML-címkéjét állítsd **Egyéni** értékre, és az **Egyéni címke** mezőbe írd be: `form`.
3. A külső elemen vedd fel a `woocommerce-cart-form` egyéni CSS-osztályt (**Stílus → CSS → CSS-osztályok**).
4. Add hozzá az **Egyéni attribútumok** között a `method` = `post` és az `action` = `{post_url}` attribútumot.

Ez az űrlaptároló kell ahhoz, hogy a WooCommerce szkriptjei megfelelően működjenek.

A kosár frissítése gombhoz használd a `{woo_cart_update}` dinamikus adat címkét. Tedd az űrlaptárolón belülre, de a cikluson kívülre. A címke a megfelelő beállításokkal rendelkező gombot generálja.