# WooCommerce haladó moduláris elemek

> A Kosár, Pénztár és Fiók oldal felépítése szerkeszthető Bricks elemekből: állapotok, generálható szerkezetek, mezőszinkron, támogató elemek és korlátok.

A Bricks WooCommerce-integrációja a bolt három rendszeroldalát, a **Kosár**, a **Pénztár** és a **Fiókom** oldalt két módon építheti fel. A hagyományos (v1) módban a WooCommerce rövidkódja jeleníti meg az oldalt, és külön Bricks sablonok szabják testre a kimenetet. A haladó (v2) módban ezek a képernyők szerkeszthető Bricks elemekből állnak, közvetlenül azon az oldalon, amelyhez a WooCommerce hozzárendelte őket.

## Mit hoz a v2

A v2 módban a korábban külön sablonokkal vagy WooCommerce-végpontokkal kezelt képernyők (üres kosár, pénztári fizetés, megrendelés beérkezett, fiókrendelések, letöltések, jelszó-visszaállítás) **állapotként** élnek ugyanazon az oldalon. Az állapotok között a szerkesztőben váltasz, és egy helyen szerkeszted őket.

- A Kosár, a Pénztár és a Fiók oldal szerkeszthető Bricks elemekből épül.
- Az állapotok előnézete szerkesztés közben is látszik: teli és üres kosár, pénztár, fizetés és köszönőoldal, fiókrendelések és letöltések.
- Kész, teljes blokkokat és kisebb szakaszblokkokat szúrhatsz be.
- A generált pénztári és fiókcímmezők igazodnak a WooCommerce meződefinícióihoz.
- A kosártól függő tartalmat a **Dinamikus töredék** elem frissíti.
- Új WooCommerce v2 lekérdezési ciklusok és dinamikus címkék állnak rendelkezésre.
- Többlépéses pénztárat is építhetsz pénztári lépés elemekkel és interakciókkal (lásd [Többlépéses pénztár](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-tobblepcsos-penztar/)).

## A haladó moduláris elemek bekapcsolása

A v2 elemek csak akkor adhatók hozzá és szerkeszthetők, ha a funkció be van kapcsolva.

![A Bricks WooCommerce beállításai: haladó moduláris elemek, Notice, Checkout coupon, Checkout login és változatminták kapcsolói](./kepek/woocommerce-beallitasok.webp)

