FluentCart-blokkok a blokkszerkesztőben

A FluentCart blokkjai a WordPress blokkszerkesztőjében, az elrendezés átalakítása és a blokkos sablonok szerkesztése.

A FluentCart saját blokkokat ad a WordPress blokkszerkesztőjéhez (Gutenberg). Ezekkel egyedi boltoldalt építhetsz, kiemelhetsz bizonyos termékeket, és bárhová elhelyezhetsz vásárlási funkciókat az oldalon. Ha olyan oldalépítőt használsz, amelyhez nincs külön blokkkészlet, a rövidkódok ugyanezt tudják.

A blokkok megkeresése

Nyiss meg egy oldalt vagy bejegyzést a szerkesztőben.
Kattints a plusz ikonra (+), és nyisd meg a blokkbeszúrót.
Görgess a FluentCart és a FluentCart Buttons kategóriához, vagy keress rá a blokk nevére.

A blokkok: Products, Product Title, Product Description, Product Search, Product Carousel, Customer Dashboard, Product Card, Product Image, Sale Badge, Sold Out Badge, Product Info, Price Range, Mini Cart, Buy Now Button, Add to Cart Button, Buy Section, Checkout, Product Categories List, Excerpt, Product Package Description, Cart, a hat értékelési blokk és a Currency Switcher.

Minden blokknak megvan a saját beállítása. A blokk kijelölése után a jobb oldali panelen állíthatod a kinézetet, az igazítást, a viselkedést és a láthatóságot. A legtöbb blokknál a Beállítások fül (fogaskerék) a tartalmat és a működést, a Stílus fül (félhold ikon) a színeket, a betűtípust, a távolságokat, a szegélyt és az árnyékot szabályozza. Az Additional CSS Class(es) mezőbe saját CSS-osztályt írhatsz, hogy a blokkot egyedi stílussal lásd el.

Termék kiválasztása

Sok blokk azt a terméket mutatja, amelynek az oldalán áll, vagy egy általad kijelölt terméket. A Query type beállításnál:

Default: a blokk annak a terméknek az adatait mutatja, amelyik oldalán vagy sablonjában áll. Egytermékes sablonba ezt válaszd.
Custom: a blokk mindig ugyanazt a terméket mutatja, amelyet a Select Product gombbal kiválasztasz. Nyitóoldalon vagy bármilyen, terméksablonon kívüli helyen ezt használd.

A blokkok beállításai

Products

A boltoldal fő építőeleme: a termékeket rácsban jeleníti meg.

Paginator: a lapozás módja, Scroll (folyamatos betöltés) vagy Numbers (számozott oldalak). Csúszkával megadhatod az oldalankénti termékszámot.
Product Grid Options: a View Mode értéke Grid. A Price Format például „Starts From” lehet több árú terméknél, a Product Per Row pedig azt adja meg, hány termék kerül egymás mellé.
Filter Option: az Enable Filter kapcsolóval a vásárlók rendezhetik a termékeket, a Default Filter a kezdő sorrendet állítja.

Product Title

A termék nevét jeleníti meg, önállóan, így külön elhelyezheted és formázhatod.

Make title a link: a név a termék oldalára vezet.
Open in new tab: a hivatkozás új lapon nyílik, így a vásárló nem veszíti el az éppen nézett oldalt.
Az igazítást, a betűméretet és a színt az eszköztárban vagy az oldalsávban állítod.

Product Description

A termék teljes leírását mutatja, a termék beállításaiból, ezért mindig friss.

Select Product: a termék kiválasztása, amelynek leírását ki akarod tenni.
A Stílus fülön a szöveg, a háttér és a hivatkozások színe, a betűméret (a kicsitől az extra nagyig), a sormagasság, a belső és külső margó, valamint a szegély és az árnyék állítható.

Product Search

A vásárlók kereshetnek a termékek között, a találatokat azonnal látják. A blokkot a FluentCart szekcióban a nagyító ikon jelöli.

