# FluentCart-elemek a Brickshez

> Az áruház építése a Bricks szerkesztőben: a Products elem, a vásárlói szűrők, az egytermékes sablon és a FluentCart Bricks Blocks kiegészítő elemei.

A FluentCart együttműködik a Bricks sablonnal és oldalépítővel. Az elemek a Bricks szerkesztőbe kerülnek, így egyéni boltoldalt vagy egyedi termékoldal-elrendezést húzással építhetsz fel.

## Első lépések

Az együttműködés automatikus: ha a FluentCart és a Bricks sablon is telepítve és aktív, a FluentCart elemei ott vannak a Bricks szerkesztőben. Néhány elem (például a **Products**, a **Product Title**, a **Product Gallery** és a **Buy Section**) a FluentCart részeként a kiegészítő nélkül is megjelenik.

A teljes választékhoz a **FluentCart Bricks Blocks** kiegészítő tizenöt további elemet ad: a kosarat, a pénztárat, a termékkeresést, a kategóriákat és a vásárlói fiókot. Telepítését az alábbi fejezetrész írja le.

### A főbb boltoldal felépítése

1. Nyiss meg egy oldalt a Bricks szerkesztővel.
2. Kattints a plusz ikonra (+) új elem hozzáadásához.
3. Az elemek panelén görgess a **FluentCart** kategóriához, és kattints a **Products** elemre.

Az oldalra azonnal bekerül a termékek működő rácsa.

#### A Products elem testreszabása

Az elem hozzáadása után a jobb oldali panelen az elem nevére kattintva a bal oldali panelen szabályozhatod, mit és hogyan mutasson.

- **Display:** **Grid** vagy **List** nézet, a nyilvános oldali nézetváltó be- vagy kikapcsolása, és a **Pagination Type** (**Numbers** vagy **Scroll**). Itt állítod az **Columns** számát, a termékek közti **Gap** értéket és a **Products** számát oldalanként.
- **Query:** azt határozza meg, mely termékek jelenjenek meg. Szűrhetsz **Product Type** és **Product Categories** szerint, nevük szerint **Include** vagy **Exclude** módon, korlátozhatod az akciós termékekre az **On sale Products** kapcsolóval, és eldöntheted, hogy az **Allow Out Of Stock** termékek látszanak-e. Így „Újdonságok” vagy „Sikerlista” oldalakat építhetsz.
- **Filter:** vásárlói szűrő oldalsáv, amellyel a vevők maguk szűkítik a kínálatot. A kapcsolók leírását lásd lent.
- **Fields:** a termékkártya részeinek sorrendje. Húzással átrendezheted a terméképet, a címet, az árat és a gombot.
- **Style:** az elrendezés, a betűtípusok, a keretek és más stílusbeállítások a márkádhoz igazíthatók.

### Rács és lista nézet

A **Products** elem két elrendezést ismer, és a vevők a nyilvános oldalon válthatnak köztük:

- **Grid** (alapérték): többoszlopos kártyaelrendezés, a boltoldalra való, ahol a termékkép a fő figyelemfelkeltő.
- **List**: egyoszlopos soros elrendezés, olyan katalógushoz jó, ahol a címnek, a leírásnak és az árnak több helyre van szüksége.

Két beállítás szabályozza:

- **View Mode:** az oldal betöltésekor érvényes alapelrendezés (**Grid** vagy **List**).
- **Show View Switcher:** alapból be van kapcsolva. Bekapcsolva a vevők a nyilvános oldalon váltógombokat látnak, amelyekkel az oldal újratöltése nélkül válthatnak Grid és List között. Kapcsold ki, ha egyetlen elrendezéshez akarod kötni.

### Lapozás típusa

- **Numbers** (alapérték): klasszikus, számozott lapozás a lista alján; kereséshez és kiszámítható navigációhoz a legjobb.
- **Scroll**: a termékek a görgetéssel automatikusan töltődnek be; hosszú, böngészős kínálathoz való.

### Vásárlói szűrők

A **Filter** csoport szűrő oldalsávot ad a nyilvános oldalra, hogy a vevők külön nyitóoldalak készítése nélkül szűkíthessék a kínálatot kategória, márka vagy árfok szerint.