*A Bricks WooCommerce beállításai: haladó moduláris elemek, Notice, Checkout coupon, Checkout login és változatminták kapcsolói* (https://minta-bolt.hu/wp-admin/admin.php?page=bricks-settings)

A képen az **Egyéb** csoport kapcsolói láthatók. A **Haladó moduláris elemek bekapcsolása** kapcsolót keresd.

1. Nyisd meg a **Bricks → Beállítások → WooCommerce** oldalt.
2. Kapcsold be a **Haladó moduláris elemek bekapcsolása** kapcsolót (a felületen „Kísérleti” jelölés van mellette).
3. Kattints a **Beállítások mentése** gombra.

A kapcsoló a Kosár v2, a Pénztár v2 és a Fiókoldal v2 elemet, az állapotok előnézetét és az előre definiált WooCommerce-elemeket kapcsolja be. A **Woo beállítási varázsló** hagyományos elrendezéseket haladó elemek nélkül is létre tud hozni, a v2 beállítástípusok viszont le vannak tiltva, amíg ezt a kapcsolót be nem kapcsolod.

## Mikor melyik módot használd

| Mód | Mire jó |
|---|---|
| Hagyományos (v1) | Meglévő oldalak, amelyek már a WooCommerce rövidkódos oldalait és a Bricks WooCommerce sablonjait használják, vagy ahol minden WooCommerce-képernyőhöz külön sablon kell. |
| Haladó (v2) | Új vagy újratervezett Kosár, Pénztár és Fiók oldal, ahol szerkeszthető állapotokat, generált szerkezeteket és v2 dinamikus adatokat szeretnél közvetlenül az oldalon. |

A hagyományos sablonos mód továbbra is támogatott. A meglévő Kosár, Kosár, Üres kosár, Pénztár, Köszönőoldal, Fizetés, Rendelés visszaigazolása és Fiók sablontípusokat használhatod tovább. A hagyományos sablonok és a v2 állapotok egy webhelyen együtt is létezhetnek, de egy WooCommerce-területhez egyszerre egyetlen megközelítést használj, hogy ne legyen zavar.

## Előre definiált szerkezetek

A Kosár, a Pénztár és a Fiók oldal v2 állapotaiban a **Struktúra beszúrása** választóval teljes kiinduló elrendezést vagy kisebb WooCommerce-szakaszt generálhatsz.

A szerkezetek a webhelyhez igazodnak. A pénztárnál, a pénztári fiókadatoknál és a fiók címűrlapjainál a Bricks a generáláskor érvényes WooCommerce-meződefiníciókat beolvassa, és szerkeszthető Bricks űrlapmező-elemekké alakítja. Generálás után ezeket a mezőket úgy stílusozhatod, mozgathatod, rendezheted át és helyezheted el, mint bármely Bricks elemet.

A **mezőszinkron** jelzi az érvényes, hiányzó, érvénytelen és kettőzött generált mezőket. Képes:

- legenerálni a hiányzó mezőket,
- eltávolítani az érvénytelen vagy kettőzött generált mezőket,
- a címkéket és a helyőrzőket frissíteni az aktuális WooCommerce-mezőadatokból.

A Pénztár v2 és több Fiókoldal v2 űrlapállapot **Lebegő címke** stílusbeállítást is kínál a támogatott generált mezőkhöz. A harmadik féltől származó mezőket nézd át kézzel, mert a bővítmények más HTML-t generálhatnak.

## A v2 elemcsoportok

A fő szülőelemek:

- **Kosár v2**
- **Pénztár v2**
- **Fiókoldal v2**

Az elrendezések támogató elemeket is tartalmazhatnak, amelyeknek csak a hozzájuk tartozó WooCommerce-állapotban vagy generált szerkezetben van értelmük.

| Terület | Regisztrált támogató elemek |
|---|---|
| Kosár v2 | Kosárűrlap, Kosár mennyisége |
| Pénztár v2 | Pénztári lépések navigációja, Pénztári lépés navigációs tétele, Pénztári lépés, Szállítási opciók, Fizetési opciók, WooCommerce-űrlapmező, WooCommerce-űrlap elküldése, Pénztár- és fiókmezők, Pénztári számlázási cím, Pénztári szállítási cím, Pénztári rendelés-összesítő, Pénztári rendelés leadása |
| Fiókoldal v2 | WooCommerce-belépési űrlap, Fiókregisztrációs űrlap, Fiók jelszó-helyreállítási űrlap, Fiók jelszavának visszaállítására szolgáló űrlap, Fiók rendeléseinek lapozása, Fiók címének szerkesztésére szolgáló űrlap, Fiókadatok szerkesztésére szolgáló űrlap, Fiók rendelés-visszavonási űrlap (ha a rendelés-visszavonás be van kapcsolva) |
| Kosártól függő tartalom | Dinamikus töredék |

Egyes támogató elemek csak generálással hozhatók létre: a **Struktúra beszúrása** vagy a Woo beállítási varázsló készíti őket, majd a **Szerkezet** panelen szerkeszted tovább.

## Kosár v2

A **Kosár v2** elem a hozzárendelt Kosár oldalra kerül, és két állapota van:

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

Szerkesztés közben az **Állapot** vezérlővel válthatsz a két előnézet között. Mindkét állapot tartalmazhat egyedi elrendezést és generált szerkezetet, például a teljes kosárblokkot vagy a teljes üres kosár blokkot. A részleteket a [Kosár oldal](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-kosar/) fejezetben találod.

## Pénztár v2

A **Pénztár v2** elem a hozzárendelt Pénztár oldalra kerül. Állapotai:

- Pénztár
- Belépés szükséges
- Fizetés
- Köszönjük
- Rendelés visszaigazolása

Az **Állapot** vezérlővel az összes pénztári képernyőt egy oldalon tervezheted meg. A pénztár állapotban teljes pénztári szerkezetet vagy kisebb szakaszokat generálhatsz: számlázási mezők, szállítási mezők, fizetési lehetőségek, további mezők, rendelésösszegzés és megrendelés gomb. A pénztári mezőkarbantartó műveletek segítenek összevetni a generált mezőket a webhely aktuális WooCommerce pénztári mezőivel.

A generált számlázási és a teljes pénztári szerkezet egy **Pénztár- és fiókmezők** burkolót is tartalmaz. Ez a WooCommerce vendég pénztári, fiókkészítési, felhasználónév-generálási és jelszóbeállításait követi.

A **Belépés szükséges** állapot akkor jelenik meg, ha a WooCommerce belépést kér a rendeléshez kapcsolódó pénztári képernyők (fizetés, visszaigazolás vagy köszönőoldal) megtekintéséhez, például regisztrált vásárló rendelésénél. A kijelentkezett vásárlók nem vendég rendeléseinél a köszönőoldal, a rendelés visszaigazolása és a rendelés fizetése képernyő Bricks-elrendezése is megjelenik. A részleteket a [Pénztár oldal](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-penztar/) fejezet írja le.

## Fiókoldal v2

A **Fiókoldal v2** elem a hozzárendelt **Fiókom** oldalra kerül, és a fiók navigációját és a végpont tartalmát együtt tartja. Az állapotai a gyakori fiókvégpontok:

- Vezérlőpult
- Rendelések
- Rendelés megtekintése
- Letöltések
- Címek
- Cím szerkesztése
- Fiók szerkesztése
- Fizetési módok
- Fizetési mód hozzáadása
- Bejelentkezés
- Elfelejtett jelszó
- Elfelejtett jelszó megerősítése
- Jelszó visszaállítása
- Rendelés visszavonása (csak elég új WooCommerce-szel és bekapcsolt rendelés-visszavonással)

Az **Állapot** vezérlővel szerkesztés közben végpontok előnézetei között váltasz. Minden állapot generált kiinduló tartalmat kaphat, amelyet a szerkesztőben testre szabhatsz.

## Dinamikus töredék

A **Dinamikus töredék** elem a WooCommerce-kosár változása után újrarendereli önmagát és a gyermekeit. Használd a fő Kosár oldalon kívüli, kosártól függő tartalomhoz:

- egyéni minikosár-tartalom,
- az ingyenes szállítás felé tett haladás,
- kosár végösszege vagy részösszege.

Az elemhez két generálható szerkezet tartozik: **Minikosár** és **Haladás az ingyenes szállítás felé**. Egyéni minikosárhoz csomagold be a minikosarat a Dinamikus töredékbe, tegyél bele egy gyermek ciklust a `wooCart` (**Kosár tartalma**) lekérdezéstípussal, és a cikluson belül használj kosárcímkéket, például `{woo_cart_product_name}`, `{woo_cart_quantity:value}`, `{woo_cart_subtotal}` és `{woo_cart_remove_link:url}`.

A Dinamikus töredék burkolóját tartsd más lekérdezési ciklusokon kívül, a kosárciklus viszont a töredék gyermeke legyen. A töredék csak a webhely látogatói oldalán működik: a fejlécben, a tartalomban és a láblécben frissül, lekérdezési ciklus példányain és komponenspéldányokon belül nem. A lépésenkénti minikosár-építést a [Minikosár készítése](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-minikosar-keszitese/) fejezet mutatja.

## Lekérdezési ciklusok, dinamikus címkék, feltételek és interakciók

A WooCommerce v2 lekérdezési ciklusokat ad az alkalmazott kuponokhoz, díjakhoz, adókhoz, rendelési tételekhez, rendelés végösszegeihez, rendelési letöltésekhez, rendelés vásárlói megjegyzéseihez, fiókrendelésekhez, fiókrendelés-műveletekhez, fiók letöltéseihez és fiókcímekhez.

Dinamikus címkéket is ad a kosár összegeihez, az ingyenes szállítás haladásához, a WooCommerce URL-ekhez, a fiókcímekhez, a rendelés adataihoz, a rendelési tételekhez, a rendelés végösszegeihez, a rendelési műveletekhez, a letöltésekhez és a vásárlói megjegyzésekhez.

Ezenkívül WooCommerce-feltételek állnak rendelkezésre a szállítás és a rendelés láthatóságához, és interakciók a Dinamikus töredék frissítéseihez és a pénztári lépésváltásokhoz.

## Korlátok

- A v2 elemek hozzáadásához és szerkesztéséhez előbb be kell kapcsolni a haladó moduláris elemeket.
- A v2 oldal megjelenítése továbbra is a WooCommerce oldalirányítását követi: a Kosár v2 és a Pénztár v2 a hozzárendelt WooCommerce kosár- és pénztároldalon jelenik meg.
- A hozzárendelt WooCommerce-oldalakon lévő WooCommerce blokktartalom nem kompatibilis a v2 beállítással. A Woo beállítási varázsló le tudja cserélni az oldal tartalmát a megfelelő v2 szerkezetre.
- A védett állapotelemek a v2 szülőelemek kötelező gyermekei. Ne töröld őket kézzel.
- Az előre definiált szerkezetek az alapértelmezett Bricks töréspont-kulcsokkal készülnek. Egyedi töréspontoknál nézd át a reszponzív stílusokat.
- A harmadik féltől származó pénztári mezőket generálás vagy mezőszinkron után kézzel kell átnézni.