Searchbar Behavior: a találatok New Tab (új lap) vagy Current Tab (jelenlegi lap) nyílnak meg.
Category Filtering: a keresést kategóriára lehet szűkíteni.
Link With Shop App: összeköti a keresőt a boltalkalmazás beállításaival.
Advanced Settings: a szokásos elrendezési és kinézeti beállítások.

Product Carousel

A kiemelt termékeket csúszó sorban mutatja. Nyitóoldalra és kampányoldalra jó, mert kevés helyen sok terméket kínálhatsz.

Select Product: itt választod ki a termékeket, a Selected products listában kezelheted őket.
Slides per view: hány termék látszik egyszerre (például 4).
Behavior: Autoplay (automatikus csúszás), Infinite loop (végtelen forgás), Show arrows (nyilak) és Show Pagination (lapozó, stílusa például Fraction vagy Dots).

Customer Dashboard

A vásárlói fiók blokkja. Bármelyik oldalra kiteheted, és a vásárlók innen kezelhetik a rendeléseiket, az előfizetéseiket, a licenceiket, a letöltéseiket, a profiljukat és a címeiket. A szerkesztőben oldalsávos menüvel látszik.

Működéséhez a vásárlói fiók oldalát be kell állítani a Beállítások → Oldalak beállítása részben. A felületen ezek a részek jelennek meg: a vásárlási előzmények, az előfizetések (aktív és lemondott csomagok, a következő megújítás dátuma), a licencek (a kulcsok és a használó oldalak száma), a letöltések, valamint a profil és a címek.

Product Card

Egyetlen terméket emel ki egy különálló kártyán: a kiemelt kép, az ár és egy kosárba gomb látszik rajta. Például „A nap ajánlata” oldalhoz jó.

Product: a legördülő listában kiválasztod a terméket.
Query type: a kiválasztás módja. Egy kártyánál a Default a jó.
Price Format: például „Starts From”, ha a változatok ára eltér.
Card Sizing: az Custom Width csúszkával szélesebbre vagy keskenyebbre állíthatod a kártyát (például 216 képpont).

Product Image

A termék kiemelt képét jeleníti meg. Egyedi nyitóoldalakhoz és kiemelt termékrészekhez való.

Query type: Custom esetén konkrét terméket választasz.
Select Product: a termék keresése és kiválasztása.
Product Title: a kiválasztott termék neve, hogy ellenőrizhesd, jót választottál.

Sale Badge

Akciós terméknél címkét vagy kedvezményszázalékot mutat a termék képén.

Badge Text: saját szöveg („Sale!”, „Hot Deal”, „Clearance”), ha nem százalékot jelenítesz meg.
Show Discount Percentage: a blokk kiszámolja a kedvezményt (például -20%).
Percentage Format: a százalék megjelenése a {percent} helyőrzővel.
Price Source: melyik árból állapítja meg, hogy van-e akció, például Default Variant.
Badge Style és Position: a címke stílusa és helye a képen, például Top Left.
A Stílus fülön: szöveg- és háttérszín, betűméret, sormagasság, belső és külső margó, szegély és árnyék.

Sold Out Badge

A készlethiányos termékeken jelez, a valós készletszint alapján.

Badge Text: az üzenet, például „Sold Out” vagy „Out of Stock”.
Position & Style: a címke helye a képen (például Top Left) és stílusa.

Product Info

A termék legfontosabb adatait (cím, leírás, ár) tömören mutatja. Egyedi elrendezésekhez és nyitóoldalakhoz való.

Query type: Default esetén annak a terméknek az adatait veszi, amelyik oldalán áll, Custom esetén te választod ki a terméket.
Select Product: egyedi lekérdezésnél itt jelölöd ki a terméket.

Price Range

A termék árát automatikus pénznemformázással mutatja. Változós terméknél a teljes árskálát jeleníti meg (például 5,00 és 8,00 között).

Query type: Default vagy Custom, mint fent.

Mini Cart

