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

> Lépésről lépésre: kétlépéses rendelőűrlap, amely a termék oldaláról a WooCommerce pénztárra visz.

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](https://hub.hellowp.io/hu/plugins/jet-form-builder-woo-action/hasznalat/) 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](https://hub.hellowp.io/hu/plugins/jet-form-builder-woo-action/peldak-koszono-oldal/) 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.

![A pénztár oldal a kosárba tett termékkel és a megadott rendelési részlettel](./kepek/penztar.webp)

*A pénztár oldal a kosárba tett termékkel és a megadott rendelési részlettel* (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.