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

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 fejezet, az interakciókat a Interakciók fejezet írja le.