Bővítések és példák

Ez a fejezet a JetWooBuilder kiegészítő lehetőségeit és gyakori megoldásait gyűjti össze. Több közülük további bővítményt igényel (JetPopup, JetSmartFilters, JetEngine), vagy külön letölthető kiegészítő bővítmény.

Termék gyorsnézete JetPopuppal

A gyorsnézet a termék adatait felugró ablakban mutatja, így a vásárlónak nem kell másik oldalra lépnie. A JetPopup bővítményre van szükség.

A gyorsnézet felépítése három részből áll: egy üres popupból, egy Egyedi (termékoldali) sablonból, amely a popup tartalmát adja, és egy gombból, amely megnyitja.

1. Nyisd meg a JetPopup menüt, és hozz létre új popupot. Adj neki nevet, tedd közzé, és nyisd meg az Elementorban. A popup maradjon üres, csak a beállításai között kapcsold be az Ajax betöltés és a Betöltés kényszerítése beállítást (angol felirata: Loading content with Ajax, Force Loading). Frissítsd a popupot.
2. A Crocoblock → Woo Page Builder oldalon hozz létre Egyedi típusú sablont, és tedd bele azt, amit a gyorsnézetben látni szeretnél: Termékoldali képek, Termékoldali cím, metaadatok (cikkszám, kategóriák), ár, leírás, kosárba gomb stb. Tedd közzé.
3. Hozz létre egy Archívumtétel típusú sablont, és húzz be egy gomb widgetet. A Haladó fül JetPopup szakaszában kapcsold be a JetWooBuilder gyorsnézet kapcsolót, a Csatolt popup listában válaszd ki az üres popupot, az eseményt állítsd a widgetre kattintásra, a Sablon listában pedig válaszd ki az Egyedi sablont. Tedd közzé.
4. Hozz létre Bolt sablont, tegyél bele Terméklista (ciklus) widgetet, és rendeld hozzá a WooCommerce → Beállítások → JetWooBuilder fülön. Az Egyéni termékarchívum jelölőnégyzetet is kapcsold be, és válaszd ki az archívumsablont.
5. A WooCommerce → Beállítások → JetWooBuilder fül Általános részében a Widgetek megjelenítési módja legyen Elementor alapértelmezése.

Termékrácsban a gyorsnézet egyszerűbb: a Termékrács widgetben kapcsold be a Gyorsnézet megjelenítése kapcsolót (ez a JetPopup aktív állapotában látszik). A Gyorsnézet szakaszban megadható a gomb ikonja (Gomb ikonja), felirata (Gomb feliratának szövege), az ikon használata (Ikon használata?) és az ikon pozíciója (Ikon pozíciója: bal, felül, jobb, alul). A Haladó fül JetPopup szakaszában válaszd ki az üres popupot, állítsd az eseményt egyéni választóra, és írd be az egyéni választót: .jet-quickview-button. Kapcsold be a JetWooBuilder gyorsnézet beállítást, és válaszd ki a gyorsnézethez használt Egyedi sablont.

Vásárlás utáni felugró értesítés

A JetPopuppal a kosárba tétel után felugró üzenetet jeleníthetsz meg, például „A termék a kosárba került” vagy „Köszönjük a vásárlást”. Az értesítés a Termékrács, a Terméklista és az Archívum kosárba helyezés widgethez kapcsolható.

1. A JetPopup menüben hozz létre új popupot (a tartalom típusa például Elementor), és tegyél bele tartalmat, például egy címsort a kívánt szöveggel. A popup beállításaiban kapcsold be az Ajax betöltés és a Betöltés kényszerítése beállítást, majd frissítsd a popupot.
2. A Megjelenítési feltételek mellett kattints a szerkesztésre, adj hozzá feltételt (például Bevonás, Egész webhely), és mentsd.
3. Nyisd meg az Elementorban azt az oldalt vagy sablont, ahol a termékeket kiírod, és húzd be a widgetet (például a Termékrács widgetet).
4. A Haladó fül JetPopup szakaszában kapcsold be a JetWooBuilder Purchase Popup beállítást, és válaszd ki a popupot a Purchase Popup listából.
5. Frissítsd az oldalt, majd a weboldalon tegyél egy terméket a kosárba: megjelenik az értesítés.

