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

> Termékválasztós rendelőűrlap, amely a pénztáron át a WooCommerce köszönő oldalára vezet, az űrlap adataival.

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.