# Kosár, pénztár és köszönőoldal

> A kosár, a pénztár és a köszönőoldal saját sablonjai: előkészületek, a widgetek beállításai és a sablonok hozzárendelése.

A vásárlási folyamat három oldalához külön sablontípus tartozik: **Kosár**, **Pénztár** és **Köszönjük**. Mindhárom a megfelelő widgetekből épül fel, és a **WooCommerce → Beállítások → JetWooBuilder** fülön rendelhető hozzá az oldalhoz.

## Előkészületek

A kosár és a pénztár oldalra WooCommerce-oldal kell, benne a megfelelő shortcode-dal.

1. Ellenőrizd, hogy léteznek az alapoldalak. Ha hiányoznak, a **WooCommerce → Állapot** menüben, az eszközök fülön az alapértelmezett oldalak létrehozásával pótolhatók (a meglévő oldalakat nem módosítja).
2. A **Kosár** oldal tartalma csak a **[woocommerce_cart]** shortcode legyen, a **Pénztár** oldalé a **[woocommerce_checkout]**, a **Fiókom** oldalé a **[woocommerce_my_account]**. Mindegyiket shortcode-blokkba tedd. Ha az oldalon WooCommerce-blokkok vannak (a blokkos kosár vagy pénztár), cseréld őket a shortcode-ra, különben a JetWooBuilder sablonja nem érvényesül.
3. A **WooCommerce → Beállítások → Haladó** fülön, az oldalbeállításoknál ellenőrizd, hogy a **Kosár**, **Pénztár** és **Fiókom** oldalhoz a megfelelő oldal van kiválasztva.
4. A **WooCommerce → Beállítások → JetWooBuilder** fülön a **Widgetek megjelenítési módja** legyen **Elementor alapértelmezése**.
5. Kapcsold be a widgeteket a **Crocoblock → JetPlugins Settings → JetWooBuilder → Widgetek** oldalon: **Kosárwidgetek**, **Pénztárwidgetek**, **Köszönőoldal widgetjei**.

## Kosár

Hozz létre új sablont **Kosár** típussal. Üres és teli kosárhoz külön sablont is készíthetsz.

![A Kosártáblázat widget beállításai a szerkesztőben](./kepek/szerkeszto-kosar-tabla.webp)

