Oldalsó kosár

Az Oldalsó kosár a kosároldal helyett egy jobbról becsúszó panelt nyit, amint a vásárló terméket tesz a kosárba. A vásárló az éppen nézett oldalon marad: átnézi a kosarat, beváltja a kupont, hozzáad egy ajánlott terméket, és innen megy a pénztárra. A panelben ajánlott termékeket, ingyenes szállítási célt és ajándékot is megjeleníthetsz.

Az oldalsó kosár fizetős csomaghoz kötött. A beállításai a CheckoutWC → Oldalsó kosár oldalon vannak.

https://minta-bolt.hu/wp-admin/admin.php?page=cfw-settings-side-cart

A képen a főkapcsoló látszik. A többi beállítás csak a bekapcsolás után jelenik meg.

Bekapcsolás

1. Telepítsd és aktiváld a CheckoutWC-t, majd add meg a licenckulcsot.
2. Nyisd meg a CheckoutWC → Oldalsó kosár oldalt.
3. Kapcsold be az Oldalsó kosár engedélyezése kapcsolót, és kattints a Módosítások mentése gombra.
4. Tegyél egy terméket a kosárba a webhelyen, és ellenőrizd, hogy a panel megnyílik.

Az oldalsó kosár átveszi a kosárba tétel utáni viselkedést, ezért a vásárló nem a kosároldalra kerül.

A beállítások szakaszai

A beállítások szakaszokba vannak csoportosítva.

Kosár ikon

A beépített ikon az oldalsó kosárban és a lebegő kosár gombon is megjelenik.

• Icon: a kosárikonok közül választasz.
• Custom Icon: saját ikon feltöltése, amely felülírja a kiválasztottat. Csak SVG lehet.
• Width: az ikon szélessége pixelben. Alapérték: 34.
• Icon Color: az ikon színe. Alapérték: #222.

Ajánlott termékek

A panel alján megjelenő keresztértékesítési (cross-sell) termékek.

• Enable Suggested Products: bekapcsolva az ajánlott termékek a panel alján látszanak.
• Heading: a lista címe. Üresen hagyva az alapértelmezett szöveg áll.
• Enable Random Cross Sells Fallback: ha a kosárban egyik terméknek sincs beállított kereszt-ajánlata, véletlenszerű termékeket mutat.
• Link to Product Page: a vásárlót a termék oldalára viszi ahelyett, hogy közvetlenül kosárba tenné. Kapcsold be, ha az ajánlott termékeid változó termékek, mert azoknál előbb változatot kell választani.

Lebegő kosár gomb

• Enable Floating Cart Button: állandó kosárikon a jobb alsó sarokban minden oldalon.
• Right Position: távolság a jobb széltől pixelben. Alapérték: 20.
• Bottom Position: távolság az alsó széltől pixelben. Alapérték: 20.
• Hide Button If Empty Cart: üres kosárnál elrejti a gombot.

Üres kosár

• Empty cart image: az üres kosár üzenete fölött megjelenő kép. Üresen hagyva csak szöveg látszik.

Egyéb beállítások

Beállítás	Mit csinál
Disable Cart Auto Open	A panel nem nyílik meg magától kosárba tételkor, helyette a lebegő kosár gomb finoman megrázkódik.
Enable AJAX Add to Cart	A terméklistákon és az egyes termékoldalakon oldalújratöltés nélkül kerül a termék a kosárba. A WooCommerce alapból teljes űrlapküldéssel dolgozik.
Enable Express Payment Buttons	A panel alján megjeleníti azoknak az átjáróknak a gyors fizetési gombjait, amelyek támogatják a WooCommerce mini-kosarát.
Enable Order Bumps	Megjeleníti a kosártételek alatti megjelenítésre állított rendelésnövelő ajánlatokat.
Allow Variation Changes	Szerkesztési hivatkozást ad a tételek alá, így a vásárló kosárban is válthat változatot.
Enable Sale Prices	Az akciós ár mellett áthúzva megmutatja az eredeti árat.
Enable Coupons	A vásárló a panelben is beválthat kupont.
Hide Coupon Code Field Behind Link	A kuponmező egy „Van kuponkódod?” jellegű hivatkozás mögé kerül. Csak akkor érhető el, ha a kuponok engedélyezettek.
Show Shipping and Totals	A részösszeg mellett a szállítást és a végösszeget is mutatja.
Enable Continue Shopping Button	„Vásárlás folytatása” gombot ad a panel aljára. Alapból ki van kapcsolva.

