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

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), az összes pénztári módot a Pénztár oldal fejezet írja le.