Kosár oldal

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).
• 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 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 „” 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.