További betöltés (Load More) kiegészítő

A Products Grid Load More kiegészítő a termékrács egy részét elrejti, és gombra kattintásra vagy görgetésre tölti be a következő adagot. A kiegészítő külön bővítményként tölthető le (a Crocoblock eszköztárából), és a szokásos módon telepíthető: Bővítmények → Új hozzáadása → Bővítmény feltöltése, majd aktiválás. A JetWooBuilder legyen naprakész.

1. Nyisd meg az oldalt az Elementorban, és jelöld ki a Termékrács widgetet.
2. Az Általános részben a Termékek száma mezőben add meg, hány termék jelenjen meg egyszerre (ennyi tölt be minden görgetésnél vagy kattintásnál).
3. Nyisd meg a Load More szakaszt, és kapcsold be a kapcsolót. Két újabb beállítás jelenik meg: a Load more Type és a Load More Trigger ID.
4. A Load more Type két értéke: By Button Click (gombra kattintáskor) és By Page Scrolling (az oldal görgetésekor). Görgetésnél nincs más teendő.
5. Gombra kattintás esetén a termékrács alá tegyél egy elemet (kép, szöveg, gomb, animáció stb.), és a Haladó fülön adj neki CSS ID-t. Az Elementor gomb widgetjénél a Gomb azonosítója mezőt töltsd ki.
6. Másold be ezt az azonosítót a termékrács Load More Trigger ID mezőjébe.
7. Frissítsd az oldalt, és próbáld ki a weboldalon.

Egyéni mennyiségválasztó (Custom Quantity Selectors) kiegészítő

A kiegészítő plusz és mínusz gombokat ad a mennyiségmezőhöz. Külön bővítményként tölthető le, és a szokásos módon feltölthető (Bővítmények → Új hozzáadása → Bővítmény feltöltése), majd aktiválható. A JetWooBuilder legyen naprakész.

A kiegészítő a Termékrács, a Terméklista, a Termékoldali kosárba helyezés és az Archívum kosárba helyezés widgetben működik, a kosár sablonjában pedig a Kosártáblázat widgetben.

1. Nyisd meg a boltoldalt az Elementorban, és jelöld ki a Termékrács vagy a Terméklista widgetet.
2. Kapcsold be a Kosárba gomb és a Mennyiségmező kapcsolót. A mennyiségmező megjelenik a kosárba gomb mellett.
3. A Tartalom fülön új Quantity Selector szakasz jelenik meg: kapcsold be az Enable Quantity Selector beállítást.
4. Állítsd be a gombok pozícióját, szélességét és a növelő, csökkentő ikont. A Stílus fülön az ikon mérete, a rámutatási hatás, a szín és háttér, a szegély, az árnyék és a margók állíthatók.

A termékoldali és archív kosárba gomb widgetjén ugyanezek a beállítások találhatók.

A kiválasztható darabszám korlátozása

A felső határ megadásához tegyél PHP-kódot a gyermektémád functions.php fájljába, vagy használj kódrészlet-kezelő bővítményt (például Code Snippets). Példa, amely minden terméknél legfeljebb 10 darabot enged:

add_filter( 'woocommerce_quantity_input_args', 'set_max_quantity_for_all_products', 10, 2 );
function set_max_quantity_for_all_products( $args, $product ) {
  $args['max_value'] = 10; // a legnagyobb mennyiség
  return $args;
}

A kód példa, igényeid szerint módosíthatod. A weboldalon a vásárló ezután legfeljebb a megadott darabszámot teheti a kosárba.

Lapozás a termékarchívumon

A Termékek lapozása widget a termékeket oldalakra bontja a Termékrács, Terméklista vagy Terméklista (ciklus) widget kimenetén.