Ingyenes szállítási és jutalomsáv

A panel tetején lévő folyamatjelző megmutatja, mennyi hiányzik a következő jutalomig. A sáv akár három szintet is tud: minden szintnek saját küszöbe, jutalma, színe és üzenete van. Így építhetsz „költs még 5000 Ft-ot az ingyenes szállításhoz, 15 000 Ft-ot az ajándékhoz” típusú létrát.

A sávot a szakasz bekapcsoló kapcsolójával (Enable free shipping & rewards bar) kapcsolod be, majd felveszed a szinteket.

Mit állít egy szint?

Beállítás	Mit csinál
Threshold	A kosár részösszege, amelynél a szint feloldódik. 0-nál nagyobbnak kell lennie; küszöb nélküli szint sosem oldódik fel, és nem látszik a sávon.
Reward	A jutalom: ingyenes szállítás, ingyenes ajándék vagy csak egyedi üzenet.
Color	A szint szakaszának színe a sávon.
Short label	A szint neve a sávon. Alapértelmezett: ingyenes szállítás, ajándék, jutalom.
Gift product	Melyik terméket kapja ajándékba a vásárló. Csak ajándék szintnél.
Unlocked message	A küszöb elérése után megjelenő üzenet.
Locked message	Amíg a vásárló nem érte el a küszöböt. A %s helyére a hiányzó összeg kerül.

Ajándék, amely magától kerül a kosárba és ki

Ha a kosár eléri egy ajándék szint küszöbét, az ajándéktermék ingyen a kosárba kerül. Ha a vásárló később töröl tételeket, és a kosár a küszöb alá esik, az ajándék magától kikerül.

• Az ajándék tételnél nincs eltávolítás hivatkozás, mert a következő kosárfrissítésnél úgyis visszakerülne.
• Ha az ajándéktermék elfogy, magától kikerül a kosárból. Az utólag szállítható (backorder) termék bent marad.
• Ajándéknak csak egyszerű termék választható. A változó termékek nem szerepelnek a választóban, mert nem derül ki, melyik változatot kell hozzáadni.

Az ingyenes szállítási szint nem hoz létre ingyenes szállítást

Ha például 75 000 Ft-os ingyenes szállítási szintet állítasz be, ettől a szállítás még nem lesz ingyenes: a sáv csak a haladást mutatja. Ugyanehhez kell egy megfelelő Ingyenes szállítás módszer a WooCommerce → Beállítások → Szállítás alatt. A CheckoutWC ellenőrzi ezt: ha a szint küszöbe nem egyezik egy valódi ingyenes szállítási módszerrel, figyelmeztetést ír a beállítások mellé. Külön figyelmeztetést kapsz akkor is, ha az ingyenes szállítási módszerhez kupon kell, mert ilyenkor a küszöb elérése önmagában nem teszi ingyenessé a szállítást.

Termékek kizárása a sávból

A Exclude shipping classes beállítással kiválaszthatod azokat a szállítási osztályokat, amelyek tételei nem számítanak bele a küszöbökbe. Hasznos például túlméretes vagy fuvaros termékeknél. Táblázatos vagy egyedi szállításnál a cfw_side_cart_qualifying_subtotal szűrővel finomíthatod, mekkora összeg számítson.

A sáv a pénztáron is

A Show on the checkout page beállítással ugyanaz a jutalomsáv a pénztár kosár-összefoglalójában is megjelenik.

Megjelenés

Minden szintnek saját színe van. A Progress Bar Background Color a sáv üres részének háttere, globálisan. Alapérték: #f5f5f5.

Az oldalsó kosár megnyitása saját linkkel vagy gombbal

