# Oldalsó kosár

> A kosároldalt felváltó, jobbról becsúszó kosár: beállítások, ajánlott termékek, jutalomsáv, megnyitás saját gombbal.

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.

![Az Oldalsó kosár oldal a főkapcsolóval](./kepek/funkciok-oldalso-kosar.webp)

*Az Oldalsó kosár oldal a főkapcsolóval* (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.

```php
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:

```css
/* 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:

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