# Többlépéses pénztár (Pénztár v2)

> Többlépéses pénztár készítése a Pénztár v2 elemmel: generálás, lépések sorrendje, lépésbeállítások, belépési lépés, gombok, interakciók, érvényesítés és ellenőrzőlista.

A Pénztár v2 a WooCommerce pénztárűrlapját több szerkeszthető lépésre bonthatja, miközben a natív WooCommerce pénztárűrlap és a rendelés elküldése változatlan marad. Akkor használd, ha vezetett pénztári élményt szeretnél külön szakaszokkal: fiókbelépés, vásárlói adatok, szállítás, kiegészítők, rendelés áttekintése és fizetés.

## Többlépéses pénztár létrehozása

Kétféleképpen készíthetsz többlépéses Pénztár v2 elrendezést:

- A **Woo beállítási varázslóban** válaszd a Pénztár területet, majd a **Haladó többlépéses (v2)** lehetőséget.
- Szerkeszd a hozzárendelt Pénztár oldalt Bricks-szel, válaszd ki a Pénztár v2 **Pénztár** állapotát, a **Struktúra beszúrása** alatt válaszd a teljes pénztári szerkezetet, kapcsold be a **Többlépéses generálás** kapcsolót, majd kattints a **Generálás** gombra.

A generált szerkezet hozzáadja a pénztárűrlap szakaszait, a pénztári lépések burkolóit, a lépésnavigációt és a következő/vissza interakciókat, vagyis egy teljes kiinduló folyamatot.

## A generált szerkezet

A többlépéses pénztár ezeket a generált támogató elemeket használja:

- **Pénztári lépések navigációja:** a lépéslistát jeleníti meg.
- **Pénztári lépés navigációs tétele:** a lépésnavigáció egy eleme.
- **Pénztári lépés:** egy pénztári lépés tartalmát fogja közre.
- **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**, **Fizetési opciók**, **Pénztári rendelés leadása** és más generált pénztári támogató elemek.

Néhány támogató elem csak generálással hozható létre, vagy csak adott környezetben érhető el. Ha a szokásos **Elemek** panelen nem látod őket, hozd létre a **Struktúra beszúrása** művelettel. Generálás után a **Szerkezet** panelen ugyanúgy kijelölheted, stílusozhatod, mozgathatod és szerkesztheted őket, mint a többi Bricks elemet.

## Lépések sorrendje és navigáció

A pénztári lépések sorrendjét a **Pénztári lépés** elemek sorrendje adja a **Szerkezet** panelen. Az első lépés a kezdőlépés. A navigációs tételek sorrendben tükrözik a lépéseket. Ha egy lépés feltételes, ugyanazt a feltételt add a hozzá tartozó navigációs tételre is, hogy a látható navigáció és a látható lépések összhangban maradjanak.

A **Szállítás** lépéshez a **Pénztár: Szállítás szükséges** feltételt használd **Igen** értékkel mind a lépésen, mind a navigációs tételén. A **Pénztár: Szállítási cím szükséges** feltételt csak a „Szállítás más címre” vezérlőn és a szállítási cím mezőin használd. A kosárnak akkor is lehet szüksége szállítási módra, ha a WooCommerce úgy van beállítva, hogy a számlázási címet használja szállításhoz.

Az újonnan generált teljes pénztári szerkezetek már tartalmazzák ezeket a feltételeket. Ha az elrendezést korábban generáltad vagy testre szabtad, a Szállítás lépés, a navigációs tétel és a címmezők feltételeit kézzel nézd át, mert az előre definiált szerkezetek módosítása nem írja át a meglévő oldaltartalmat.

Minden **Pénztári lépés** elemnek ezek a vezérlői vannak:

| Beállítás | Mit csinál |
|---|---|
| **Lépés ID** | A navigáció, az interakciók és a közvetlen lépésugrások használják. |
| **Lépés címkéje** | A lépés felirata. |
| **Közvetlen elérés engedélyezése** | A vásárló akkor is erre a lépésre ugorhat, ha az előző lépéseket még nem érte el. |
| **Érvényesítés továbblépés előtt** | A továbblépéshez az aktuális lépésnek át kell mennie a pénztári mezők ellenőrzésén. |
| **Az első mező automatikus fókuszba helyezése** | A lépés aktívvá válásakor az első elérhető mezőre fókuszál. |

Ha interakciókkal akarsz lépést megcélozni, használj stabil, olvasható lépésazonosítókat, például `customer-info`, `shipping`, `order-review` vagy `payment`.

## A belépési lépés láthatósága

A generált teljes többlépéses szerkezet **Pénztár: Belépési lépés szükséges** feltételeket tesz a Fiókbelépés navigációs tételére, a Fiókbelépés lépésre és a Vásárlói adatok lépés **Vissza** gombjára.

