Kosár gomb

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.

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:

[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:

[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
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
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
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:

$count = tutor_ecommerce_get_cart_count();

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

$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:

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:

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:

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