1. A Crocoblock → JetPlugins Settings → JetWooBuilder → Widgetek oldalon, az Üzletoldali termékwidgetek szakaszban kapcsold be a Termékek lapozása kapcsolót. A termékeket kiíró widgetnek (Termékrács, Terméklista vagy a ciklus) is bekapcsolva kell lennie.
2. Hozz létre Bolt típusú sablont, és húzd be a Termékrács widgetet. Válassz előbeállítást, és kapcsold be az Aktuális lekérdezés használata kapcsolót, hogy a kategóriák, címkék és osztályozások termékei látsszanak. A Termékek száma mezőben add meg az oldalankénti termékek számát (például 4).
3. Húzd be a Termékek lapozása widgetet.
4. Az Előző és következő oldalak hivatkozásainak engedélyezése kapcsoló alapból be van kapcsolva: megadhatod az Előző címke, Előző ikon, Következő címke és Következő ikon beállítást.
5. A Stílus fülön a lapozás, a navigáció és a navigációs ikonok tipográfiája, színe, háttere, kitöltése, szegélye és igazítása állítható, a Haladó fülön az Elrendezés.
6. Nézd meg a weboldalon a lapozás működését.

Termékek száma oldalanként: választó a látogatónak

A JetSmartFilters bővítménnyel megoldható, hogy a látogató válassza ki, hány termék látszódjon egy oldalon a Termékrácsban. Ez minden WordPress-tartalomtípuson működik.

1. A Smart Filters → Add New oldalon hozz létre szűrőt. Adj neki nevet (például „Termékek oldalanként”), válaszd típusnak a Select vagy Radio értéket.
2. Adatforrásnak válaszd a Manual Input (kézi megadás) értéket, és az Options List (opciólista) alatt az Add New gombbal vegyél fel értékeket, például 4, 8 és 12 (a címke és az érték legyen azonos).
3. A Query Variable mezőnél kattints a dinamikus címke gombjára, válaszd a Plain Query Variable elemet, és a Variable Name mezőbe írd: posts_per_page.
4. A Filter Labels szakaszban megadhatod a szűrő és az aktív szűrő feliratát. Frissítsd a szűrőt.
5. Nyisd meg az oldalt vagy sablont a Termékrácssal, és húzd be a szűrő megfelelő widgetjét (a Select vagy Radio szűrő widgetet). Válaszd ki a szűrőt, és a This filter for listában a JetWooBuilder Products Grid értéket.
6. A weboldalon alapból az első opció értéke szerinti darabszám látszik, a választóval a látogató átválthat a többire.

Szűrők a termékrácshoz

A JetSmartFilters szűrői a Termékrácshoz is kapcsolhatók (ár szerinti szűrés, szűrés kategóriák szerint, lapozás). A szűrők a Termékrács widgethez a szűrő widgetjében, a This filter for listában választható JetWooBuilder Products Grid értékkel kapcsolódnak.

Ingyenes szállítás sávja a kosárban

A kosár sablonjában folyamatjelző sáv mutatja, mennyi hiányzik az ingyenes szállításhoz. A megoldáshoz a JetEngine, a JetElements, a JetWooBuilder és a WooCommerce kell.

1. JetEngine lekérdezés: a JetEngine → Query Builder oldalon adj hozzá új lekérdezést SQL/AI Query típussal. A From table listában válaszd a postmeta értéket. Az első Where feltétel: oszlop meta_key, összehasonlítás egyenlő, érték _price. A második: oszlop post_id, összehasonlítás „In the list”, érték a WC Products in Cart makró. Ezek összegyűjtik a kosárban lévő termékek árait. Mentsd a lekérdezést.
2. Folyamatjelző sáv: a kosár sablonjába húzd be a JetElements Progress Bar widgetjét. A Current Value mezőhöz válaszd a JetEngine Dynamic Function dinamikus címkéjét: Function értéke SQL query results, Query Column értéke meta_value, Additional Function értéke Sum. A Max Value mezőbe írd be az ingyenes szállítás határát.
3. Üzenet az elérés után: egy címsor widgettel (például „Gratulálunk, ingyenes a szállítás!”) a Haladó fül Dynamic Visibility szakaszában állítsd be, hogy az üzenet csak akkor látsszon, ha a fenti dinamikus függvény értéke nagyobb vagy egyenlő a határral. A folyamatjelzőt ugyanígy elrejtheted a határ elérése után.
4. Ingyenes szállítás a WooCommerce-ben: a WooCommerce → Beállítások → Szállítás oldalon adj hozzá szállítási módot: válaszd az ingyenes szállítást, a feltétele legyen minimális rendelési összeg, és az összeg egyezzen a sáv határával.
5. A weboldalon tegyél termékeket a kosárba: az összeg növelésével a sáv telik, a határ elérésekor megjelenik a gratuláló üzenet, és az ingyenes szállítás is felkínálódik.

