# Egyedi termékoldal WooCommerce-alapú foglaláshoz

> Egyedi termékoldal-sablon a JetWooBuilderrel és a JetProductGallery-vel, illetve a JetThemeCore és a JetEngine elemeivel, foglalási űrlappal és kapcsolódó termékekkel.

WooCommerce-alapú módban a foglalható termék oldalát kétféleképpen alakíthatod egyedivé: a JetWooBuilder egyoldalas sablonjával, vagy a JetThemeCore és a JetEngine elemeivel. Mindkét módhoz Elementor, WooCommerce és JetBooking kell, a beállítását előbb végezd el ([WooCommerce-alapú mód](https://hub.hellowp.io/hu/plugins/jet-booking/woocommerce-alapu-mod/)).

## 1. módszer: JetWooBuilder és JetProductGallery

Szükséges még: JetWooBuilder és JetProductGallery.

### Az egytermékes elemek bekapcsolása

1. Nyisd meg a **Crocoblock → JetPlugins beállításai → JetWooBuilder → Widgets** oldalt.
2. A **Single Product Widgets** blokkban kapcsold be azokat az elemeket, amelyeket a sablonban használni fogsz.

### A sablon létrehozása

1. Nyisd meg a **Crocoblock → Woo Page Builder** oldalt, és kattints a **Create New Template** gombra.
2. A **This Template For** mezőben válaszd a „Single” értéket, add meg a sablon nevét, és ha szeretnél, válassz elrendezés-előbeállítást (különben nulláról építkezel).
3. Kattints a **Create Template** gombra.

A termék adatait az alábbi elemekkel írhatod ki:

| Adat | Elem |
|---|---|
| Cím | **Single Title** |
| Kép | **Single Images** |
| Ár | **Single Price** |
| Kivonat, kategóriák, értékelés | **Single Excerpt**, **Single Meta**, **Single Rating** |
| Kosárba tétel | **Single Add to Cart** |
| Egyéni mezők (metaboxok) | JetEngine **Dynamic Field** |

A galériához a JetProductGallery elemei közül választhatsz: **Anchor Navigation** (a képeket kézzel, a WooCommerce galériából vagy dinamikus címkével adhatod meg), **Gallery Grid**, **Gallery Modern** vagy **Gallery Slider**.

Ha kész, kattints a **Publish** gombra.

### A sablon hozzárendelése

1. Nyisd meg a **WooCommerce → Beállítások** oldalt, és a **JetWooBuilder** fület.
2. A **Single Product** szakaszban jelöld be az **Enable custom product single page** beállítást.
3. A **Single Product Template** listából válaszd ki az új sablont.
4. Kattints a **Módosítások mentése** gombra.

Nyiss meg egy terméket a frontenden: az új sablon jelenik meg.

## 2. módszer: JetThemeCore és JetEngine

Szükséges még: JetEngine és JetThemeCore.

### A sablon létrehozása

1. Nyisd meg a **Crocoblock → Theme Builder** oldalt, görgess a „Single Product” szakaszhoz, és kattints a plusz ikonra.
2. A feltételeknél válaszd az „Include”, „WooCommerce” és „Single Product” értékeket, a **Select** mezőbe pedig írd: „All”.
3. Kattints a **Create** gombra.
4. Írd be a sablon nevét, kattints az **Overwrite theme body** melletti „+” ikonra, és válaszd a **Create Template** lehetőséget.
5. Válaszd ki a tartalom típusát („Elementor”), add meg a nevet, és kattints a **Create** gombra.

### A termék adatainak kiírása

| Mit jelenítesz meg | Elem és beállítás |
|---|---|
| Cím | **Dynamic Field**, **Source**: „Post/Term/User/Object”, az **Object Field** listában a WooCommerce csoportból a „Title” |
| Ár | **Dynamic Field**, az **Object Field** listában a WooCommerce csoportból a „Plain Regular Price” |
| Készletállapot, cikkszám | **Dynamic Field**, WooCommerce csoport: „Stock Status”, „SKU” |
| Egyéni mező | **Dynamic Field**, **Source**: „Meta Data”, a mezőt a listából választod |
| Termékleírás | **Heading** vagy **Headline** elem **Dynamic Tag**-gel |
| Kép | **Dynamic Image** (alapból a kiemelt kép) |
| Kategóriák | **Dynamic Terms**, a **Text before terms list** mezőbe fix szöveget írhatsz |

Fix szöveget a **Customize field output** kapcsolóval fűzhetsz a mezőhöz, a `%s` helyére kerül a mező értéke.

### A foglalási űrlap

Az űrlapot a **JetForm** elemmel teheted a sablonba (a **Choose Form** mezőben választod ki, lásd [Foglalási űrlap WooCommerce-integrációval](https://hub.hellowp.io/hu/plugins/jet-booking/foglalasi-urlap-woocommerce-integracio/)). Ha gombnyomásra felugró ablakban szeretnéd megjeleníteni:

1. Tedd közzé a sablont, és készítsd el az űrlapot.
2. A **JetPopup → All Popups** oldalon kattints a **Create New Popup** gombra, válaszd ki a tartalom típusát, add meg a nevet és az előbeállítást, és kattints a **Create** gombra.
3. Tedd bele a **JetForm** elemet a foglalási űrlappal, és tedd közzé.
4. Állítsd be a megjelenítési feltételeket, és kattints a **Save Conditions** gombra. Feltételek nélkül az ablak nem jelenik meg.
5. A termékoldal-sablon **Button** elemén, a **Haladó** fül **JetPopup** szakaszában válaszd ki az **Attached Popup** értékét, a **Trigger Type** legyen „Click on Widget”.

### Kapcsolódó termékek

1. Készíts listázási sablont a WooCommerce-termékekhez a JetEngine dinamikus elemeivel, és tedd közzé.
2. A **JetEngine → Lekérdezéskészítő** oldalon kattints az **Új hozzáadása** gombra, add meg a nevet, és a lekérdezés típusa legyen „WC Product Query”. Az **Általános** fülön a **Product Status** értéke legyen „Published (publish)”. A **Tax Query** fülön állítsd be, hogy az aktuális termék kifejezéseivel azonos kifejezésű termékeket kérje le. Mentsd a lekérdezést.
3. A sablonban add hozzá a **Listing Grid** elemet, válaszd ki a listázási sablont, a **Custom Query** fülön kapcsold be a kapcsolót, és válaszd ki a lekérdezést.

Tedd közzé a sablont, és nyiss meg egy terméket a frontenden.