Bármelyik hivatkozás, gomb vagy HTML-elem megnyithatja a panelt, ha megkapja ezt az osztályt:

cfw-side-cart-open-trigger

Menüpontnál: Megjelenés → Menük alatt add hozzá az osztályt a menüponthoz. Ha a CSS-osztályok mező nem látszik, a jobb felső Képernyő beállításai gombbal kapcsold be.

Ha nem tudsz osztályt adni az elemhez, a cfw_additional_side_cart_trigger_selectors szűrővel adhatsz meg további CSS-kijelölőket. A szűrő egy CSS-kijelölő szöveget (vagy vesszővel elválasztott listát) vár, alapértéke false. Ha üres szöveget vagy null-t ad vissza, a kattintáskezelő nem kapcsolódik be, és hibaüzenet sincs.

Téma saját kosárikonja

A téma kosárikonja általában a saját kosárpaneljét is megnyitja, ezért két lépés kell:

1. Add meg az ikon kijelölőjét. Keresd meg a böngészőben: jobb gomb az ikonon, Vizsgálat, majd olvasd le az elem vagy a legközelebbi hivatkozás osztályát vagy azonosítóját.

add_filter( 'cfw_additional_side_cart_trigger_selectors', function() {
    return '.your-theme-cart-icon, #your-theme-cart-link';
} );

2. Rejtsd el a téma saját kosárpaneljét, különben egyszerre kettő nyílik meg:

/* Cseréld a saját téma panelének kijelölőjére */
.your-theme-cart-drawer {
    display: none !important;
}

Kosár ikon shortcode-dal

A [checkoutwc_cart] shortcode egy kosárikont ír ki a darabszám-jelvénnyel, bárhová.

Paraméter	Jelentés	Példa
color	Az ikon színe.	#222222
width	Az ikon szélessége.	30px
text_color	A darabszám-jelvény színe.	#333333

[checkoutwc_cart color="#222222" width="30px" text_color="#222222"]

A menüpontokban a shortcode alapból nem fut. Ehhez használhatod a Shortcode in Menus nevű bővítményt.

Megnyitás URL-lel és JavaScripttel

Bármelyik webcím végére illesztve a #cfw-cart rész megnyitja a panelt az oldal betöltésekor:

https://pelda.hu/#cfw-cart
https://pelda.hu/bolt/?parameter=ertek#cfw-cart

JavaScripttel a body elemen kell kiváltani ezt az eseményt:

jQuery( document.body ).trigger( 'cfw_open_side_cart' );

Fejlesztői referencia

• cfw_additional_side_cart_trigger_selectors: további CSS-kijelölők, amelyek megnyitják a panelt.
• cfw_side_cart_qualifying_subtotal: a jutalomsáv küszöbeihez számított részösszeg módosítása.
• cfw_open_side_cart: JavaScript-esemény a panel megnyitásához.

Gyakori kérdések

Lecseréli az oldalsó kosár a WooCommerce kosároldalt? Igen. Bekapcsolva átveszi a kosárba tétel utáni interakciót, a vásárló a panelben nézi át a kosarat.

Hány jutalomszintet vehetek fel? Legfeljebb hármat.

Létrehozza a sáv magától az ingyenes szállítást? Nem, csak a már beállított ingyenes szállítás felé mutatja a haladást. A megfelelő minimális összegű WooCommerce Ingyenes szállítás módszert neked kell beállítanod.

Milyen termék lehet ajándék? Csak egyszerű termék.

Eltávolíthatja a vásárló az ajándékot? Nem, a törlés hivatkozás el van rejtve. Ha a kosár a küszöb alá esik, az ajándék magától kikerül.

Megjeleníthetem a jutalomsávot a pénztáron? Igen, a Show on the checkout page beállítással.

Kizárhatok termékeket a célból? Igen, szállítási osztály szerint, vagy bonyolultabb szabályhoz a cfw_side_cart_qualifying_subtotal szűrővel.

Működik AJAX-os kosárba tétellel? Igen, az Enable AJAX Add to Cart beállítással oldalújratöltés nélkül kerülnek a termékek a kosárba a terméklistákon és a termékoldalon.