- **Enable Filter:** a főkapcsoló. Amíg nincs bekapcsolva, a többi szűrőbeállítás rejtve marad.
- **Enable Sort By:** alapból be van kapcsolva. Rendezési legördülőt ad ár, név vagy dátum szerint.
- **Live Filter:** bekapcsolva az eredmények azonnal frissülnek, ha a vevő módosít egy szűrőt, **Apply** gomb nélkül.
- **Wildcard Filter:** bekapcsolva a szabad szöveges keresés részleges szavakra is talál (a `shoe` például a `shoes` és a `shoebox` szóra is).
- **Product Categories:** kategóriaszűrő szakaszt ad az oldalsávhoz. A **Display Name** mezővel átnevezheted a szakaszt (például „Kategóriák” az alapértelmezett „Product Categories” helyett).
- **Product Brands:** márkaszűrő szakasz, a **Display Name** ugyanúgy működik.
- **Price Range:** árcsúszka. A **Display Name** mezővel tetszőleges feliratot adhatsz (például „Szűrés ár szerint”).

A szűrők a **Live Filter** bekapcsolásakor az oldal újratöltése nélkül működnek, és együttműködnek a rendezési legördülővel.

## Egytermékes sablon építése

A Bricks a termékoldalakat egyetlen, újrahasznosítható sablonból tudja megjeleníteni. A FluentCart külön **FluentCart - Product** sablontípust regisztrál a Bricksben: az elrendezést egyszer tervezed meg, és minden termékoldal automatikusan azt követi.

### A sablon létrehozása

1. A WordPress vezérlőpultján nyisd meg a **Bricks → Templates** oldalt, és adj hozzá új sablont.
2. Add meg a sablon nevét, és a **Template Type** értéke legyen **FluentCart - Product**. A típuslistában a **Single post/page** után találod.
3. Tedd közzé a sablont, majd nyisd meg a Bricks szerkesztővel.
4. Építsd fel az elrendezést a **FluentCart** kategória egytermékes elemeiből, például a **Product Title**, a **Product Gallery**, a **Price Range**, a **Product Stock** és a **Buy Section** elemből.
5. Mentsd a sablont. Mostantól az egytermékes oldalakon jelenik meg, és minden elem a megtekintett termékből veszi a tartalmát.

### Hol érvényes a sablon

Ha egyetlen egytermékes sablonod van, az az alapértelmezett, és minden termékoldalra vonatkozik. Több sablon is működik:

- **Sablonfeltételek:** a Bricks szokásos **Conditions** beállításával megadhatod, hol érvényes a sablon, például bizonyos termékekre.
- **Alapértelmezett tartalék:** ha egyetlen feltétel sem egyezik a megtekintett termékkel, a FluentCart az alapértelmezett terméksablont használja, így egy termékoldal sem marad elrendezés nélkül.

A terméksablonok csak az egytermékes oldalakat érintik. A bolt és az archívum elrendezése továbbra is a **Products** elemből jön.

## A FluentCart Bricks Blocks kiegészítő

A kiegészítő a FluentCart elemeinek teljes palettáját a Bricks szerkesztőbe hozza. Termékcímtől és galériától a kosárig és a pénztárig minden részhez külön blokkot kapsz. A Bricks megszokott vezérlőivel stílust adsz nekik, és pontosan úgy építheted meg az áruházad oldalait, ahogyan elképzeled.

### Mi kell hozzá

