# Bolt, archívum és kategóriák

> A boltoldal, a termékkártya (archívumtétel), a kategóriakártya, a kategóriánkénti sablon, a keresés, valamint a kapcsolódó és upsell termékek sablonjai.

A bolt oldala két sablonból áll össze: a **Bolt** sablon a lap vázát adja (cím, rendezés, lapozás, termékrács), az **Archívumtétel** sablon pedig egyetlen termékkártya kinézetét határozza meg, amely a rácsban ismétlődik. Ez a fejezet ezeket, a kategóriák sablonjait és a keresés, a kapcsolódó termékek és az upsell sablonjait írja le.

## Termékkártya: az Archívumtétel sablon

Az archívumtétel sablonban egyetlen termék kártyáját tervezed meg. A sablon a rácsban, listában, a keresési találatok között és a kapcsolódó termékeknél ismétlődik, ezért ne tegyél bele hosszú leírást.

1. Kapcsold be az archívumhoz szükséges widgeteket a **Termékarchívum-widgetek** szakaszban (lásd [Beállítások](https://hub.hellowp.io/hu/plugins/jet-woo-builder/beallitasok/)).
2. A **Crocoblock → Woo Page Builder** oldalon hozz létre új sablont **Archívumtétel** típussal. Kiindulhatsz egy előre elkészített elrendezésből is.
3. Húzd be a kártya elemeit. A termékkártya widgetjei:

| Widget (a szerkesztőben) | Mit mutat |
|---|---|
| **Archívumi bélyegkép** | A termék képe. |
| **Archívum címe** | A termék neve. |
| **Archív ár** | A termék ára. |
| **Archívum kosárba helyezés** | A **Kosárba teszem** gomb. Változó terméknél a gomb a beállítások kiválasztására szolgál, és a termékoldalra visz. |
| **Archívumi akciós jelvény** | Az akciós jelvény. |
| **Archív értékelés** | A csillagos értékelés. |
| **Archív kivonat** | A rövid leírás. |
| **Archív kategóriák** | A termék kategóriái. |
| **Archívumi címkék** | A termék címkéi. |
| **Archívumi SKU** | A cikkszám. |
| **Archívumi készletállapot** | A készletállapot. |

Ha egy elem nem látszik, ellenőrizd, hogy a terméknek van-e hozzá adata: a kosárba gomb például nem jelenik meg, ha a terméknek nincs ára vagy nincs raktáron.

4. Nyisd meg a sablonbeállításokat (a szerkesztő felső sávjában a lap ikon), és a **Sablonminta beállításai** között állítsd be az oszlopokat (lásd [Sablonok létrehozása és hozzárendelése](https://hub.hellowp.io/hu/plugins/jet-woo-builder/sablonok/)). Az értékek eszközönként külön megadhatók, így számítógépen több oszlop, mobilon egy oszlop és listaszerű elrendezés lehet.
5. Tedd közzé a sablont.
6. A **WooCommerce → Beállítások → JetWooBuilder** fülön az **Egyéni termékarchívum** jelölőnégyzetet kapcsold be, a **Termékarchívum-sablon** listában válaszd ki a sablont, és mentsd.

Az archívumtétel sablon önmagában még nem ír ki semmit: a Bolt sablon rácsa vagy listája használja fel.

## A Bolt sablon

A boltsablon az alapértelmezett bolt oldal, és a kategóriaoldalak váza is. Ha egy termékkategória oldalát nyitod meg, ugyanez a sablon jelenik meg a kategória termékeivel.

1. Kapcsold be a **Üzletoldali termékwidgetek** szakasz widgetjeit.
2. Hozz létre új sablont **Bolt** típussal.
3. Építsd fel az oldalt a widgetekkel.
4. Tedd közzé, majd a **WooCommerce → Beállítások → JetWooBuilder** fülön kapcsold be az **Egyéni boltoldal** jelölőnégyzetet, válaszd ki a sablont a **Boltoldalsablon** listából, és mentsd. Az archívumtétel sablont is rendeld hozzá a fent leírt módon.

A boltsablon widgetjei:

| Widget (a szerkesztőben) | Mit csinál |
|---|---|
| **Termékek leírása** | Kiírja az adott kategória leírását. Stílusa: betűtípus, szín, szövegárnyék, igazítás. |
| **Terméklista** | A Products Loop widget: a termékeket az archívumtétel sablon szerint írja ki, és lehetővé teszi a rács és a lista nézet közötti váltást. Részletek lent. |
| **Termékek navigációja** | Az előző és a következő oldalra lépő gombok. A tartalma fülön ikon és felirat választható. |
| **Termékértesítések** | A WooCommerce értesítéseit írja ki a boltoldalon. |
| **Termékek rendezése** | Legördülő lista a rendezéshez: népszerűség, átlagos értékelés, legújabb, ár. |
| **A termékek oldalának címe** | A kategória nevét írja ki. A tartalma fülön a HTML-címke megadható. |
| **Termékek lapozása** | Lapozó oldalszámokkal. Az előző és következő oldalra mutató hivatkozások kapcsolhatók, felirat és ikon megadható. |
| **Terméktalálatok száma** | A találatok számát írja ki. |

A **Termékek rendezése**, a **Termékek lapozása**, a **Termékek navigációja** és a **Terméktalálatok száma** csak a fő lekérdezéssel működik. Ha a **Termékrács** vagy a **Terméklista** widgettel írod ki a termékeket, azokon kapcsold be az **Aktuális lekérdezés használata** kapcsolót, különben a rendezés és a lapozás nem hat rájuk.

Ha a **Terméktalálatok száma** és a **Termékek lapozása** egymás mellett nem egyező számot mutat, nézd meg az oldalankénti termékek számát a Megjelenés → Testreszabás → WooCommerce → Termékkatalógus oldalon (sorok száma és termékek száma soronként).

### Terméklista (Products Loop) és az elrendezésváltó

A **Terméklista** widgetnek az Elementor panelen kétszer is ez a neve: egyszer a **Globális widgetek** között (a lista nézetű termékmegjelenítő), egyszer a boltsablon csoportjában. Ez utóbbi a ciklus widget, amelyet ez a rész ír le.

A widget alapból az archívumtétel sablont írja ki. A **Terméklista** szakasz egyetlen mezője a **Sablon**, ahol választhatsz másik archívumtétel sablont. Az **Elrendezésváltó** szakaszban a **Bekapcsolás** kapcsolóval a termékek fölé kerül egy gombpár, amellyel a látogató rács és lista nézet között válthat.

| Beállítás | Mit csinál |
|---|---|
| **Bekapcsolás** | Megjeleníti az elrendezésváltót. |
| **Elrejtés mobilon** | Mobilon elrejti a váltót. Bekapcsolás után megjelenik az **Alapértelmezett mobil elrendezés** lista (**Fő** vagy **Másodlagos**). |
| **Fő** és **Másodlagos** | Két fül a két nézethez. Mindkettőn: **Sablon** (a nézethez használt archívumtétel sablon), **Címke** (a gomb felirata) és **Ikon**. |

Az alapértelmezett (**Fő**) nézet a rács.

Előkészületek az elrendezésváltóhoz:

1. Hozz létre két archívumtétel sablont, egyet a rácsos, egyet a listás nézethez (a listásban több elem lehet, például értékelés, kivonat, kategóriák).
2. A **WooCommerce → Beállítások → JetWooBuilder** fülön kapcsold be az **Egyéni boltoldal** és az **Egyéni termékarchívum** jelölőnégyzetet.
3. A listás archívumtétel sablonban a sablonbeállításoknál kapcsold be az **Egyéni oszlopszám bekapcsolása** kapcsolót, és a **Sablon oszlopai** mezőbe írj **1**-et, hogy a lista egyoszlopos legyen.
4. A rácsos sablonban ugyanitt adj meg más oszlopszámot, például **3**-at.

A **Stílus** fülön az **Váltó konténer** (háttér, szegély, margó, igazítás, pozíció) és a **Váltógombok** (betűtípus, méret, színek, kitöltés, igazítás) szakasz formázza a váltót.

![A Termékrács beállításai a Bolt sablonban](./kepek/szerkeszto-termekracs.webp)

*A Termékrács beállításai a Bolt sablonban* (https://minta-bolt.hu/wp-admin/post.php?post=27&action=elementor)

A boltoldal weboldali képe:

![A bolt oldal a weboldalon](./kepek/bolt-frontend.webp)

*A bolt oldal a weboldalon* (https://minta-bolt.hu/bolt/)

## Boltoldal fejléccel és lábléccel (JetThemeCore)

A JetThemeCore oldalsablonjával a bolt oldalnak saját fejlécet és láblécet is adhatsz, a törzs pedig a JetWooBuilder boltsablonja.

1. Kapcsold be az **Üzletoldali termékwidgetek** widgetjeit.
2. A **Crocoblock → Theme Builder** oldalon hozz létre oldalsablont az **Include**, **WooCommerce**, **Shop Page** feltétellel.
3. Az **Add body** gombbal a **Add from library** lehetőségből add hozzá a már elkészített boltsablont. Ha új törzset készítesz a JetThemeCore-ral, a **Create template** gombbal válaszd ki a tartalomtípust (a JetWooBuilder widgetjeihez **Elementor**), adj nevet, és a **Go to editor** gombbal nyisd meg a szerkesztőt. A bolt widgetjeit ugyanúgy használhatod, mint a fent leírt boltsablonban.
4. A **Crocoblock → Theme Templates** oldalon az új törzs termékarchívumként jelenik meg, az oldalsablon feltétele szerint. Ugyanitt az **Add New** gombbal további sablonrészeket is készíthetsz.
5. Add hozzá a fejlécet és a láblécet az oldalsablonhoz.

A **WooCommerce → Beállítások → JetWooBuilder** fülön ilyenkor ne rendelj boltsablont a bolt oldalhoz.

## Kategóriakártya: a Kategóriaelem sablon

Ha sok terméked van, a boltoldalon termékek helyett kategóriákat is megjeleníthetsz: a látogató a kategóriára kattintva jut el a termékeihez.

1. Ha még nincsenek kategóriák, hozd létre őket a **Termékek → Kategóriák** oldalon (név, leírás, bélyegkép).
2. Kapcsold be a **Kategóriaarchívum-widgetek** szakasz widgetjeit.
3. A **Crocoblock → Woo Page Builder** oldalon hozz létre új sablont **Kategóriaelem** típussal.
4. Állítsd össze a kártyát a kategória widgetjeivel:

| Widget (a szerkesztőben) | Mit mutat |
|---|---|
| **Archív kategória bélyegképe** | A kategória képe. |
| **Archív kategória címe** | A kategória neve. |
| **Archív kategória leírása** | A kategória leírása. |
| **Archív kategória darabszáma** | A kategóriába tartozó termékek száma. |

5. A sablonbeállításokban az oszlopok, az egyenlő oszlopmagasság, a hézagok, a kattinthatóvá tétel és az új ablakban nyitás állítható (lásd [Sablonok létrehozása és hozzárendelése](https://hub.hellowp.io/hu/plugins/jet-woo-builder/sablonok/)).
6. Tedd közzé, majd a **WooCommerce → Beállítások → JetWooBuilder** fülön a **Kategóriaarchívum** szakaszban kapcsold be az **Egyéni kategóriaarchívum** jelölőnégyzetet, válaszd ki a sablont a **Kategóriaarchívum-sablon** listából, és mentsd.
7. A Megjelenés → Testreszabás → WooCommerce → Termékkatalógus oldalon állítsd a bolt oldal megjelenítését kategóriák megjelenítésére, a kategóriaoldal megjelenítését pedig termékek megjelenítésére, hogy a boltoldalon csak a kategóriák látsszanak.
8. A Bolt sablonba tegyél egy **Terméklista** (ciklus) widgetet beállítások nélkül: kategóriabeállításnál ez a kategóriakártyákat írja ki.

### Kategóriák a boltoldalon JetThemeCore-ral

Ha a kategóriákat kiíró boltoldalnak saját fejléce és lábléce is van:

1. Készítsd el a Kategóriaelem sablont a fenti lépések szerint, a Bolt sablonba pedig tedd bele a **Terméklista** (ciklus) widgetet.
2. A **Crocoblock → Theme Builder** oldalon hozz létre oldalsablont az **Include**, **WooCommerce**, **Shop Page** feltétellel.
3. Az **Add body**, majd az **Add from library** gombbal add hozzá a Terméklista widgetet tartalmazó Bolt sablont.
4. Add hozzá a fejlécet és a láblécet. A **WooCommerce → Beállítások → JetWooBuilder** fülön a bolt sablont ilyenkor ne rendeld hozzá.

## Külön sablon egy kategóriának vagy címkének

Ha a kategóriák oldalait eltérően szeretnéd megjeleníteni (például a női és a férfi kollekciót), külön Bolt sablont rendelhetsz egy-egy kategóriához vagy címkéhez.

1. Hozz létre külön **Bolt** típusú sablont a kategóriának.
2. A **WooCommerce → Beállítások → JetWooBuilder** fülön kapcsold be az **Egyéni sablonminta osztályozáshoz (taxonomy)** jelölőnégyzetet, és mentsd. Ez a beállítás a boltoldal egyéni sablonjától függetlenül is működik, és csak az osztályozásokra (kategóriák, címkék) vonatkozik; az oldal többi része a webhely témájának kialakítását követi.
3. Nyisd meg a **Termékek → Kategóriák** vagy **Termékek → Címkék** oldalt, és szerkeszd a kívánt elemet (vagy hozz létre újat).
4. Az oldal alján, az **Egyéni sablonminta** listában válaszd ki a Bolt sablont, és mentsd (**Frissítés**).

![Egyéni sablonminta kiválasztása a kategória szerkesztésénél](./kepek/kategoria-szerkesztes.webp)

*Egyéni sablonminta kiválasztása a kategória szerkesztésénél* (https://minta-bolt.hu/wp-admin/term.php?taxonomy=product_cat&tag_ID=16&post_type=product)

Az **Egyéni sablonminta** lista csak a JetWooBuilderrel készített Bolt sablonokat kínálja fel. Ha az **Egyéni boltoldal** és az **Egyéni sablonminta osztályozáshoz** is be van kapcsolva, a boltoldalon és azokon a kategóriaoldalakon, amelyekhez nincs külön sablon, a boltoldal sablonja jelenik meg, a külön sablont kapott oldalakon pedig a saját sablonjuk.

![A Bögrék kategória oldala](./kepek/kategoria-frontend.webp)

*A Bögrék kategória oldala* (https://minta-bolt.hu/product-category/bogrek/)

### Külön oldalsablon egy kategóriának JetThemeCore-ral

Ha egy kategória oldalának saját fejléc és lábléc is kell:

1. A **Crocoblock → Theme Builder** oldalon hozz létre oldalsablont. A feltétel: **Include**, **WooCommerce**, **Product Categories**, az utolsó listában pedig a kategória (vagy több kategória), amelyre a sablon vonatkozik. Kattints a **Create** gombra.
2. Az **Add body** gombnál vagy a **Create template** lehetőséget használd (válaszd az **Elementor** tartalomtípust, adj nevet, majd a **Create** gombbal hozd létre, és töltsd fel tartalommal), vagy az **Add from library** gombbal add hozzá a JetWooBuilderrel készített Bolt sablont (vagy a **Crocoblock → Theme Templates** oldalon készült termékarchívum-sablont).
3. Az új törzs a **Crocoblock → Theme Templates** oldalon termékarchívumként jelenik meg, az oldalsablon feltétele szerint.
4. Add hozzá a fejlécet és a láblécet, majd nézd meg a kategória oldalát a weboldalon.

## Keresési oldal sablonja

A keresési találatok termékkártyáját archívumtétel sablonnal adhatod meg.

1. Hozz létre **Archívumtétel** típusú sablont, és tervezd meg benne egy találat kinézetét.
2. A **WooCommerce → Beállítások → JetWooBuilder** fülön, a **Termékarchívum** szakaszban válaszd ki a sablont a **Keresési oldalsablon** listából, és mentsd.
3. A fejlécbe tegyél keresőt: nyisd meg a fejlécsablont, húzd be a keresőwidgetet, és kapcsold be rajta a termékkeresésre vonatkozó kapcsolót (angol felirata: Is Product Search).
4. A weboldalon írj be egy keresőszót, és nézd meg a találatokat.

Ha a keresési oldalnak saját fejléce, lábléce is van, a JetThemeCore oldalsablonjában az **Include**, **WooCommerce**, **Search Results** feltételt használd, és ne rendeld hozzá a sablont a WooCommerce beállításainál (lásd [Sablonok létrehozása és hozzárendelése](https://hub.hellowp.io/hu/plugins/jet-woo-builder/sablonok/)). A keresőt a többi oldalsablon (például a bolt) fejlécébe is be kell tenni, hogy a webhely minden oldalán lehessen keresni.

## Kapcsolódó termékek, upsell és keresztértékesítés

A WooCommerce háromféle kiegészítő terméket ismer. Könnyű összekeverni őket: a különbség az, ki választja ki a termékeket, és hol jelennek meg.

| Fajta | Ki választja | Hol jelenik meg | JetWooBuilder widget |
|---|---|---|---|
| Upsell | Te, kézzel | A termékoldalon | **Termékoldali upsell termékek** |
| Keresztértékesítés | Te, kézzel | A kosár oldalon | **Kosár keresztértékesítései** |
| Kapcsolódó termékek | A WooCommerce, automatikusan | A termékoldalon | **Termékoldali kapcsolódó termékek** |

Az upsell drágább vagy prémium változat, amely a termékoldalon arra ösztönöz, hogy a vásárló többet költsön. A kapcsolódó termékek azonos kategóriába vagy címkébe tartozó termékek, ezek a vásárlót további böngészésre ösztönzik, kiválasztásuk automatikus, ezért oldalbetöltésenként változhat.

Lépések:

1. Hozz létre **Archívumtétel** típusú sablont (például **Upsell** néven), amely a kiegészítő termékek kártyája lesz. Ez termékkártya, nem teljes oldal.
2. A **Termékek → Minden termék** oldalon nyisd meg a terméket, a termékadatok doboznál válaszd az egyszerű vagy a változó terméket, és a kapcsolt termékek fülön add meg az upsell és a keresztértékesítési termékeket. Kapcsolódó termékeket nem kell megadnod: ha a termékeknek van közös kategóriája vagy címkéje, a WooCommerce kiválasztja őket.
3. A **WooCommerce → Beállítások → JetWooBuilder** fülön a **Termékarchívum** szakaszban kapcsold be az **Egyéni termékarchívum** jelölőnégyzetet, és válaszd ki a sablont a **Kapcsolódó és felülértékesítési termékek sablonmintája** listában. Ha a keresztértékesítéshez is sablont adsz a **Keresztértékesítési terméksablon** listában, a **Kosár keresztértékesítései** widget azt használja.
4. Az **Egyéb beállítások** szakaszban add meg, hány kapcsolódó, upsell és keresztértékesítési termék jelenjen meg.
5. A termékoldal sablonjában használd a **Termékoldali upsell termékek** és a **Termékoldali kapcsolódó termékek** widgetet, a kosársablonban a **Kosár keresztértékesítései** widgetet.

Ha a kapcsolódó termékek nem jelennek meg: ellenőrizd, hogy a termék legalább egy kategóriát vagy címkét megoszt más termékkel, és hogy az egyéni termékoldal-sablonba be van-e téve a **Termékoldali kapcsolódó termékek** widget. A kapcsolódó termékeket nem választhatod ki kézzel: ha te döntenéd el, melyik termékek jelenjenek meg, használd az upsellt.

### Gyakori kérdések

**Hol jelennek meg az upsell és a keresztértékesítési termékek?** Az upsell a termékoldalon, a keresztértékesítés a kosár oldalon. Egyéni JetWooBuilder-sablonnál te döntöd el a helyüket: a **Termékoldali upsell termékek** widgetet a termékoldal sablonjába, a **Kosár keresztértékesítései** widgetet a kosár sablonjába tedd.

**Korlátozhatom, hány termék jelenik meg?** Igen. A **WooCommerce → Beállítások → JetWooBuilder** fül **Egyéb beállítások** szakaszában a kapcsolódó, az upsell és a keresztértékesítési termékeknek külön mezője van, így például négy kapcsolódó és csak két upsell termék is megjeleníthető.

**Miért ugyanaz a sablon az upsellnél és a kapcsolódó termékeknél?** A kiválasztott archívumtétel sablon adja a termékkártyák kinézetét mindkét widgetben. A két widget a termékoldal sablonjában eltérő termékkészletet jelenít meg, ezt az oldal előnézetében is látod.