Többlépéses rendelőűrlap a pénztárig

Ebben a példában kétlépéses rendelőűrlapot építesz. Az első lépésben a kapcsolattartási adatokat kéred, a másodikban a szállítási és fizetési adatokat. A beküldés után a látogató a WooCommerce pénztár oldalára kerül, a kosárban a megrendelt termékkel. Az űrlap a termék saját oldalán jelenik meg.

Mire lesz szükséged

• JetFormBuilder, WooCommerce és a WooCommerce Cart & Checkout Action kiegészítő telepítve és bekapcsolva.
• Legalább egy WooCommerce termék.
• Egy sablonkészítő, amellyel egyedi termékoldal-sablont készíthetsz (a példa a JetWooBuilder és az Elementor eszközeit használja). Alapértelmezett WooCommerce-oldal esetén az űrlapot rövidkóddal is elhelyezheted.

Ha a látogatóknak be kell lépniük, az első oldalra bejelentkező űrlapot is tehetsz a User Login Action kiegészítővel.

1. Az űrlap elkészítése

1. Nyisd meg a JetFormBuilder → Add New Form menüt.
2. Az üdvözlő blokkon kattints a Start from scratch gombra, majd a replace hivatkozásra, így üres űrlapról indulsz.
3. Az alapból felkerülő Hidden Field, Text Field és Action Button mezőt használhatod tovább.
4. A cím helyére írd be az űrlap nevét, például „Rendelőűrlap”.
5. A jobb oldali JetForm sávban, a Form Settings részben kapcsold be az Enable form pages progress kapcsolót. Ettől az űrlap minden lépése fölött folyamatjelző sáv jelenik meg.

Az első oldal mezői:

• egy Heading Field (cím),
• Text Field mezők a névnek, a telefonszámnak és az e-mail-címnek,
• a kötelező mezőknél a csillag ikonnal kötelezővé teheted a mezőt,
• egy Hidden Field: az értéke a Current Object ID legyen, a Form Field Name pedig object_id. Erre azért van szükség, mert az űrlap a termék oldalán fut, és az oldal azonosítója adja meg, melyik terméket kell a kosárba tenni.

Az oldalak közé tegyél egy Page Break Field blokkot. A blokk beállításai között:

1. Kapcsold be az Enable “Next” Button kapcsolót.
2. A Next Button Label mezőbe írd be a gomb új feliratát, például „Szállítási adatok”.
3. A Label of Progress mezőbe írd be a folyamatjelzőn látszó nevet.

A második oldalra kerülhet egy új Heading Field, két oszlopban a szállítási cím és a megjegyzés Textarea Field mezője, valamint a fizetési és a szállítási mód Radio Field mezője. Végül állítsd be az Action Button feliratát, és tedd közzé az űrlapot.

2. A Post Submit Action beállítása

1. A JetForm sávban nyisd ki a Post Submit Actions részt. Az űrlap rekordját a Save Form Record akció menti. Ha minden rendeléshez külön bejegyzést akarsz, vegyél fel egy Insert/Update Post akciót is.
2. Kattints a New Action gombra, és válaszd az Add to Cart & Redirect to Checkout akciót.
3. A Get product ID from sorban válaszd a Form Field opciót.
4. A Product ID field legördülőből válaszd ki a rejtett mezőt (object_id).
5. Görgess le a WooCommerce Order Details sorhoz, és kattints a Set up gombra.
6. Az ablakban az Add New Item gombbal vegyél fel elemeket, adj nekik címkét, és válaszd ki hozzájuk az űrlapmezőt. Ezek a rendelés kártyáján jelennek meg. Mentsd az Update gombbal.
7. A WooCommerce checkout fields map részben rendeld hozzá a pénztármezőkhöz azokat az űrlapmezőket, amelyek értékét a pénztáron előre kitöltve szeretnéd látni.
8. Kattints az Update gombra, zárd be az ablakot, és tedd közzé az űrlapot.

A részletes beállítások leírása a Használat fejezetben van.

3. Az űrlap elhelyezése a termékoldalon

Az űrlapot egy termék egyedi oldalsablonjában helyezheted el.

1. Kapcsold be a sablonkészítő szükséges widgetjeit (JetWooBuilder esetén a Crocoblock → JetWooBuilder → Widgets lapon).
2. Hozz létre új Single típusú terméksablont (Crocoblock → Woo Page Builder → Create New Template), adj neki nevet, és nyisd meg a szerkesztőben.
3. Tervezd meg az oldalt, majd húzd rá a JetForm widgetet, és a Choose Form legördülőből válaszd ki az űrlapot.
4. Tedd közzé a sablont.
5. A WooCommerce → Beállítások JetWooBuilder lapján, az Single Product részben pipáld be a Custom Single Product jelölőnégyzetet, és válaszd ki a sablont a Single Product Template listából. A módosítás automatikusan mentődik.

Ha az űrlapot bolt- vagy listaoldalra szeretnéd tenni, a termék azonosítóját a lista elemeiből kell kapnia. Erre a Köszönő oldalra irányítás példa mutat megoldást.

4. Kipróbálás

1. A Termékek → Összes termék listán állj egy termék fölé, és kattints a Megtekintés hivatkozásra.
2. Töltsd ki az első oldal mezőit, és lépj tovább.
3. Töltsd ki a második oldalt, és kattints a beküldő gombra.
4. A pénztár oldalon a kosárban az űrlapon kiválasztott termék van, a megadott adatok pedig előre kitöltve (és a rendelés részleteiben) látszanak.

https://minta-bolt.hu/penztar/

A képen a pénztár a beküldés után látszik: a termék a rendelés összesítőjében szerepel, alatta az űrlapból átvett adat.