Űrlap a WooCommerce köszönő oldalra irányítással

Ebben a példában olyan űrlapot készítesz, amely a termékválasztás után a pénztárra, a megrendelés után pedig a WooCommerce köszönő oldalára visz. A köszönő oldalon az űrlapba beírt adatok is megjelennek.

Mire lesz szükséged

• Elementor (az ingyenes változat is elég) vagy a WordPress blokkszerkesztője.
• Bekapcsolt WooCommerce és JetFormBuilder.
• A WooCommerce Cart & Checkout Action kiegészítő telepítve és bekapcsolva (JetFormBuilder → Addons, Install Addon, majd Activate Addon).

1. Termékek előkészítése

A Termékek menüben hozd létre a rendelhető termékeket. Jegyezd fel a termékek azonosítóját és az árát, mert a választómezőnél szükséged lesz rájuk.

2. Az űrlap létrehozása

Nyisd meg a JetFormBuilder → Forms oldalt, és kattints az Add New Form gombra. Vegyél fel annyi mezőt, amennyit szeretnél: amit itt bekérsz, azt később a köszönő oldalon meg is jeleníted.

3. Az akció beállítása

1. A Post Submit Actions részben kattints a New Action gombra, és válaszd az Add to Cart & Redirect to Checkout akciót.
2. Állítsd be az akció mezőit:

Beállítás	Szerepe
Get product ID from	Honnan jön a termék azonosítója: Form Field (űrlapmezőből) vagy Manual Input (kézzel megadva).
Select product	Kézi megadásnál a termék, űrlapmezős megadásnál a termékazonosítót tartalmazó mező.
WooCommerce Price field	A teljes árat tartalmazó mező. Ha üresen hagyod, az ár a termék adataiból jön.
Heading for Order Details	A pénztár oldalon a rendelési adatok fölött megjelenő cím.
WooCommerce Order Details	A Set up gombbal megadott mezők a köszönő oldalon és a vezérlőpulton a rendelés előnézetében látszanak.
WooCommerce checkout fields map	A pénztármezők és az űrlapmezők összerendelése, így a pénztár részben előre kitöltve nyílik meg.

3. A Set up ablakban vedd fel az összes olyan mezőt, amelyet a köszönő oldalon látni szeretnél.

Egy termék vagy több termék

• Manual Input: az űrlapon egyetlen, előre kiválasztott termék van.
• Form Field: annyi terméket kínálhatsz, amennyit szeretnél. Ehhez vegyél fel egy Select Field vagy Radio Field mezőt, és a Product ID field legördülőben ezt jelöld ki. A mező Edit Options ablakában minden opciónál add meg:
  • Label: a termék neve,
  • Value: a termék azonosítója, hogy az űrlap tudja, melyiket kell lekérnie,
  • Calculate: a termék ára.

Egy beküldéssel mindig csak egy termék kerül a kosárba.

4. Az űrlap elhelyezése

1. Hozz létre egy új oldalt, vagy nyiss meg egy meglévőt a szerkesztőben.
2. Add hozzá a JetForm elemet (Elementorban widget, a blokkszerkesztőben blokk, Bricksben elem; más szerkesztőben rövidkóddal).
3. A Choose Form mezőben válaszd ki az űrlapot.

A látogató a termékválasztó mezővel (például termékképek alatt egy Radio Field) választ, kitölti az adatait, majd a beküldő gombbal a pénztárra jut.

5. A pénztár és a köszönő oldal

A kitöltés után a látogató a pénztár oldalra érkezik. Mivel az összes űrlapmezőt felvetted a rendelés részleteihez, azok a pénztáron is látszanak. A Place Order gomb megnyomása után a WooCommerce köszönő oldala jelenik meg:

• az első részben a rendelés összegzése van: a termék neve, az ár és a fizetési mód,
• a második részben a számlázási és szállítási adatok láthatók, az űrlapból átvett mezőkkel együtt.

Tudnivalók

• Az akció csak egy terméket tesz a kosárba.
• Az űrlap újratöltési módja számít: ha az űrlapbeállításokban az AJAX módot választod, az átirányítás az összes többi Post Submit Action után történik. Reload módban az átirányítás azonnal megtörténik.