Kompakt kosár: a vásárló az oldal elhagyása nélkül látja a tételek számát és az összeget.

Cart Icon: három beépített ikon közül választhatsz, vagy megadhatsz saját SVG-ikon URL-t (Custom Icon URL).
Display total price: az összeg megjelenítése az ikon mellett.
Show Cart Item Count: mikor jelenjen meg a darabszám-jelvény: Always, Only if cart has items vagy Never.
A Stílus fülön az ikon, az ár és a darabszám színe, a betűméret, a sormagasság, a belső és külső margó állítható.

Buy Now Button

Gyorsvásárló gomb nyitóoldalakhoz: a kosár kihagyásával a pénztárra viszi a vásárlót, vagy az oldalon belül nyit fizetési ablakot.

Enable Instant Modal Checkout: a pénztár felugró ablakban nyílik meg, nem új oldalon.
Product Selection: egy konkrét termék vagy változat (például „Teal Green”), amelyet a gomb a rendeléshez ad.
A Stílus fülön a szöveg- és háttérszín, a betűméret, a sormagasság, a belső és külső margó állítható.

Add to Cart Button

Önálló gomb, amely egy termék vagy változat kosárba tételére szolgál az oldal elhagyása nélkül. Nyitóoldalon, ahol több tételt vásárolhat a vevő, jól használható.

Select Product: a termék vagy változat kiválasztása.
A Stílus fülön a szín, a betűtípus, a margó, a szegély és az árnyék állítható.

Buy Section

A termékoldal vásárlási központja: egyben mutatja az árat, a mennyiségválasztót (plusz és mínusz gombokkal), a Buy Now és az Add To Cart gombot.

Query type: Default (az aktuális termék) vagy Custom (általad választott termék).

Checkout Page

A pénztárűrlap blokkja, ahol a vevő megadja az adatait, és átnézi a rendelést.

Ügyféladatok: név és e-mail-cím, valamint a Create an Account? kapcsoló.
Címek: számlázási és szállítási cím utcával, emelettel, telefonszámmal.
Rendelési összesítő: változatok, részösszegek, szállítási költség és adóbecslés.
Kupon és feltételek: a Have a Coupon? rész és az általános szerződési feltételek elfogadásának jelölőnégyzete.
Products (FluentCart Pro): a Checkout Source átállításával a vevők az általad kiválasztott termékek közül választhatnak az oldalon. A teljes beállítás az Értékesítési eszközök fejezetben van.
Field Labels: a mezőnevek megjelenése, miután a vásárló beírt valamit. Az új cím felugró ablakára és a Company, Legal Registration ID és EU VAT mezőkre is vonatkozik, ahol a lehorgonyzott név az Apply gomb mellett áll.
- Docked (name on the right): a név a mező jobb szélén belül áll, hosszú érték alatta fut. Gépelés közben vagy nyitott legördülőnél a név elköltözik. Ez az alapérték.
- Floating (name above the value): a név az írt érték fölött lebeg.
- Placeholder only: a név csak helyőrző szövegként látszik az üres mezőben.

A kategóriák rendezett jegyzéke, a böngészés megkönnyítésére.

Display Style: List (lista) vagy Dropdown (helytakarékos legördülő).
Show product count: a kategórianév mellett a termékek száma (például „Menswear (10)”).
Show hierarchy: az alkategóriák a szülő alatt, behúzva jelennek meg.
Show empty categories: az üres kategóriák mutatása vagy elrejtése.
A Stílus fülön a szöveg és a hivatkozások színe, a betűméret és a sormagasság állítható.

Excerpt

A termékleírás rövid kivonatát mutatja. Egyedi bolt- és nyitóoldalakhoz való, ahol nem kell a teljes leírás.

Product: a termék, amelynek kivonatát kiteszed.
A Stílus fülön a szöveg- és háttérszín, a betűméret, a sormagasság és a külső margó állítható.

Product Package Description

