Dinamikus töredék és Minikosár

Dinamikus töredék

A Dinamikus töredék a kosártól függő tartalmat újrarendereli, amikor megváltozik a WooCommerce-kosár. Fejlécben, tartalomban és láblécben használhatod, ott, ahol a tartalomnak a kosárváltozás után frissülnie kell: ingyenes szállítás felé tett előrehaladás, kosár végösszege vagy egyéni minikosár-tartalom.

https://minta-bolt.hu/elemek-teszt/?bricks=run

A Tartalom fülön a Struktúra beszúrása választóból kész kiindulási szerkezetet választhatsz, majd a Generálás gombbal beszúrhatod. Az aktuális struktúrához fűzi hozzá, soha nem írja felül a meglévő tartalmat. Két szerkezet közül választhatsz:

• Minikosár
• Haladás az ingyenes szállítás felé

Az elemnél a HTML-címke (alapértelmezés szerint div) és a megjelenítés (alapértelmezés szerint block) is állítható.

Egyéni minikosár készítése

Egyszerű, egyéni minikosarat így készíthetsz:

1. Tegyél egy Dinamikus töredék elemet oda, ahol a minikosárnak meg kell jelennie.
2. Tegyél bele egy tárolót, és kapcsold be rajta a Kosár tartalma lekérdezési ciklust.
3. A cikluson belül tervezd meg a kosártétel sorát.
4. Használj kosártétel-címkéket, például {featured_image}, {woo_cart_product_name}, {woo_cart_quantity:value}, {woo_cart_subtotal} és {woo_cart_remove_link:url}.
5. A kosár összegeit mutató címkéket a cikluson kívülre, de még a Dinamikus töredéken belülre tedd. Ilyenek a {woo_cart_items_count}, {woo_cart_order_subtotal}, {woo_cart_order_total}, {woo_free_shipping_remaining} és {woo_free_shipping_progress}.

A töredék csak olyan tartalmat tartalmazzon, amelynek a kosárba tétel, a kosárból törlés vagy a mennyiségváltozás után frissülnie kell. A Dinamikus töredék burkolóját tartsd lekérdezési cikluson kívül, a kosárciklus viszont mehet a töredékbe.

Mikor frissül

A töredék a WooCommerce kosár-, kupon- és pénztáresemények után frissül: kosárba tételkor, kosárból törléskor, a kosár kiürítésekor, az összegek frissülésekor, a pénztár frissülésekor, valamint kupon alkalmazásakor és eltávolításakor.

A frissítés után a Bricks újra lefuttatja a frontend függvényeit, és elküld egy eseményt a document.body-n:

document.body.addEventListener('bricks/woocommerce/fragments/refreshed', (event) => {
  console.log(event.detail.fragments)
})

Ez az esemény az első szinkronizálásra és azokra a pénztári újraszámolásokra is lefut, amelyek nem változtatják a kosár tételeit. Egyéni sikerüzenethez vagy felugró ablakhoz inkább a „Kosár tartalma megváltozott” interakciós indítót használd: a megerősített AJAX-hozzáadás, -törlés vagy mennyiségváltozás és a hozzá tartozó felület frissítése után fut le.

Korlátozások

• A Dinamikus töredék csak a weboldalon (frontenden) működik.
• A burkolót ne tedd lekérdezési cikluson belülre.
• A komponenspéldányok nem támogatottak.
• A forrásterület csak fejléc, tartalom vagy lábléc lehet.

Minikosár

Kosár ikont mutat darabszámmal, és lenyíló kosárrészleteket.

https://minta-bolt.hu/elemek-teszt/?bricks=run

A Tartalom fülön a következők állíthatók:

Beállítás	Mit csinál	Alapérték
Ikon	A kosár ikonja.	Kosár ikon
Ikon tipográfiája	Az ikon tipográfiája. Csak megadott ikonnál érhető el.
Megnyitás kosárba tételkor (AJAX)	Kinyitja a minikosarat, ha AJAX-szal termék kerül a kosárba.	Ki

Kosár tételszáma

Beállítás	Mit csinál
Láthatóság	A darabszám elrejtése vagy mindig mutatása. Alapértelmezés szerint üres kosárnál rejtett.
Háttérszín	A darabszám jelvényének háttere.
Szegély	A jelvény szegélye.
Tipográfia	A jelvény tipográfiája.
Átalakítás	A jelvény átalakítása (nem érhető el, ha a lenyíló rész fent vagy lent nyílik).
Magasság, Szélesség	A jelvény mérete.
Top, Jobb, Alul, Bal	A jelvény pozíciója.

A jelvény beállításai csak akkor érhetők el, ha a Láthatóság nem „mindig rejtett”.

Kosár részösszege

Beállítás	Mit csinál
Pozíció	A részösszeg az ikontól jobbra vagy balra jelenjen meg.
Térköz	Az ikon és a részösszeg közti távolság.
Tipográfia	A részösszeg tipográfiája.

A térköz és a tipográfia csak megadott pozíciónál érhető el.

Kosár részletei

A lenyíló kosárrészletek beállításai. Ha az Elrejtés be van kapcsolva, a lenyíló rész nem jelenik meg, és az alábbiak közül a többi nem érhető el.

Beállítás	Mit csinál	Alapérték
Elrejtés	Elrejti a lenyíló kosárrészleteket.	Ki
Minikosár bezárásának megakadályozása külső kattintás esetén	A minikosár nem csukódik be, ha mellé kattintasz.	Ki
Off-Canvas	Az oldalsó panel iránya: fent, jobbra, lent vagy balra.	Letiltva
Magasság	A részletek magassága (fent vagy lent nyíló panelnél nem érhető el).
Szélesség	A részletek szélessége (fent vagy lent nyíló panelnél nem érhető el).	400px
Kép szélessége	A termékkép szélessége.	60px
Padding	A részletek belső távolsága.
Pozíció	A részletek pozíciója (csak kikapcsolt Off-Canvas esetén).
Átalakítás	A részletek átalakítása (fent vagy lent nyíló panelnél nem érhető el).
Háttér	A részletek háttérszíne.
Szegély	A részletek szegélye.
Dobozárnyék	A részletek árnyéka.
Tipográfia (cím)	A cím tipográfiája.
Tipográfia (mennyiség)	A mennyiség tipográfiája.

Gombok: a háttérszín, a szegély és a tipográfia állítható.

Bezárás: a bezárás ikon és a hozzá tartozó beállítások, ha van ikon megadva: tipográfia (betűtípus, vastagság, stílus, igazítás, díszítés, átalakítás, sormagasság és betűköz nélkül), pozíció, belső távolság, háttérszín és szegély.