*A Kosártáblázat widget beállításai a szerkesztőben* (https://minta-bolt.hu/wp-admin/post.php?post=28&action=elementor)

A kosár widgetjei:

| Widget (a szerkesztőben) | Mit csinál |
|---|---|
| **Kosártáblázat** | A kosárba tett termékek táblázata. Alapból öt oszlop (kép, cím, ár, mennyiség, összeg), minden sorban eltávolító gomb, alatta kuponmező és frissítés gomb. |
| **Kosárösszesítő** | A kosár végösszege és a tovább a pénztárhoz gomb. |
| **Kosár vissza a boltba** | Gomb, amely a bolt oldalra visz. Teli és üres kosárban is használható. |
| **Üres kosár üzenete** | Ikon és üzenet arról, hogy a kosár üres. |
| **Kosár keresztértékesítései** | A kosárban lévő termékekhez kapcsolódó (keresztértékesítési) termékek. |

**Kosártáblázat** beállításai (Tartalom fül):

| Szakasz | Beállítás | Mit csinál |
|---|---|---|
| **Táblázat** | **Tételek** | A táblázat oszlopai. Alapból: **Eltávolítás**, **Bélyegkép**, **Termék címe**, **Ár**, **Mennyiség**, **Összeg**. Az **Elem hozzáadása** gombbal újabb oszlop adható hozzá. |
| **Műveleti vezérlők** | **Kosár automatikus frissítése** | A kosár az oldal újratöltése nélkül frissül, ha változtatsz a mennyiségen. |
| **Frissítés gomb** | **Címke** | A frissítés gomb felirata. |
| **Kuponűrlap** | **Megjelenítés** | Bekapcsolja a kuponmezőt. |
| **Kuponűrlap** | **Gomb felirata**, **Helyőrző szöveg** | A kuponűrlap gombjának felirata és a mező helyőrző szövege. |

A **Kosárösszesítő** egyetlen beállítása az **Elrejtés** a **Címsor** szakaszban: bekapcsolva elrejti a widget címsorát (alapból ki van kapcsolva).

A **Kosár vissza a boltba** beállításai: **Módosítás** kapcsoló (alapból ki), amellyel egyéni **Címke** és **Link** adható meg.

Az **Üres kosár üzenete** beállításai: **Módosítás** kapcsoló egyéni **Üzenet** megadásához, és az **Ikon elrejtése** kapcsoló.

A **Kosár keresztértékesítései** beállításai: **Oszlopok** (1-től 12-ig), **Rendezés alapja** (dátum, cím, ár, népszerűség, értékelés, véletlen, módosítás dátuma), **Rendelés** (növekvő vagy csökkenő), és a **Címsor** szakaszban a **Megjelenítés** és **Módosítás** kapcsoló egyéni címsorhoz.

Tedd közzé a sablont, majd a **WooCommerce → Beállítások → JetWooBuilder** fül **Kosár** szakaszában jelöld be az **Egyéni kosár** jelölőnégyzetet, válaszd ki a sablont a **Kosársablon** listából (az üres kosárhoz az **Üreskosár-sablon** listából), és mentsd.

![A kosár oldal az egyedi sablonnal](./kepek/kosar-frontend.webp)

*A kosár oldal az egyedi sablonnal* (https://minta-bolt.hu/kosar/)

A képen a kosár a saját sablonjával látszik: a táblázat oszlopai, a kupon és a frissítés gomb, a kosár összesen és a pénztárhoz vivő gomb, végül a vásárlás folytatása.

## Pénztár

Hozz létre új sablont **Pénztár** típussal. A JetWooBuilder kétféle pénztársablont ismer:

- **Fő sablon**: a **Pénztársablon** listához rendelt sablon. Ez a pénztár fő űrlapját adja.
- **Felső sablon**: a **Pénztár tetején megjelenő sablonminta** listához rendelt sablon, amely a fő űrlap fölött jelenik meg.

A két sablon más-más widgeteket bír el, mert a pénztár űrlapjai másképp épülnek fel:

| Sablon | Ide NE tedd | Ide tedd |
|---|---|---|
| Fő sablon | **Pénztári kuponűrlap**, **Pénztári bejelentkezési űrlap** és bármilyen más űrlapwidget (például JetFormBuilder űrlap): nem működnek jól. | A többi pénztárwidget. |
| Felső sablon | **Pénztári kiegészítő űrlap**, **Pénztári számlázási űrlap**, **Pénztári rendelés áttekintése**, **Pénztári fizetés**, **Pénztári szállítási űrlap**: nem jelennek meg jól. | **Pénztári kuponűrlap**, **Pénztári bejelentkezési űrlap** és más űrlapwidgetek. |

A pénztár widgetjei:

| Widget (a szerkesztőben) | Mit csinál |
|---|---|
| **Pénztári kuponűrlap** | Értesítésszerű sáv gombbal: kattintásra megjelenik a kuponkód mezője. A stílusa állítható. |
| **Pénztári bejelentkezési űrlap** | Értesítés és gomb, amelyre kattintva megjelenik a belépési űrlap, így a vásárló a pénztár kitöltése előtt beléphet. |
| **Pénztári kiegészítő űrlap** | A rendeléshez fűzött megjegyzés (extra információ) mezője. A címke, a beviteli mező és a címsor stílusa állítható. |
| **Pénztári számlázási űrlap** | A számlázási adatok űrlapja. A mezők a Tartalom fülön szerkeszthetők (címke, helyőrző, alapérték). A **Reszponzív mobilmegjelenítés** kapcsoló bekapcsolva a mezők szélességét a mobil képernyőhöz igazítja. |
| **Pénztári rendelés áttekintése** | A kosár tartalmának és végösszegének táblázata. Érdemes a számlázási űrlap fölé tenni. |
| **Pénztári fizetés** | A fizetési mód kiválasztása és a **Megrendelés** gomb, valamint az adatkezelési tájékoztatóra mutató szöveg. Ha a vásárló országában nincs fizetési mód, értesítés jelenik meg. |
| **Pénztári szállítási űrlap** | A szállítási adatok űrlapja, a mezők szerkeszthetők. |

Lépések:

1. Ellenőrizd, hogy a **Pénztárwidgetek** szakasz widgetjei be vannak kapcsolva.
2. Hozz létre **Pénztár** típusú sablont, tedd bele a fő widgeteket, és tedd közzé.
3. Hozz létre egy második **Pénztár** típusú sablont a felső részhez (például a kuponűrlappal), és tedd közzé.
4. A **WooCommerce → Beállítások → JetWooBuilder** fül **Pénztár** szakaszában jelöld be az **Egyéni pénztár** jelölőnégyzetet, válaszd ki a fő sablont a **Pénztársablon**, a felsőt a **Pénztár tetején megjelenő sablonminta** listából, és mentsd.
5. A **Pénztár** oldalra tedd a **[woocommerce_checkout]** shortcode-ot (lásd az előkészületeket), és ellenőrizd a **WooCommerce → Beállítások → Haladó** fülön, hogy ez az oldal a pénztár oldal.

![A pénztár az egyedi sablonnal](./kepek/penztar-frontend.webp)

*A pénztár az egyedi sablonnal* (https://minta-bolt.hu/penztar/)

A képen a számlázási űrlap balra, a rendelés áttekintése és a fizetési mód jobbra látszik, mindez a fő pénztársablon widgetjeiből.

## Köszönőoldal

A köszönőoldal a rendelés leadása után jelenik meg. Hozz létre új sablont **Köszönjük** típussal.

A köszönőoldal widgetjei:

| Widget (a szerkesztőben) | Mit csinál |
|---|---|
| **Köszönőoldali vásárlói címadatok** | A számlázási adatok táblázata, amelyet a vásárló a pénztárban adott meg. |
| **Köszönőoldali rendelési részletek** | Részletes táblázat a megrendelésről: termékek, végösszeg, szállítás és egyebek. |
| **Köszönőoldali rendelés** | A rendelés rövidebb összefoglalója. Egyszerűbb, minimalista köszönőoldalhoz való. |

A **Köszönőoldali rendelés** widget **Általános** szakaszában a **Módosítás** kapcsoló alatt átírhatod az **Üzenet**et és a **Címsorok** (**Rendelés**, **Dátum**, **E-mail-cím**, **Összeg**, **Fizetés**) feliratát.

Lépések:

1. Ellenőrizd, hogy a **Köszönőoldal widgetjei** szakasz be van kapcsolva.
2. Hozz létre **Köszönjük** típusú sablont, tedd bele a widgeteket, és tedd közzé.
3. A **WooCommerce → Beállítások → JetWooBuilder** fül **Köszönőoldal** szakaszában jelöld be az **Egyéni köszönőoldal** jelölőnégyzetet, válaszd ki a sablont a **Köszönőoldal-sablon** listából, és mentsd.
4. Adj le egy rendelést: a fizetés után a vásárló a sablonhoz tartozó köszönőoldalra érkezik.

![A köszönőoldal az egyedi sablonnal](./kepek/koszonoldal-frontend.webp)

*A köszönőoldal az egyedi sablonnal* (https://minta-bolt.hu/penztar/order-received/40/?key=wc_order_jlva6xh4p38xE)

A képen a rendelés összefoglalója (szám, dátum, végösszeg, e-mail-cím, fizetési mód), a rendelés részletei és a számlázási cím látszik.

## Oldalsablon JetThemeCore-ral

Ha a kosár, a pénztár vagy a köszönőoldal saját fejlécet és láblécet kap, a JetThemeCore oldalsablonját használd (lásd [Sablonok létrehozása és hozzárendelése](https://hub.hellowp.io/hu/plugins/jet-woo-builder/sablonok/)). A feltételek: **Include**, **WooCommerce**, és az oldal típusa:

| Oldal | A harmadik lista értéke |
|---|---|
| Kosár | **Product Cart** |
| Pénztár | **Products Checkout** |
| Köszönőoldal | **Thank You Page** |

Lépések (mindhárom oldalra ugyanúgy):

1. Kapcsold be az oldal widgetjeit a **Crocoblock → JetPlugins Settings → JetWooBuilder → Widgetek** oldalon.
2. A **Crocoblock → Theme Builder** oldalon kattints a **Create new page template** gombra, vegyél fel egy feltételt az **Add Condition** gombbal a fenti értékekkel, majd kattints a **Create** gombra. Az új oldalsablonnak adj nevet.
3. Az **Add body** gombbal vagy új sablont hozol létre a JetThemeCore-ral (a fent leírt widgetekkel), vagy az **Add from library** lehetőségből kiválasztod a JetWooBuilderrel készült sablont, és a **Use** gombra kattintasz.
4. Az **Add header** gombbal vegyél fel fejlécet (új vagy könyvtárból), ugyanígy a láblécet.
5. Pénztárnál a **Crocoblock → Theme Templates** oldalon is készíthetsz sablont: az **Add New** gombnál a **Template Type** legyen **Checkout**. A kész sablonhoz utólag add meg a feltételeket, ahogy az oldalsablonnál.
6. A **WooCommerce → Beállítások → JetWooBuilder** fülön a megfelelő szakasz egyéni sablonját kapcsold ki: **Egyéni kosár**, **Egyéni pénztár**, **Egyéni köszönőoldal**. Nem kell sablont kiválasztani, mert a hozzárendelést az oldalsablon feltétele adja. Mentsd a beállításokat.
7. Tegyél egy terméket a kosárba, és nézd meg a kosár, a pénztár és a köszönőoldal megjelenését a weboldalon.

Ha a pénztár oldalt te hozod létre kézzel, a **Oldalak → Új oldal** menüben tegyél rá egy shortcode-blokkot a **[woocommerce_checkout]** értékkel, tedd közzé, majd a **WooCommerce → Beállítások → Haladó** fülön jelöld ki a **Pénztár** oldalnak. A kosár és a Fiókom oldalra ugyanígy a **[woocommerce_cart]** és a **[woocommerce_my_account]** kell. Az alapoldalakat a **WooCommerce → Állapot → Eszközök** oldalon az alapértelmezett oldalak létrehozásával is előállíthatod. A **Widgetek megjelenítési módja** a **WooCommerce → Beállítások → JetWooBuilder** fülön legyen **Elementor alapértelmezése**.

Ilyenkor a **WooCommerce → Beállítások → JetWooBuilder** fülön az adott oldal egyéni sablonját (például az **Egyéni kosár**, **Egyéni pénztár** vagy **Egyéni köszönőoldal** jelölőnégyzetet) hagyd kikapcsolva.

## Ingyenes szállítás sávja a kosárban

A kosár sablonjába folyamatjelző sávot is tehetsz, amely mutatja, mennyi hiányzik az ingyenes szállításhoz. Ennek leírása a [Bővítések és példák](https://hub.hellowp.io/hu/plugins/jet-woo-builder/bovitesek/) fejezetben van.