Változatok árai és az árintervallum

Változó terméknél minden változatnak külön ára lehet. Ehhez a WooCommerce és az Elementor mellett a JetWooBuilder Termékoldali ár és Termékoldali kosárba helyezés widgetje kell, valamint egy közzétett Egyedi (termékoldali) sablon.

1. Nyisd meg a Termékek listát, és szerkeszd a változó terméket.
2. A termékadatok között nyisd meg a Változatok részt, és a kívánt változat mellett kattints a szerkesztésre.
3. Töltsd ki a változat rendes árát. Akciós árat és az akció kezdő- és záródátumát is megadhatod (az Ütemezés hivatkozás mutatja a dátummezőket).
4. Görgess le, és mentsd a változtatásokat.
5. A termékoldali sablonban a Termékoldali ár widget a legkisebb és a legnagyobb változatár közötti intervallumot írja ki.
6. A Termékoldali kosárba helyezés widget kiválasztómezőket ad a változat kiválasztásához. A weboldalon a kiválasztás után a widget a választott változat árát mutatja.

Termékattribútumok megjelenítése

A változatok kiválasztása a termék attribútumain alapul. Az attribútumokat a Termékek → Attribútumok oldalon hozhatod létre és kezelheted, és itt rendelheted hozzájuk az értékeket is. Azt, hogy az attribútumok hol jelennek meg a vásárlónak, a sablon határozza meg.

• Termékoldal: a Termékoldali kosárba helyezés widget legördülő listákat ad az attribútumokhoz, így a vásárló kiválaszthatja a kívánt változatot. Tedd be a widgetet az Egyedi sablonba, tedd közzé, és a weboldalon nézd meg.
• Archívum: az Archívum kosárba helyezés widget változó terméknél a Válassz lehetőséget jellegű gombot adja, amely a termék oldalára visz, ahol a változat kiválasztható. Tedd be a widgetet az Archívumtétel sablonba.
• Bolt: a Termékrács vagy a Terméklista widget a termékeket kiírja, és a változó termék gombja a termékoldalra viszi a látogatót.

Ha a változatokat táblázatban szeretnéd felsorolni, azt a JetProductTables bővítmény tudja, vagy a JetEngine Listázó rács widgetje, amellyel a változatok mind kiírhatók.

Változatminták (variation swatches) a termékrácsban és a listában

A változatminták (színes, képes választók) a WooCommerce változó termékeihez a Variation Swatches for WooCommerce bővítménnyel adhatók, de a Termékrács és a Terméklista widgetben ehhez sablonmódosítás kell. Ehhez gyermektéma szükséges.

1. A gyermektéma mappájában hozz létre egy jet-woo-builder mappát.
2. Másold ide a JetWooBuilder templates/widgets mappáját. Termékrácshoz a global mappa kell, azon belül a products-grid mappában csak az item-button és a loop-item fájlokat hagyd meg (Terméklistához a products-list mappa kell). A többi mappát töröld.
3. A Variation Swatches beállításai között az Archive / Shop fülön másold ki a Product wrapper mező értékét (például wvs-archive-product-wrapper), és add hozzá a loop-item fájl $classes sorához.
4. Az item-button fájl $class blokkjába írd be: woo_variation_swatches()->show_archive_page_swatches();
5. A gyermektéma functions.php fájljába tedd be a wvs_pro_get_current_url() függvényt pótló kódrészletet (a Variation Swatches 2-es verziójától ez a függvény már nincs benne), majd a bővítményhez tartozó többi kódot.
6. Nézd meg a weboldalon a termékrácsot.