A termék fizikai adatait (csomag neve, méretek, a termék súlya és a teljes szállítási súly) táblázatban mutatja a termékoldalon. Az adatokat a termék árazási beállításainál hozzárendelt csomagból olvassa, így semmit nem kell kétszer karbantartanod. Ott jó, ahol a méret és a súly számít a vásárlásnál: bútornál, könyvnél, háztartási gépnél, élelmiszernél.

Show Package Name: a csomag nevének sora (például „Gift box”).
Show Dimensions: a hosszúság × szélesség × magasság sor. Elrejtőzik, ha a csomagnak nincs megadott mérete.
Show Product Weight: a termék saját súlya, a csomag nélkül.
Show Shipping Weight (Total): a termék és a csomag együttes súlya. Ugyanez az érték számít a szállítási díj számításánál, így az oldalon látható szám megegyezik a pénztárban használttal.

Ha a terméknek több változata van, és mindegyik más csomagban megy, a táblázat azonnal újraépül, amint a vevő másik változatot választ, oldalbetöltés nélkül.

A blokk benne van a FluentCart alapértelmezett egytermékes sablonjában, így bármelyik blokkos téma automatikusan átveszi. Ha egy áruházban nem akarod mutatni a csomaginformációt, a Megjelenés → Szerkesztő felületen kiveheted a sablonból. A táblázat a témától örökölt CSS-változókat használja (szegély, szöveg, háttér), ezért világos és sötét módban is jól néz ki. Saját módosításhoz adj meg további CSS-osztályt, és a [data-fluent-cart-package-description] elemre célozz.

A csomaginformáció a vásárló útján máshol is megjelenik: a pénztár rendelési összesítőjében a tételek alatt látszik a csomag neve és a szállítási súly, a visszaigazoló e-mailekben pedig az alapértelmezett és a testreszabott sablon is mutathatja.

Cart

A kosároldalt a blokkszerkesztőben építheted fel, a [fluent_cart_cart] rövidkód nélkül. Tedd a blokkot arra az oldalra, amelyet az Oldalak beállításban kosárnak jelöltél ki, és a vevő ugyanazt a kosarat kapja, mint a rövidkóddal.

A blokk tároló: három gyerekblokkot hoz magával, amelyeket külön mozgathatsz:

Cart Items: a kosár tételei mennyiségvezérlővel és soronkénti összeggel.
Cart Total: a kosár végösszege.
Cart Checkout Button: a pénztárra vivő gomb.

Mivel közönséges blokkok, átrendezheted vagy törölheted őket, és saját blokkot is közéjük tehetsz, például szállítási tudnivalót a végösszeg fölé vagy bizalmi jelvényt a gomb alá. A gyerekblokkok közül kettő szövegét átírhatod: kattints a szövegre a vásznon, vagy nyisd meg az oldalsáv Text paneljét.

Értékelési blokkok

Hat blokk szolgál a termékértékelések megjelenítésére, és ugyanabban a FluentCart kategóriában találod őket. Csak akkor jelennek meg, ha a Beállítások → Termékértékelések oldalon be van kapcsolva a Termékértékelések bekapcsolása. A részletes beállításuk az Értékelési elemek oldalépítőkhöz és az Értékelések megjelenítése fejezetben van.

Product Reviews: az egyben látható értékelési szakasz; az összegzést, a lista és a Write a Review gombot tartalmazza, tizenegy kész elrendezéssel. A Classic ingyenes, a többihez FluentCart Pro kell.
Rating Summary with Review: az összegző kártya önmagában: az 5-ös skálás átlag, csillagszintenként egy sáv és alatta a Write a Review gomb.
Review List: a vásárlói vélemények önmagukban, szűréssel, rendezéssel és lapozással. A View Mode értéke List, Grid, Masonry vagy Slider; a List ingyenes, a többihez Pro kell. A véleménykártya minden része külön blokk, amelyet átrendezhetsz, törölhetsz vagy átstílusozhatsz.
Product Rating: kompakt csillagértékelés a vélemények számával zárójelben. Termékcím mellé vagy kártyába jó. Elrejtheted, amíg a termék el nem ér egy Minimum Reviews számot vagy Minimum Average Rating átlagot.
Write a Review: egyetlen gomb, amely oldalsó panelben vagy felugró ablakban nyitja az értékelőűrlapot. A három feliratát a Button Text panelen átírhatod.
Review Form: az értékelőűrlap közvetlenül az oldalon, gomb nélkül. Külön oldalra jó, ha az űrlapot mindig láttatni akarod.

