# Rövidkódok

> A FluentCart rövidkódjai: termékrács, pénztár- és kosárgomb, minikosár, kategóriák, logó, vásárlói fiók gombja, terméknév és kép, oldalba ágyazott pénztár, pénznemváltó.

A rövidkódokkal a termékeidet, gombjaidat és oldalaidat a WordPress-webhelyed bármely pontján megjelenítheted: bejegyzésben, saját nyitóoldalon vagy az oldalsávban.

## A rövidkód beillesztése

1. Nyiss meg egy oldalt vagy bejegyzést a blokkszerkesztőben.
2. Add hozzá a **Rövidkód** blokkot, és illeszd be a kódot.
3. Tedd közzé az oldalt.

![Egy minta oldal a termékrács, a kategórialista és a Kosárba gomb rövidkódjával](./kepek/testreszabas-rovidkod-bolt.webp)

*Egy minta oldal a termékrács, a kategórialista és a Kosárba gomb rövidkódjával* (https://minta-bolt.hu/rovidkod-minta/)

A képen egy háromoszlopos termékrács, alatta a kategórialista darabszámmal és egy különálló kosárba gomb látszik. Ez három rövidkódból áll.

Tipp: a `per_page` attribútumot alacsony számra (3 vagy 4) állítva kis „Kiemelt termékek” sávot hozhatsz létre a nyitóoldalon.

## 1. Terméklista: `[fluent_cart_products]`

A legegyszerűbb mód termékrács megjelenítésére. Jó a fő boltoldalra, a nyitóoldal kiemelt termékeihez vagy egy kategória galériájához.

### Alapszint

```text
[fluent_cart_products]
```

### Szűrés termékazonosítóval

Konkrét termékeket egy vagy több azonosító megadásával jeleníthetsz meg. Ez kézzel válogatott kínálathoz jó nyitóoldalon vagy akciós szakaszban.

```text
// Egyetlen termék
[fluent_cart_products ids="433"]

// Több termék
[fluent_cart_products ids="344,346,347"]
```

Bizonyos termékeket az `exclude_ids` attribútummal rejthetsz el:

```text
// Egy termék kizárása
[fluent_cart_products exclude_ids="344"]

// Több termék kizárása
[fluent_cart_products exclude_ids="3595,3493"]
```

Ha nem létező azonosítót adsz meg (például `ids="999999"`), nem jelenik meg termék.

### Szűrés kategória szerint

A terméklistát egy vagy több kategóriára szűkítheted. A kategóriát hivatkozhatod a slugjával vagy a kifejezés azonosítójával, amelyik kényelmesebb.

```text
// Egy kategória slugja
[fluent_cart_products category="ruhak"]

// Több kategória slugja
[fluent_cart_products category="ruhak,cipok"]

// Egy kategória azonosítója
[fluent_cart_products category_id="9"]

// Több kategória azonosítója
[fluent_cart_products category_id="9,12"]

// Slug és azonosító együtt
[fluent_cart_products category="pulcsik" category_id="8"]
```

A kategóriaszűrő a lapozással is együttműködik. Ez a rövidkód oldalanként két terméket mutat számozott lapozással, és a kategóriaszűrő megmarad, amikor a látogatók lapoznak:

```text
[fluent_cart_products category="pulcsik" per_page="2" paginator="numbers"]
```

Ha nem létező kategória slugját adod meg, a szűrő figyelmen kívül marad, és az összes termék megjelenik.

### Szűrés bármely taxonómia szerint

A kategórián túli szűréshez a `taxonomies` attribútumot használd. Csak kifejezésazonosítókat fogad, taxonómiánként csoportosítva: `taxonómia:azonosító,azonosító`, több taxonómiát `|` jel választ el.

```text
// A 67-es márka termékei
[fluent_cart_products taxonomies="product-brands:67"]

// Két márka és egy kategória egyszerre
[fluent_cart_products taxonomies="product-brands:67,82|product-categories:9"]
```

Ez működik a `product-categories`, a `product-brands` és minden, a termékeken regisztrált egyéni taxonómiával (például az áruház által hozzáadott `product-tags`). Ha a taxonómia nincs regisztrálva a termékeken, vagy a kifejezés nem tartozik a megnevezett taxonómiához, a szűrő semmit nem talál, ahelyett hogy bővítené a listát.

Ne keverd össze ezt a haladó példa `custom_filters` részében lévő `taxonomies` kulccsal: az csak azt dönti el, mely taxonómiaszűrők jelenjenek meg a vásárlói oldalsávban. Az itt leírt attribútum a rövidkód által megjelenített termékeket szűkíti.

### Szűrés terméktípus és akció szerint

A `product_type` csak egy típust mutat, az `on_sale` az akciós termékeket.

```text
// Csak egyszerű termékek
[fluent_cart_products product_type="simple"]

// Csak változatos termékek
[fluent_cart_products product_type="simple_variations"]

// Csak fizikai termékek
[fluent_cart_products product_type="physical"]

// Csak digitális termékek
[fluent_cart_products product_type="digital"]

// Csak előfizetéses termékek
[fluent_cart_products product_type="subscription"]

// Csak a jelenleg akciós termékek
[fluent_cart_products on_sale="yes"]
```

Az üres attribútumértékeket (például `ids=""`, `category=""`, `product_type=""`) a rendszer figyelmen kívül hagyja, ezért egy véletlen üres érték nem rontja el az oldalt.

### Rendezés

A sorrendet a gyakori beállításokat adó `sort_by` attribútummal, vagy részletesebben az `orderby` és az `order` attribútummal szabályozhatod.

```text
// Ár szerint növekvő (orderby és order)
[fluent_cart_products orderby="price" order="ASC"]

// Ár szerint növekvő
[fluent_cart_products sort_by="price-low"]

// Ár szerint csökkenő
[fluent_cart_products sort_by="price-high"]

// Név szerint A-tól Z-ig
[fluent_cart_products sort_by="name-asc"]

// Legújabbak elöl
[fluent_cart_products sort_by="date-newest"]

// Legrégebbiek elöl
[fluent_cart_products sort_by="date-oldest"]
```

### Elrendezés és megjelenítés

Az oszlopok számát és a nézetet az oldalad külsejéhez igazíthatod.

```text
// Háromoszlopos rács
[fluent_cart_products columns="3"]

// Legfeljebb 6 termék, három oszlopban
[fluent_cart_products limit="6" columns="3"]

// Kétoszlopos rácsnézet
[fluent_cart_products columns="2" view_mode="grid"]

// Listanézet, oldalanként 4 termékkel és számozott lapozással
[fluent_cart_products per_page="4" view_mode="list" paginator="numbers"]
```

### Attribútumok kombinálása

A rövidkód ereje az attribútumok keverésében van. Néhány gyakorlati példa:

```text
// Két kiválasztott termék, oldalanként egy
[fluent_cart_products ids="433,434" per_page="1" paginator="numbers"]

// Kiválasztott termékek háromoszlopos elrendezésben
[fluent_cart_products ids="433,434,435" columns="3" per_page="3"]

// Egy kategória termékei, egy kizárva, legújabbak elöl
[fluent_cart_products category="pulcsik" exclude_ids="433" sort_by="date-newest"]

// Digitális termékek három oszlopban, ár szerint rendezve, oldalanként 6
[fluent_cart_products product_type="digital" columns="3" sort_by="price-low" per_page="6"]
```

### Haladó használat: szűrők és oldalsáv

Oldalsávos szűrőt is bekapcsolhatsz, JSON-alapú beállításokkal. Ez a példa 4 terméket mutat oldalsávos szűrővel:

```text
[fluent_cart_products 
    per_page=4 
    live_filter='false' 
    enable_filter='true' 
    paginator='numbers' 
    custom_filters='{"enabled":true,"live_filter":true,"taxonomies":"product-categories,product-brands","price_range":"price_range"}' 
    filters='{"enabled":true,"sort_by":"name-desc"}'
]
```

### Attribútumtáblázat

| Attribútum | Mit csinál | Alapérték | Lehetséges értékek |
|---|---|---|---|
| `ids` | Csak a megadott azonosítójú termékeket mutatja. | nincs | Egy azonosító vagy vesszővel elválasztott lista (`433` vagy `344,346,347`) |
| `exclude_ids` | Elrejti a megadott termékeket. | nincs | Egy azonosító vagy vesszővel elválasztott lista |
| `category` | Egy vagy több kategória slugja szerint szűr. | nincs | Vesszővel elválasztott slugok (`ruhak` vagy `ruhak,cipok`) |
| `category_id` | Egy vagy több kategória azonosítója szerint szűr. | nincs | Vesszővel elválasztott azonosítók (`9` vagy `9,12`) |
| `taxonomies` | A termékeken regisztrált bármely taxonómia kifejezésazonosítói szerint szűr. | nincs | `taxonómia:azonosító,azonosító`, taxonómiák között `\|` (`product-brands:67,82\|product-categories:9`) |
| `product_type` | Csak egy terméktípust mutat. | nincs | `simple`, `simple_variations`, `physical`, `digital`, `subscription` |
| `on_sale` | Csak a jelenleg leárazott termékeket mutatja. | nincs | `yes` |
| `sort_by` | Gyors rendezési beállítás. | nincs | `price-low`, `price-high`, `name-asc`, `date-newest`, `date-oldest` |
| `orderby` | A rendezés mezője (az `order` mellett használd). | nincs | `price`, `name`, `date` |
| `order` | A rendezés iránya (az `orderby` mellett használd). | nincs | `ASC`, `DESC` |
| `columns` | Az oszlopok száma a rácson. | nincs | Bármely szám (`2`, `3`, `4`) |
| `limit` | A megjelenített termékek legnagyobb száma. | nincs | Bármely szám (`6`, `10`) |
| `view_mode` | Rács vagy lista elrendezés. | `grid` | `grid`, `list` |
| `per_page` | Hány termék látszik egy oldalon. | 12 | Bármely szám (4, 8, 20) |
| `paginator` | A lapozás stílusa az alján. | `numbers` | `numbers`, `load_more`, `scroll`, `none` |
| `enable_filter` | A szűrő oldalsáv megjelenítése vagy elrejtése. | `true` | `true`, `false` |
| `live_filter` | Ha `true`, a termékek azonnal frissülnek a szűrők kattintására. | `true` | `true`, `false` |
| `custom_filters` | A kategória- és árszűrők beállításai. | nincs | Lásd lent |
| `filters` | A rendezés beállításai (név, ár és így tovább). | nincs | Lásd lent |

### A szűrők JSON-beállításai

A `custom_filters` objektum:

- `enabled`: `true` értéknél megjelennek az egyéni kategória- és márkaszűrők.
- `live_filter`: `true` értéknél a frissítés azonnali, oldal újratöltése nélkül.
- `taxonomies`: mit mutasson a szűrő (például `"product-categories,product-brands"`).
- `price_range`: árcsúszkát ad a `"price_range"` érték megadásával.

A `filters` objektum:

- `sort_by`: milyen sorrendben jelenjenek meg először a termékek. Lehetséges értékek: `name-asc`, `name-desc`, `price-asc`, `price-desc`, `date-desc`.

## 2. Pénztárgomb: `[fluent_cart_checkout_button]`

Olyan gombot hoz létre, amely a pénztároldalra visz, vagy felugró „Vásárlás most” ablakot nyit. Nyitóoldalakra és akciókra való, ahol a lehető leggyorsabbá akarod tenni a vásárlást.

```text
[fluent_cart_checkout_button variation_id="113" instant_checkout="yes"]
```

| Attribútum | Mit csinál |
|---|---|
| `button_text` | A gomb felirata, például `button_text="Megveszem"`. Ha üres, általában „Checkout” a felirat. |
| `variation_id` | (Nagyon fontos) Az eladandó konkrét változat azonosítója. A termék beállításaiban látható változatazonosítót kell megadnod. |
| `target` | Hol nyíljon meg a hivatkozás: `_self` ugyanabban a lapban, `_blank` új ablakban. |
| `instant_checkout` | `yes` értéknél a pénztár felugró ablakban nyílik. `no` értéknél a gomb sima hivatkozásként viszi a vevőt a pénztároldalra. |

Példák:

- Hivatkozás a pénztárhoz: `[fluent_cart_checkout_button button_text="Tovább a pénztárhoz" target="_self"]`
- Egykattintásos vásárlás: `[fluent_cart_checkout_button variation_id="113" instant_checkout="yes" button_text="Vásárlás most"]`

## 3. Kosárba gomb: `[fluent_cart_add_to_cart_button]`

Egyszerű **Kosárba** gombot tesz oda, ahová szeretnéd. Akkor használd, ha azt akarod, hogy a vevő a kattintás után az oldalon maradjon, és vásároljon tovább.

```text
[fluent_cart_add_to_cart_button button_text="Kosárba teszem" variation_id="113"]
```

| Attribútum | Mit csinál |
|---|---|
| `button_text` | A gomb felirata (például „Zacskóba”, „Kérek egyet”). |
| `variation_id` | A kosárba tett termék vagy változat azonosítója. |

## 4. Minikosár: `[fluent_cart_mini_cart]`

Kis, praktikus kosárösszegzést jelenít meg, fejlécbe vagy oldalsávba való. A vevő egy pillantással látja a tételek számát és a végösszeget.

```text
[fluent_cart_mini_cart cart_icon="bag" show_total_price="true"]
```

| Attribútum | Mit csinál |
|---|---|
| `cart_icon` | Az ikon stílusa: `cart`, `bag`, `bag-alt`. Egyéni SVG-t is megadhatsz URL-lel: `cart_icon="https://pelda.hu/ikon.svg"`. |
| `show_total_price` | `true` értéknél az ikon mellett látszik a jelenlegi végösszeg. |
| `show_item_count` | Mikor látszik a tételek száma: `always` (nullánál is), `has_items` (csak ha van tétel a kosárban), `never` (soha). |
| `icon_color`, `price_color`, `product_count_color` | Hexadecimális színkódok a márkádhoz (például `icon_color="#cf2e2e"`). |
| `button_class` | Egyéni CSS-osztály a kosárgombhoz, ha saját stílust adnál neki. |

## 5. Termékkategóriák: `[fluent_cart_product_categories]`

A termékkategóriákat listában vagy legördülő menüben mutatja, hogy a vevők kategória szerint böngészhessenek.

```text
[fluent_cart_product_categories display_style="list" show_hierarchy="true"]
```

| Attribútum | Mit csinál |
|---|---|
| `display_style` | A megjelenítés módja: `list` (sima lista) vagy `dropdown` (helytakarékos legördülő menü). |
| `show_hierarchy` | `true` értéknél a szülő és gyermek kategóriák behúzva látszanak. |
| `show_empty` | `true` értéknél azok a kategóriák is megjelennek, amelyekben még nincs termék. |
| `show_product_count` | `true` értéknél a kategórianév mellett látszik a termékek száma. |

## 6. Áruház logó: `[fluent_cart_store_logo]`

Az áruház logóját jeleníti meg a webhely bármely pontján, egyéni hivatkozással és méretbeállítással.

```text
[fluent_cart_store_logo is_link="true" logo_url="https://pelda.hu/logo.png" max_width="200"]
```

| Attribútum | Mit csinál |
|---|---|
| `logo_url` | (Kötelező) A logófájl közvetlen URL-je. |
| `is_link` | `true` értéknél kattintható a logó (általában a nyitóoldalra visz), `false` értéknél állókép. |
| `link_target` | `_self` ugyanabban a lapban, `_blank` új lapban nyitja a hivatkozást. |
| `max_width` | A logó legnagyobb szélessége képpontban (például `"300"`). |
| `max_height` | A logó legnagyobb magassága képpontban (például `"200"`). |

## 7. Vásárlói fiók gombja: `[fluent_cart_customer_dashboard_button]`

Gombot vagy hivatkozást ad, amelyen át a bejelentkezett vevők elérik a profiljukat vagy rendeléseiket. A fejléc és a lábléc menüjébe való.

```text
[fluent_cart_customer_dashboard_button button_text="Profilom" display_type="link"]
```

| Attribútum | Mit csinál |
|---|---|
| `button_text` | A hivatkozás vagy gomb szövege (például „Fiókom”, „Profil”). |
| `display_type` | Megjelenés: `link` (egyszerű szöveges hivatkozás) vagy `button` (stílusos gomb). |
| `show_icon` | `true` értéknél kis felhasználóikon látszik a szöveg mellett, `false` értéknél nem. |
| `link_target` | `_self` ugyanabban a lapban, `_blank` új lapban. |

## 8. Terméknév: `[fluent_cart_product_title]`

Egy konkrét termék nevét írja ki az oldalon. Egyéni nyitóoldalakon hasznos, ahol a nevet a képtől vagy a leírástól külön szeretnéd elhelyezni.

```text
[fluent_cart_product_title product_id="123" is_link="true"]
```

| Attribútum | Mit csinál |
|---|---|
| `product_id` | (Kötelező) A termék azonosítója. |
| `is_link` | `true` értéknél kattintható a név, és a termékoldalra visz. |
| `link_target` | `_self` ugyanabban a lapban, `_blank` új lapban. |
| `is_default` | `true` értéknél az alapértelmezett stílus érvényes, `false` értéknél a környező szöveg stílusát örökli. |

## 9. Termékkép: `[fluent_cart_product_image]`

A terméknévhez hasonlóan egy konkrét termék kiemelt képét jeleníti meg. Egyéni elrendezéshez jó: az egyik oszlopba a kép, a másikba a részletek kerülhetnek.

```text
[fluent_cart_product_image product_id="123"]
```

| Attribútum | Mit csinál |
|---|---|
| `product_id` | (Kötelező) A termék azonosítója. |
| `is_default` | `false` értéknél CSS-sel saját méretet és stílust adhatsz, `true` értéknél az alapértelmezett kimenet látszik. |

## 10. Oldalba ágyazott pénztár: `[fluent_cart_checkout]`

A pénztár rövidkódja általában a vevő saját kosarát mutatja. Ha változatok listáját adod meg, oldalba ágyazott pénztárűrlap lesz belőle: a vevők az általad kiválasztott termékek közül választanak, és ugyanazon az oldalon fizetnek. Ehhez a FluentCart Pro kell. Az űrlap részletes leírása az [Értékesítési eszközök](https://hub.hellowp.io/hu/plugins/fluent-cart-pro/ertekesites/) fejezetben van.

```text
[fluent_cart_checkout variant_ids="185,186,187" selection_mode="single" selector_label="Válaszd ki a csomagodat"]
```

| Attribútum | Mit csinál |
|---|---|
| `variant_ids` | (Ehhez a módhoz kötelező) A felkínált változatok azonosítóinak vesszős listája, legfeljebb 20. |
| `selection_mode` | `single` rádiógombokat mutat (ez az alapérték), `multiple` jelölőnégyzeteket. |
| `max_items` | `multiple` módban a legtöbb, egyszerre kijelölhető lehetőség, 1 és 20 között. |
| `selector_label` | A lista feletti cím. |
| `field_label_style` | A pénztármezők feliratának módja, miután a vevő beírt valamit: `docked` (az alapérték), `floating` vagy `placeholder`. `variant_ids` nélkül is működik. |

## 11. Pénznemváltó: `[fluent_cart_currency_switcher]`

Gombot mutat, amellyel a vevők kiválaszthatják, melyik pénznemben látják az árakat. Csak akkor jelenik meg, ha a többvalutás értékesítés be van kapcsolva legalább két pénznemmel, különben semmit nem ír ki. A többvalutás értékesítéshez a FluentCart Pro kell.

```text
[fluent_cart_currency_switcher display="flag" list_display="name"]
```

A `list_` kezdetű attribútumok a gombra kattintva megnyíló listát, a többiek a gombot szabályozzák.

| Attribútum | Mit csinál |
|---|---|
| `display` | Mit mutat a gomb: `name_code`, `name`, `code`, `symbol` vagy `flag`. Ha kihagyod, a kód látszik a jellel (például USD $). |
| `symbol` | `yes` hozzáadja a pénznem jelét a gomb feliratához, `no` elveszi. |
| `flag` | `no` elrejti a zászlót a gombon. Alapból látszik. |
| `flag_position` | `left` (alapérték) vagy `right`: a zászló helye a gombon. |
| `list_display` | Mit mutat a lista egy sora: `name_code` (alapérték), `name`, `code`, `symbol` vagy `flag`. |
| `list_symbol` | `yes` a lista minden sorához hozzáadja a jelet. Alapból nincs jel a listában. |
| `list_flag` | `no` elrejti a zászlót a lista soraiban. |
| `list_flag_position` | `left` (alapérték) vagy `right`: a zászló helye a lista sorában. |

A váltó blokként és menüelemként is elérhető; az értékek részletes leírása és a kész kombinációk a [Többvalutás értékesítés](https://hub.hellowp.io/hu/plugins/fluent-cart-pro/tobbvaluta/) fejezetben vannak.