# Kosár gomb

> A natív e-kereskedelem kosár gombja: blokk blokkos témákhoz, shortcode és PHP-függvény klasszikus témákhoz, stílusozás.

A Tutor LMS natív e-kereskedelmi motorjához külön **Kosár gomb** tartozik. Gyors utat ad a tanulóknak a kosarukhoz, hogy fizetés előtt átnézhessék a kiválasztott kurzusokat.

A gomb csak akkor jelenik meg, ha a **Tutor LMS Pro → Beállítások → Bevételszerzés** oldalon az **Select eCommerce Engine** beállításnál a natív motor van kiválasztva, és a kosár- és a pénztároldal is be van állítva. Más motor (például WooCommerce) esetén a gomb nem ad kimenetet.

![A kosár gomb egy oldalon, táska ikonnal és számlálóval](./kepek/ertekesites-kosar-gomb.webp)

*A kosár gomb egy oldalon, táska ikonnal és számlálóval* (https://minta-bolt.hu/kosar-gomb-teszt/)

A képen a gomb egy oldalra beillesztve látszik, táska ikonnal és a kosárban lévő tételek számával.

## Blokkos témák (teljes webhelyszerkesztő)

Blokkos téma esetén a gombot a WordPress webhelyszerkesztőjében teheted be a fejlécbe.

1. Nyisd meg a **Megjelenés → Szerkesztő** oldalt.
2. A szerkesztő menüjében kattints a **Patterns** (minták) pontra.
3. Válaszd ki a fejléc mintát, és kattints a ceruza ikonra a szerkesztéséhez.
4. Kattints a bal felső **+** (blokkbeszúró) ikonra.
5. Keresd meg a **Cart Button** blokkot (vagy görgess a Tutor LMS blokkcsoporthoz), és kattints rá a beszúráshoz.
6. Húzd a blokkot, vagy a blokk eszköztárának nyilaival told arra a helyre, ahol a gombnak lennie kell.
7. Kattints jobb felül a **Save** gombra.

### A blokk beállításai

| Beállítás | Mit csinál |
|---|---|
| **Cart Icon** | Az ikon: kosár (Cart), táska (Bag) vagy kosárka (Basket). |
| **Icon Size** | Az ikon mérete. |
| **Cart Item Count** | Mikor jelenjen meg a tételek száma: mindig, még üres kosárnál is (Always), csak ha van benne tétel (Only if has items), vagy soha (Never). |
| **Custom CSS Class** | Egyéni CSS-osztály a blokk burkolóelemén. |

## Klasszikus témák

Klasszikus témában a gombot shortcode-dal vagy PHP-függvénnyel jelenítheted meg. A shortcode tartalmi területekre, szöveges widgetekbe és kompatibilis oldalszerkesztőkbe való, a PHP-függvény a téma sablonjába vagy egyéni fejlécébe.

### Shortcode

Az alapértelmezett gomb:

```text
[tutor_cart_button]
```

Támogatott attribútumok:

| Attribútum | Alapérték | Mit csinál |
|---|---|---|
| `class` | `tutor-cart-button` | Egyéni CSS-osztály a gombhoz. |
| `title` | `View your shopping cart` | A hivatkozás `title` attribútuma. |
| `show_count` | `if_has_items` | Mikor látszik a tételszám. Értékei: `always`, `if_has_items`, `never`. |
| `cart_icon` | `cart` | A gomb ikonja. Értékei: `cart`, `bag`, `basket`. |

Példa:

```text
[tutor_cart_button class="header-cart" cart_icon="bag" show_count="always"]
```

Ez a `header-cart` osztályt adja a gombnak, táska ikont használ, és mindig mutatja a tételek számát.

### PHP-függvény

Fejlesztők a gombot közvetlenül a téma sablonjából is kirajzolhatják:

```php
<?php
tutor_ecommerce_cart_button();
?>
```

Egyéni témában a `function_exists()` ellenőrzés megelőzi a hibát arra az esetre, ha a Tutor LMS ki van kapcsolva:

```php
<?php
if ( function_exists( 'tutor_ecommerce_cart_button' ) ) {
	tutor_ecommerce_cart_button();
}
?>
```

A függvény tömbben kapja a paramétereket:

| Paraméter | Alapérték | Mit csinál |
|---|---|---|
| `class` | `tutor-cart-button` | Egyéni CSS-osztály. |
| `title` | `View your shopping cart` | A kosár-hivatkozás `title` attribútuma. |
| `show_count` | `if_has_items` | A tételszám láthatósága. |
| `cart_icon` | `cart` | A kosár ikonja. |
| `icon_svg` | üres | Egyéni SVG-kód az ikonhoz. |

Példa a kosárka ikonnal és mindig látható számlálóval:

```php
<?php
tutor_ecommerce_cart_button(
	array(
		'cart_icon'  => 'basket',
		'show_count' => 'always',
	)
);
?>
```

### Segédfüggvények

Teljesen egyéni kosárfelülethez a kosár adatait külön is lekérheted.

A kosárban lévő tételek száma:

```php
$count = tutor_ecommerce_get_cart_count();
```

Egy ikon SVG-kódja (támogatott nevek: `cart`, `bag`, `basket`):

```php
$svg = tutor_ecommerce_get_cart_icon_svg( 'bag' );
```

### Szűrők

Webhelyszintű testreszabásra két WordPress-szűrő szolgál.

A gomb alapértelmezett argumentumainak módosítása a `tutor_ecommerce_cart_button_args` szűrővel:

```php
add_filter( 'tutor_ecommerce_cart_button_args', function( $args ) {
	$args['cart_icon'] = 'bag';
	$args['class']     = 'my-header-cart';

	return $args;
} );
```

Az ikon SVG-jének módosítása vagy cseréje a `tutor_ecommerce_cart_icon_svg` szűrővel:

```php
add_filter( 'tutor_ecommerce_cart_icon_svg', function( $svg, $icon ) {
	if ( 'custom' === $icon ) {
		return '<svg ...>...</svg>';
	}

	return $svg;
}, 10, 2 );
```

## Stílusozás

A gomb megjelenése CSS-változókkal állítható anélkül, hogy a gomb kódját cserélnéd:

```css
.tutor-cart-button {
	--tutor-cart-icon-size: 24px;
	--tutor-cart-icon-color: #2c3e50;
	--tutor-cart-badge-bg: #0c111d;
	--tutor-cart-badge-color: #ffffff;
}
```

A változók az ikon méretét és színét, a számláló hátterének és szövegének színét szabályozzák. A fenti értékek csak példák.