Currency Switcher

Gomb, amellyel a vásárló kiválaszthatja, melyik pénznemben lássa az árakat. Mutatja a jelenlegi pénznem zászlaját, kódját és jelét, kattintásra pedig megnyitja a pénznemek listáját. Csak akkor jelenik meg, ha a többvalutás értékesítés be van kapcsolva legalább két pénznemmel, ami FluentCart Prót igényel. A szerkesztő előnézete olyan, mint az éles oldalon.

A Switcher Settings panel a gombot, a Dropdown List panel a megnyíló listát szabályozza. Mindkettőnél van Display, Show sign, Show flag és Flag position beállítás. A részleteket, a menüelemes és a rövidkódos változatot a Többvalutás értékesítés fejezet tartalmazza.

Az elrendezés átalakítása: a Products blokk belseje

A Products blokk nem merev rács, hanem rugalmas tároló, amelyben kisebb blokkok vannak. Így a termékek elrendezését kód nélkül megváltoztathatod.

Példa: az ár a termékkép fölé kerül.

Add hozzá a Products blokkot az oldalhoz.
Jelöld ki, majd a szerkesztő felső eszköztárán kattints a Lista nézet ikonra.
A lista nézetben bontsd ki a Products blokkot. Látni fogod a belsejében lévő blokkokat: Product Image, Product Title, Product Price.
Húzd a Product Price blokkot a Product Image fölé.

A változás a rács minden termékére érvényes. A belső blokkokat átrendezheted, törölheted vagy átstílusozhatod. Bármikor visszatérhetsz módosítani, a szerkesztő megengedi a kísérletezést. Ha kész vagy, kattints a jobb felső Mentés gombra.

Az alapsablonok szerkesztése (blokkos témánál)

Ha blokkos témát használsz, a FluentCart alapsablonjait közvetlenül szerkesztheted, így az egytermékes és a kategóriaoldalak alapelrendezését is te határozod meg.

A vezérlőpulton nyisd meg a Megjelenés → Szerkesztő oldalt.
A webhelyszerkesztőben válaszd a Sablonok (itt Mintasablonok) pontot.
Szűrj a FluentCart szerzőre, vagy keresd meg a FluentCart sablonjait.

A webhelyszerkesztő Mintasablonok oldala FluentCart-szűrővel: Termékek kategória szerint és Termékoldal sablon

A képen a két FluentCart-sablont látod: ezek a Termékoldal és a Termékek kategória szerint.

Termékoldal (Single Product): az egyes termékoldalak kinézetét szabályozza. Egy helyen átállíthatod minden termék címének, képének, leírásának és árának elrendezését.
Termékek kategória szerint (Products by Category): a kategóriaoldalakat, vagyis az egy kategória termékeit listázó oldalakat szabályozza.

Módosítás után kattints a Mentés gombra: a sablon azonnal él az oldalon.

Bricks és más oldalépítők

A FluentCart blokkjai a Bricks oldalépítővel is teljesen együttműködnek: a FluentCart-sablonokat a Bricks szerkesztőjében ugyanúgy használhatod, mint a szokásos WordPress-szerkesztőben. Azokhoz az építőkhöz, amelyek nem támogatják közvetlenül a blokkokat, rövidkódok állnak rendelkezésre termékrács és gombok beillesztésére: lásd a Rövidkódok fejezetet. A Bricks saját elemeiről a FluentCart-elemek a Brickshez fejezet szól.

Készült: 2026. november 2.