1. A Bricks sablon telepítve és aktív legyen a webhelyen. A blokkok a Bricks szerkesztőben jelennek meg, enélkül nincs hol megjelenniük.
2. A FluentCart Pro licenced legyen ellenőrizve. Ennek menetét a [Licencelés](https://hub.hellowp.io/hu/plugins/fluent-cart-pro/licenceles/) fejezet írja le.

### A kiegészítő telepítése

A blokkok külön kiegészítőként érkeznek, ezért egyszer telepítened kell a FluentCart beállításaiból, mielőtt megjelennek a Bricksben.

1. Nyisd meg a **FluentCart Pro → Beállítások → Funkciók és kiegészítők** oldalt.
2. Görgess a **Bővítmény-kiegészítők** részhez.
3. Keresd meg a **FluentCart Bricks Blocks** kártyát.
4. Kattints a kártyán a **Telepítés és aktiválás** gombra.

A FluentCart letölti, telepíti és aktiválja a kiegészítőt; feltöltés vagy oldal-újratöltés nem kell. Ha a gomb szürke, vagy licencfelszólítás látszik helyette, a FluentCart Pro licenced vagy nincs ellenőrizve, vagy lejárt: a **Beállítások → Licencbeállítások** oldalon ellenőrizd, és a telepítő újra elérhető lesz. A telepítőről a [Funkciók és kiegészítők](https://hub.hellowp.io/hu/plugins/fluent-cart-pro/beallitasok-funkciok/) fejezetben olvashatsz.

### A blokkok megkeresése a Bricksben

1. Nyiss meg egy oldalt vagy sablont a Bricks szerkesztővel.
2. Kattints a plusz ikonra (+) az elemek panelének megnyitásához.
3. Görgess a **FluentCart** kategóriához.
4. Kattints egy blokkra a vászonra tételéhez, majd a bal oldali Bricks-vezérlőkkel stílust adhatsz neki.

Minden FluentCart-blokk sarkában a FluentCart jelvény látszik, így első pillantásra megkülönbözteted a Bricks beépített elemeitől.

### Melyik termék látszik

A legtöbb blokk megengedi, hogy kiválaszd, melyik terméket mutassa. Vagy hagyod, hogy a blokk azt a terméket vegye, amelyik oldalán áll (terméksablonban ezt akarod), vagy egy konkrét terméket jelölsz ki a **Query Type** és a **Manual Product ID** vezérlővel, ami egy adott terméket kiemelő nyitóoldalnak jó. A **Product Info**, a **Product Card**, a **Product SKU**, a **Product Package Description**, a **Related Products** és az értékelési elemek **Manual Product ID** mezője Bricks dinamikus adatot is elfogad, például `{post_id}` vagy egyéni mező.

### Termékrészletek

Ezek a blokkok a termék egy-egy részét jelenítik meg, így az egyéni egytermékes sablon építőkockái:

- **Product Title:** a termék neve.
- **Product Info:** több termékadat egy blokkban. A **Show Gallery**, **Show Title**, **Show Stock**, **Show Excerpt**, **Show Price** és **Show Buy Section** kapcsolóval kapcsolod az egyes részeket, a **Thumbnail Position** pedig a galéria bélyegképeinek helyét adja.
- **Product Card:** teljes termékösszegzés egyéni rácsokhoz és kiemelt szakaszokhoz. A **Card Elements** szabályozza a megjelenő részeket, a **Price Format** és a **Card Sizing** a megjelenést.
- **Product Excerpt:** a termék rövid leírása.
- **Product Content:** a termék teljes leírása.
- **Product Gallery:** a termék képei.
- **Product SKU:** a cikkszám, opcionális felirattal. A **Show Label** bekapcsolásával és a **Custom Label** megadásával a cikkszám elé írhatsz például „Cikkszám” szöveget. Ha egy termék cikkszáma üres, nem jelenik meg semmi, így termékenként elrejtheted.
- **Product Package Description:** a fizikai termékek szállítási csomagadatai. A **Show Package Name**, a **Show Dimensions**, a **Show Product Weight** és a **Show Shipping Weight** adja, mi szerepeljen.
- **Product Stock:** készletjelző, például „In Stock” vagy „Out of Stock”.
- **Price Range:** az ár, vagy a változatos terméknél az alsó és felső ár közti sáv.

### Értékesítés és pénztár

Ezek a blokkok viszik a pénzt:

- **Add to Cart:** kosárba gomb. A **Product Variation** vagy a **Manual Variant ID** egy változatra irányítja, a **Button Text** a felirata.
- **Buy Now:** a vevőt a kosarat kihagyva a pénztárhoz viszi. Az **Enable Modal Checkout** bekapcsolásával a vevő az oldalon marad, és a pénztár felugró ablakban nyílik.
- **Buy Section:** a teljes vásárlási terület, az árat és a vásárlási vezérlőket egyesítve.
- **Mini Cart:** kompakt kosárösszegzés, fejlécbe való. Választhatsz **Cart Icon** ikont, vagy megadhatod a saját ikonod URL-jét, a **Display total price** és a **Show cart item count** pedig a részletesség szintjét szabályozza.
- **Checkout:** a teljes pénztárűrlap. A **Layout**, a **Form Column Width**, a **Summary Column Width** és a **Column Gap** az elrendezést adja, a **Form Elements** a megjelenő mezőket, a **Ship to Different Address** pedig a külön szállítási cím lehetőségét.

A **Field Labels** azt szabályozza, hogyan mutatják a mezők a nevüket, miután a vevő beírt valamit: **Docked** (a név jobbra), **Floating** (a név az érték felett) vagy **Placeholder only**, mint a Gutenberg pénztárblokkban.

A FluentCart Próval a **Checkout Source** értékét **Custom Product** állapotra állítva a vevők az általad kiválasztott termékek közül választhatnak közvetlenül a pénztáron. Add hozzá őket a **Products** alatt (vagy írd be a vesszővel elválasztott azonosítókat a **Manual Variation IDs** mezőbe), majd a **Selection Mode** értéke legyen **Select one** vagy **Select many**.

**Select many** esetén a **Maximum Selectable Items** korlátozza az egyszerre kijelölhetők számát, a **Selector Heading** a lista feletti címet adja. Ha a FluentCart Prót kikapcsolod, a Custom Product pénztár semmit nem mutat az élő oldalon, amíg újra be nem kapcsolod; a beállításaid megmaradnak.

### Böngészés és keresés

Ezek a blokkok segítenek a vevőknek eligazodni a kínálatban:

- **Products:** termékrács, a legegyszerűbb mód boltoldal építésére. Ennek van a legtöbb vezérlője; lásd lent.
- **Product Carousel:** termékek csúszó körhintában. A **Slides to Show**, a **Space Between**, az **Autoplay** és az **Autoplay Speed** mellett az **Infinite Loop**, a **Show Arrows** és a **Show Pagination** is állítható.
- **Product Categories:** a termékkategóriák listája. A **Display Style** a kinézetet adja, a **Show Product Count**, a **Show Hierarchy** és a **Show Empty Categories** a lista tartalmát.
- **Related Products:** a megtekintett termékhez kapcsolódó termékek. A **Related By** **Categories** vagy **Brands** szerint egyeztet, és beállíthatod a **Heading Text**, az **Order By**, a **Columns** és a **Products Per Page** értékét.
- **Product Search:** a termékekre szűkített keresőmező, opcionális **Show Category Filter** kapcsolóval. Az **Open In** adja meg, hová kerülnek a találatok.

### Áruház és fiók

- **Store Logo:** az áruház logója **Max Width** és **Max Height** vezérlővel. A **Link to Home** bekapcsolásával a logó kattinthatóvá válik.
- **Customer Dashboard:** a teljes vásárlói fiók.
- **Customer Dashboard Button:** hivatkozás a vásárlói fiókba, fejlécbe vagy menübe. A **Display Type** és a **Button Text** adható meg, opcionálisan a **Show Icon** vagy az **Open in New Tab**.
- **Currency Switcher:** gomb, amellyel a vevők pénznemet válthatnak. A FluentCart Pro és a bekapcsolt többvalutás értékesítés kell hozzá. A **Switcher Settings** és a **Dropdown List** leírását a [Többvalutás értékesítés](https://hub.hellowp.io/hu/plugins/fluent-cart-pro/tobbvaluta/) fejezetben találod.

### Termékértékelések

A kiegészítő hat elemet ad az értékelések megjelenítéséhez és gyűjtéséhez: **Product Reviews**, **Review List**, **Rating Summary**, **Review Form**, **Write a Review** és **Product Rating**. Mindegyiket az [Értékelési elemek](https://hub.hellowp.io/hu/plugins/fluent-cart-pro/testreszabas-ertekeles-elemek/) fejezet írja le.

### A Products blokk vezérlői

A **Products** blokkot fogod a leggyakrabban használni, ezért érdemes tudni, mire képes. A vezérlői három csoportra oszlanak a Bricks panelen.

#### Lekérdezés vezérlői

Ezek határozzák meg, mely termékek jelenjenek meg, és hogyan rendeződik a rács:

- **View Mode & Switcher:** rács- vagy listaelrendezés, és opcionálisan a látogatók válthatnak köztük.
- **Pagination & Columns:** a hosszú listákon való navigáció és a rácstávolság.
- **Is main query:** a blokkot az oldal fő WordPress-lekérdezéséhez köti, ami bolt- vagy archívumsablonnál elengedhetetlen.
- **Filtering Options:** szűrés terméktípus, kategória, akciós állapot szerint, vagy termékek kézi felvétele és kizárása.

#### Szűrő vezérlői

Az **Enable Filter** bekapcsolásával a termékrács mellett nyilvános szűrőpanelt adsz a vevőknek.

- **Live Filter:** az eredmények azonnal frissülnek, ha a vevő módosít egy szűrőt, oldal-újratöltés nélkül.
- **Wildcard Filter:** kiszélesíti a szövegegyezést, így a részleges kifejezések is pontos találatot adnak.
- **Taxonomy toggles:** kiválasztod, mely taxonómiák (például kategóriák vagy márkák) szerint szűrhetnek a vevők.
- **Price Range & Sort By:** rendezési vezérlőket és árcsúszkát ad a panelhez.

#### Alapértelmezett szűrő (Default Filter)

Míg a **Filter** csoport azt a panelt építi, amelyet a látogatók használnak, a **Default Filter** már azelőtt szűkíti a rácsot, hogy bárki hozzányúlna. Jó válogatott szakaszokhoz, például „Újdonságok a kabátokból”, termékek kézi kiválasztása nélkül.

- **Enable Default Filter:** bekapcsolásával megjelennek a szűrő beállításai.
- **Allow Out Of Stock:** a kifogyott termékek az eredményekben maradnak, ahelyett hogy elrejtenéd őket.
- **Search:** előre megadott keresőszó. A rács már e szóra szűrve tölt be, és ez az élő szűrő frissítései után is megmarad.
- **Taxonomy selects:** konkrét kifejezések (például egyetlen alkategória), amelyekre a blokk korlátozódik.

A **Default Filter** figyelmen kívül marad, ha az **Is main query** be van kapcsolva, mert a bolt sablonját a WordPress már leszűkíti.

#### Akciós jelvény (Sale Badge)

A **Show Sale Badge** bekapcsolásával megjelölheted a rácson a leárazott termékeket. A FluentCart kiszámolja a kedvezményt, és elrejti a jelvényt azokon, amelyek éppen nincsenek akcióban.

- **Badge Text:** a jelvény szövege, alapértéke Sale!
- **Show discount percentage instead:** a rögzített szöveg helyett az élő kedvezmény látszik.
- **Percentage Text:** a százalék sablonja, a számot a `{percent}` helyőrző adja. Az alapérték `-{percent}%`, így a negyed ár kedvezmény `-25%`.
- **Price Source:** melyik árhoz képest számolja a kedvezményt. A **Default Variant** azt a változatot használja, amelyet a vevők először látnak, a **Best Discount (All Variants)** a termék legnagyobb megtakarítását hirdeti.
- **Badge Shape:** **Badge** vagy **Ribbon**.
- **Position:** a termékkép melyik sarkába kerül a jelvény.

A **Style** fül hozzá tartozó **Sale Badge** csoportja a betűtípust, a háttérszínt és a szövegszínt adja.

#### Elfogyott jelvény (Sold Out Badge)

A **Show Sold Out Badge** megjelöli az elfogyott termékeket, hogy a vevők még a megnyitás előtt tudják.

- **Badge Text:** az alapérték Out of Stock.
- **Badge Shape:** **Badge** vagy **Ribbon**.
- **Position:** a termékkép melyik sarkába kerül.

A stílus ugyanígy a **Style** fül **Sold Out Badge** csoportjából állítható.

Mindkét jelvény a termékképhez rögzített fedés, és egy leárazott termék ki is fogyhat. Adj nekik különböző sarkot, hogy sose kerüljenek ugyanarra a helyre.

#### Mezők

- **Fields:** a termékkártyát felépítő egyesítőcímkék listája, például `{fct_product_image:link}`, `{fct_product_title:linked}`, `{fct_product_excerpt}`, `{fct_product_price}` és `{fct_product_button}`. Átrendezheted, törölheted, vagy az **Add Field** gombbal újat adhatsz hozzá.
- **Link entire product:** az egész termékkártyát kattinthatóvá teszi. Csak akkor érvényesül, ha egyetlen termékmeződ sem tartalmaz már hivatkozást.