# Első terméktábla elkészítése

> Lépésről lépésre: oszlopok, táblabeállítások, szűrők és dizájn beállítása a terméktáblához.

Ez a fejezet egy példán mutatja végig, hogyan állítasz össze egy terméktáblát: oszlopokat választasz, beállítod a megjelenést és a lapozást, szűrőket adsz hozzá, végül színezed a fejlécet.

## Mit kell előtte telepíteni

- WooCommerce, telepítve és aktiválva.
- JetProductTables, telepítve és aktiválva.

A beállítások kétféleképpen érhetők el:

- a **Bővítmények** oldalon a JetProductTables sorában lévő beállítási hivatkozással, vagy
- a **WooCommerce → Beállítások → Terméktábla** oldalon.

![A Terméktábla beállítóoldal az Oszlopok lappal](./kepek/oszlopok.webp)

*A Terméktábla beállítóoldal az Oszlopok lappal* (https://minta-bolt.hu/wp-admin/admin.php?page=wc-settings&tab=jet_wc_product_table)

A fül tetején az almenü (**Columns**, **Settings**, **Filters**, **Integration**, **Design**) és a jobb oldalon a **Presets Manager** és a **Generate Shortcode** gomb látszik.

## 1. Az oszlopok beállítása

A **Columns** lapon oszlopokat adhatsz hozzá és törölhetsz, átrendezheted őket, és mindegyik beállításait módosíthatod. Alapból ez a hat oszlop van: **Termék ID**, **Termék neve**, **Termékkép**, **SKU**, **Ár** és **Gombok**.

Példánkban:

1. Töröld a **Termék ID** és az **SKU** oszlopot a soruk jobb szélén lévő kuka ikonnal.
2. Add hozzá a **Kategóriák** oszlopot: válaszd ki a **Select a column...** listából, és kattints az **Oszlop hozzáadása** gombra.
3. Add hozzá az **Egyéni osztályozási kifejezések** oszlopot. A **TAXONOMY** mezőben válaszd a termék típusát, a **LABEL** mezőbe pedig írd: „Típus”.
4. Add hozzá a **Készletállapot/mennyiség** oszlopot.
5. Húzd a **Gombok** oszlopot a lista végére.

Az oszlopok részletes beállításait az [Oszlopok](https://hub.hellowp.io/hu/plugins/jet-product-tables/oszlopok/) fejezet írja le.

## 2. A táblabeállítások

A **Settings** lap azt szabályozza, hogyan jelenik meg a tábla a webhelyen. A [Táblázat beállításai és mobilnézet](https://hub.hellowp.io/hu/plugins/jet-product-tables/beallitasok/) fejezet minden mezőt leír, a példában ezeket állítjuk:

- A **Show Header** alapból be van kapcsolva.
- Kapcsold be a **Sticky Header** kapcsolót: a fejléc görgetéskor az oldal tetején marad.
- A **Show Footer** kapcsoló a tábla aljára is kiteszi a fejlécet az oszlopnevekkel. Most hagyd kikapcsolva.
- A **MOBILE LAYOUT** listában választhatsz: **Moveable**, **Shorten**, **Transform** vagy **Collapsed**.
- A **Lazy Load** kikapcsolva azonnal betölti a tábla tartalmát. Bekapcsolva csak akkor töltődik be, amikor a tábla a képernyőre kerül.

A **Navigation** szakaszban kapcsold be a **Pager** kapcsolót, a **PAGER POSITION** legyen **Before Table**, és kapcsold be a **Load More** kapcsolót, hogy megjelenjen a „Továbbiak betöltése” gomb.

![A Settings lap General szakasza](./kepek/beallitasok-altalanos.webp)

*A Settings lap General szakasza* (https://minta-bolt.hu/wp-admin/admin.php?page=wc-settings&tab=jet_wc_product_table)

## 3. Szűrők

A **Filters** lapon az **Enable Filters** kapcsoló hozzáadja a szűrőket. Háromféle szűrő van: osztályozás szerinti, tulajdonság szerinti és szöveges keresés. A példában két osztályozásszűrőt és egy keresőt használunk.

1. Nyisd ki az első **Osztályozás (taxonomy) szűrő** sort. A **HELYKITÖLTŐ** mezőbe írd: „Válassz kategóriát”, a **VÁLASSZ OSZTÁLYOZÁST (TAXONOMY)** listában válaszd a termékkategóriákat, és kapcsold be a **Darabszám megjelenítése** kapcsolót, hogy a kifejezés mellett látszódjon a hozzá tartozó termékek száma.
2. A **Szűrő keresése** sort hagyd az alapbeállításon.
3. Válaszd az **Osztályozás (taxonomy) szűrő** típust a **Select a filter...** listából, és kattints az **Add Filter** gombra. Húzd a sort a második helyre.
4. A **HELYKITÖLTŐ** legyen „Válassz típust”, a taxonómia a terméktípus, és kapcsold be a **Darabszám megjelenítése** kapcsolót.

![A Filters lap bekapcsolt szűrőkkel](./kepek/szurok.webp)

*A Filters lap bekapcsolt szűrőkkel* (https://minta-bolt.hu/wp-admin/admin.php?page=wc-settings&tab=jet_wc_product_table)

A szűrők részletei a [Szűrők](https://hub.hellowp.io/hu/plugins/jet-product-tables/szurok/) fejezetben vannak.

## 4. A tábla stílusa

A **Design** lapon a **Table Headings**, a **Table Body** és a **Filters** szakasz stílusát állíthatod. A példában a **Table Headings** szakaszban:

- a **TEXT COLOR** fehér (`#FFFFFF`),
- a **BACKGROUND COLOR** egyéni szín (`#E6524B`),
- a **TEXT TRANSFORM** a „Ab” (nagy kezdőbetű),
- a **TEXT ALIGNMENT** középre igazított.

A beállításokat a [Dizájn](https://hub.hellowp.io/hu/plugins/jet-product-tables/dizajn/) fejezet írja le.

## Mentés

Kattints a **Beállítások mentése** gombra. Ha különböző megjelenésű táblákat szeretnél, a beállításokat [előbeállításként](https://hub.hellowp.io/hu/plugins/jet-product-tables/elobeallitasok/) is elmentheted. A táblát ezután a [WooCommerce-integrációval](https://hub.hellowp.io/hu/plugins/jet-product-tables/integracio/), [shortcode-dal](https://hub.hellowp.io/hu/plugins/jet-product-tables/shortcode/), a [blokkal](https://hub.hellowp.io/hu/plugins/jet-product-tables/blokk/) vagy az [Elementor widgettel](https://hub.hellowp.io/hu/plugins/jet-product-tables/elementor-widget/) jelenítheted meg.