FluentCart-elemek a Brickshez

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 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 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 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 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.