- **Kijelentkezett vásárló, a WooCommerce „Pénztári belépés bekapcsolása” beállítása be van kapcsolva:** a Fiókbelépés az első lépés, a Vásárlói adatok lépésnek pedig van **Vissza** gombja.
- **Kijelentkezett vásárló, a pénztári belépés ki van kapcsolva:** a Fiókbelépés nem jelenik meg. A Vásárlói adatok az első lépés, és nincs **Vissza** gombja.
- **Bejelentkezett vásárló:** a Fiókbelépés és a Vásárlói adatok **Vissza** gombja nem jelenik meg.

Ha egyéni többlépéses szerkezetet építesz, ugyanezt a feltételt tedd mindhárom elemre. Ha a navigációs tétel, a lépés és a Vissza gomb azonos feltétel alatt van, nem lesz üres első lépés, és nem marad Vissza gomb előző lépés nélkül. A fiókkészítési mezők a WooCommerce pénztári beállításait a belépési lépéstől függetlenül követik.

## Lépésgombok és interakciók

A generált többlépéses elrendezések szokásos Bricks gombokat használnak a **Pénztári lépés** interakciós művelettel. A művelet képes:

- a következő lépésre lépni,
- az előző lépésre lépni,
- egy adott lépésre ugrani **Lépés ID** alapján,
- egy adott pénztári mezőre ugrani mezőkulcs vagy mezőazonosító alapján, például `billing_postcode`,
- a célként megadott lépést vagy mezőt a látótérbe görgetni.

Ha az aktív pénztári lépés változása után más műveletet is le akarsz futtatni, használd a Bricks pénztári lépés változott eseményindítóját.

## Lépésszámok

A navigációs elemen kapcsold be a **Lépésszám megjelenítése** beállítást a **Pénztári lépések navigációja** elemen, hogy a lépések számozva jelenjenek meg (CSS rendereli). Egyéni címsorokban és feliratokban a `{woo_checkout_current_step_number}` címke az aktuális lépés számát írja ki dinamikusan.

## Érvényesítés

Kapcsold be az **Érvényesítés továbblépés előtt** beállítást azon a lépésen, ahol a vásárlónak a továbblépés előtt ki kell töltenie a kötelező mezőket.

- Visszafelé lépni mindig szabad.
- Előre lépésnél az aktuális lépést csak akkor ellenőrzi, ha az **Érvényesítés továbblépés előtt** be van kapcsolva.
- Az ingyenes rendeléseknél nem kell fizetési módot kiválasztani. A kötelező feltételek elfogadása ilyenkor is szükséges, a fizetést kívánó rendelésnél viszont ki kell választani egy fizetési módot.
- A WooCommerce értesítései továbbra is hivatkozhatnak az érvénytelen mezőkre. A pénztári lépés szkriptje a vásárlót oda vezetheti, ahol a mező van, és rá is fókuszálhat.

## Fizetési szakasz ingyenes rendelésnél

A generált **Fizetési opciók** burkoló a `brx-woo-payment-section` osztályt használja, hogy a fizetési cím és a fizetési módok eltűnjenek, ha a kosárhoz nem kell fizetés. Ha az osztály hiányzik egy meglévő vagy egyéni elrendezésből, add hozzá kézzel a burkolón a **Stílus → CSS → CSS-osztályok** mezőben, vezető pont nélkül.

A feltételek elfogadása jelölőnégyzetet, a lépésgombokat és a **Rendelés leadása** vezérlőket tartsd a burkolón kívül. Az osztályt a Pénztári lépésen belüli fizetési szakaszra tedd, ne az egész lépésre.

## Ajánlott ellenőrzés

A többlépéses elrendezés generálása után:

- Próbáld ki a pénztárat vendégként és bejelentkezett vásárlóként is.
- Próbáld ki a WooCommerce „Pénztári belépés bekapcsolása” beállításával bekapcsolva és kikapcsolva is.
- Próbáld ki a nem kötelező és kötelező fiókkészítést, a WooCommerce felhasználónév- és jelszógenerálásával be- és kikapcsolva.
- Próbálj ki szállítást igénylő és szállítást nem igénylő termékeket.
- Nézd át a feltételes lépéseket, például a fiókbelépést és a szállítást.
- Ellenőrizd, hogy az utolsó fizetési lépésben ott van-e a fizetési opciók, a feltételek és a rendelés leadása gomb.
- Próbálj ki nulla végösszegű rendelést, majd változtass a szállításon vagy vegyél ki egy kupont, hogy fizetés kelljen. Ellenőrizd, hogy a fizetési szakasz újra megjelenik, és mindkét esetben elérhető marad a feltételek elfogadása és a rendelés leadása.
- Próbáld ki a kötelező mezők érvényesítését és a WooCommerce értesítéseit.
- Nézd át mobilon a lépésnavigáció és a gombok térközeit.

A Pénztár v2 elem általános beállításait a [Pénztár (v2)](https://hub.hellowp.io/hu/plugins/bricks-child/elemek-penztar-v2/), az összes pénztári módot a [Pénztár oldal](https://hub.hellowp.io/hu/plugins/bricks-child/woocommerce-penztar/) fejezet írja le.