# Használat

> Az Add to Cart & Redirect to Checkout akció felvétele és beállításai, a rendelés részletei és a pénztármezők leképezése.

## Az akció felvétele

1. Nyiss meg egy űrlapot a szerkesztőben (**JetFormBuilder → Forms**).
2. A jobb oldali **JetForm** sávban nyisd ki a **Post Submit Actions** részt.
3. Kattints a **New Action** gombra.
4. Válaszd az **Add to Cart & Redirect to Checkout** akciót.

![Az új akció választó ablaka, benne az Add to Cart & Redirect to Checkout](./kepek/akcio-valaszto.webp)

*Az új akció választó ablaka, benne az Add to Cart & Redirect to Checkout* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=edit)

Az akció kártyáján látod, melyik elem az **Add to Cart & Redirect to Checkout**. A választás után a beállítóablak azonnal megnyílik. Később a sorra húzott egérrel megjelenő ceruza ikonnal nyithatod meg újra.

Az ablak tetején tájékoztató olvasható: a **Redirect to Page** akció nem használhatja a `WC.ORDER.COMPLETE` és a `WC.CHECKOUT.COMPLETE` eseményt.

## Beállítások

![Az akció beállítóablaka kitöltve](./kepek/akcio-ablak-kitoltve.webp)

*Az akció beállítóablaka kitöltve* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=edit)

Az ablakban a legördülő mezők és a gombok angol feliratúak.

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Get product ID from** | Honnan jön a termék azonosítója: **Manual Input** (kézzel választott termék) vagy **Form Field** (az űrlap egy mezőjéből). | **Manual Input** |
| **Select product** | **Manual Input** esetén ebben a mezőben keresed ki a terméket a nevére gépelve. | üres |
| **Product ID field** | **Form Field** esetén a legördülőből választod ki azt a mezőt, amely a termék azonosítóját adja. | `--` |
| **WooCommerce Price field** | Az a mező, amely a termék teljes árát tartalmazza. Ha üresen hagyod, az ár a termék saját adatából jön. | `--` |
| **Heading for Order Details** | A rendelés egyedi adatai fölé kerülő cím. | üres |
| **WooCommerce Order Details** | A **Set up** gombbal egyedi mezőlistát állíthatsz össze, lásd lent. | |
| **WooCommerce checkout fields map** | A pénztármezők és az űrlapmezők összerendelése, lásd lent. | minden mező `--` |

A **Get product ID from** és a **Select product** (vagy **Product ID field**) kötelező, a mezőket csillag jelöli.

### Termék kézzel megadva

1. A **Get product ID from** sorban hagyd a **Manual Input** opciót.
2. A **Select product** mezőbe kezdd el beírni a termék nevét (például „Kerámia”).
3. Kattints a találatra: a termék neve bekerül a mezőbe.

### Termék az űrlap mezőjéből

1. A **Get product ID from** sorban válaszd a **Form Field** opciót.
2. A **Product ID field** legördülőből válaszd ki a mezőt, amely a termék azonosítóját tartalmazza (például egy rejtett mezőt vagy egy választómezőt).

Így egy űrlappal több különböző terméket is megrendelhetnek.

## A rendelés részletei

A **WooCommerce Order Details** sor **Set up** gombja egy ablakot nyit, ahol egyedi mezőket vehetsz fel. Ezek a köszönő oldalon és a vezérlőpulton a rendelés előnézetében látszanak. Az itt megadott lista egy űrlapon belül az összes átirányító akcióra érvényes.

![A Set up WooCommerce order details ablak egy kitöltött elemmel](./kepek/rendeles-reszletek.webp)

*A Set up WooCommerce order details ablak egy kitöltött elemmel* (https://minta-bolt.hu/wp-admin/post.php?post=15&action=edit)

1. Kattints az **Add New Item** gombra.
2. A **Label** mezőbe írd be a címkét (például „Megrendelő neve”).
3. A **Select form field** legördülőből válaszd ki azt az űrlapmezőt, amelynek értéke megjelenik.
4. Több elemhez ismételd meg, a sorrendet a nyilakkal módosíthatod, az elemet a kuka ikon törli.
5. Kattints az **Update** gombra.

## Pénztármezők leképezése

A **WooCommerce checkout fields map** szekcióban minden pénztármező mellett (például `BILLING_FIRST_NAME`, `BILLING_LAST_NAME`, `BILLING_EMAIL`, `BILLING_PHONE`, a számlázási és szállítási cím mezői, `ORDER_COMMENTS`) egy legördülő áll. Válaszd ki benne azt az űrlapmezőt, amelynek értékét a pénztár oldalra át szeretnéd vinni. Az átirányítás után a pénztár így részben előre kitöltve jelenik meg.

Ha minden beállítottál, kattints az **Update** gombra, majd mentsd az űrlapot.

## Hogyan működik a weboldalon

Beküldéskor a termék a kosárba kerül, a látogató a pénztár oldalra érkezik. A rendelés összesítőjében megjelennek a **Set up** ablakban megadott elemek is.

![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 **Kerámia bögre** termék szerepel a rendelés összesítőjében, alatta a „Megrendelő neve: Kovács Anna” sor.

## Fontos tudnivalók

- Az akció egyszerre csak egy terméket tesz a kosárba.
- Az űrlap újratöltési módja számít. Ha az űrlap beállításaiban az **AJAX** módot választod, az átirányítás az összes többi Post Submit Action lefutása után történik. Ha a **Reload** módot, az átirányítás azonnal megtörténik.
- Az űrlapot Elementorban, Bricksben és a blokkszerkesztőben a hozzá tartozó elemmel, más szerkesztőben rövidkóddal jelenítheted meg.