Kosár-összefoglaló és pénztár: kisebb módosítások

Ez a fejezet a pénztár és a kosár-összefoglaló gyakori, kisebb módosításait gyűjti össze. Ahol kód kell, a PHP-kódokat a CheckoutWC → Haladó → Szkriptek oldal Globális szakaszának PHP kódrészletek mezőjébe írd (nyitó <?php címke nélkül), vagy tedd a gyermektéma functions.php fájljába, esetleg egy kódrészlet-kezelő bővítménybe. A CSS az Egyedi CSS mezőbe kerül (CheckoutWC → Megjelenés → Dizájn).

Akciós árak a kosárban

Alapból az oldalsó kosár és a pénztár kosár-összefoglalója csak a termék árát mutatja, a kedvezményt nem. Az akciós ár (a régi ár áthúzásával) két helyen kapcsolható be:

1. Oldalsó kosár: CheckoutWC → Oldalsó kosár, Enable Sale Prices jelölőnégyzet.
2. Pénztár kosár-összefoglalója: CheckoutWC → Oldalak → Globális opciók fül, Kosár összefoglaló szakasz, Akciós árak engedélyezése.

Mindkét esetben mentsd a beállítást a Módosítások mentése gombbal. A beállítások leírása: Oldalak és Oldalsó kosár.

A szállítási mód lépés elrejtése

Ha csak egy szállítási lehetőséged van, vagy nem kell külön szállítási lépés, kapcsold be a Szállítási lépés letiltása beállítást a CheckoutWC → Oldalak → Pénztár fül Lépések szakaszában. A beállítás a mobilos nézetre is érvényes.

A kosárlinkek elrejtése

Ha a pénztár oldalt használod kosárként is, érdemes elrejteni a kosár oldalra mutató hivatkozásokat. Az Egyedi CSS mezőbe írd:

#cfw-breadcrumb .cart {
  display: none;
}

#cfw #cfw-customer-info-action .previous-button {
  visibility: hidden;
}

Az első szabály a lépésjelzőből (breadcrumb) tünteti el a Kosár elemet, a második az információs lépés alján lévő visszalépő hivatkozást rejti el.

A „Vissza a kosárhoz” hivatkozás szövege és címe

Az információs lépésen a visszalépő hivatkozás szövege és célja két szűrővel írható át:

add_filter( 'cfw_return_to_cart_link_url', function () {
  return 'https://pelda.hu/bolt';
} );

add_filter( 'cfw_return_to_cart_link_text', function () {
  return 'Vissza a boltba';
} );

Cseréld le a példában szereplő címet és szöveget a sajátodra. A pénztár többi gombjának szövegét a Gombok és feliratok átírása fejezet írja le.

A választott szállítási mód kiírása az összegző sorban

Alapból a kosár-összefoglaló szállítási sora csak a „Szállítás” feliratot és az összeget mutatja. Ha a kiválasztott szállítási mód nevét is látni akarod mellette (például „Szállítás (Futárszolgálat)”), tedd a PHP kódrészletek mezőbe:

add_filter( 'cfw_cart_totals_shipping_label', function ( $label ) {
  $chosen_shipping_methods_labels = array();

  $packages = WC()->shipping->get_packages();

  foreach ( $packages as $i => $package ) {
    $chosen_method = WC()->session->get( 'chosen_shipping_methods' )[ $i ] ?? false;

    if ( $chosen_method ) {
      $available_methods = $package['rates'];

      $chosen_shipping_methods_labels[] = $available_methods[ $chosen_method ]->get_label();
    }
  }

  $chosen_shipping_methods_labels = apply_filters( 'cfw_payment_method_address_review_shipping_method', $chosen_shipping_methods_labels );

  if ( empty( $chosen_shipping_methods_labels ) ) {
    return $label;
  }

  $label = $label . ' (' . join( ', ', $chosen_shipping_methods_labels ) . ')';

  return $label;
} );

Ha még nincs kiválasztott szállítási mód, a felirat változatlan marad.

A kosárképek mérete

A kosár tételeinek bélyegképe egy külön képméretet használ, a neve cfw_cart_thumb. Alapból 60 képpont (kb. 3,75 em) széles. A méretet három szűrővel állíthatod:

// A bélyegkép szélessége. Alapérték: 60
add_filter( 'cfw_cart_thumb_width', function ( $width ) {
  return 70;
} );

// A bélyegkép magassága. Alapérték: 0 (automatikus számítás, ezt érdemes meghagyni)
add_filter( 'cfw_cart_thumb_height', function ( $height ) {
  return 70;
} );

// A kép levágása a kért méretre. Alapérték: false
add_filter( 'cfw_crop_cart_thumbs', function ( $crop ) {
  return true;
} );

A módosítás után a már feltöltött képeket újra kell generálni egy erre való bővítménnyel (például a Regenerate Thumbnails), különben a régi méretek maradnak.

Ha csak a megjelenített szélességet szeretnéd átírni, elég az Egyedi CSS mezőbe ez a szabály:

#cfw-cart .cart-item-row .cfw-cart-item-image {
  width: 100px;
}

Fizetési mód alapértelmezett kiválasztásának kikapcsolása

Alapból a pénztár betöltéskor kiválaszt egy fizetési módot, ha egyik sincs kijelölve. Egyes országok előírása (például Finnországé) szerint a pénztárnak fizetési mód kiválasztása nélkül kell betöltődnie. Ehhez két szűrő kell, mindkettő kötelező:

1. A PHP-szűrő (cfw_ensure_selected_payment_method, alapértéke igaz) a PHP kódrészletek mezőbe kerül:

   add_filter( 'cfw_ensure_selected_payment_method', '__return_false' );

2. A JavaScript-szűrő (cfw_js_ensure_selected_payment_method, szintén igaz az alapértéke) a CheckoutWC → Haladó → Szkriptek oldal Fizetés szakaszának Fejléc szkriptek mezőjébe megy:

   <script>
   jQuery( document ).on( 'cfw_checkout_before_load', function() {
     window.wp.hooks.addFilter( 'cfw_js_ensure_selected_payment_method', 'cfw', function() {
       return false;
     } );
   });
   </script>

A JavaScript-szűrő a wp.hooks globális objektumot használja (@wordpress/hooks).

Egyedi HTML a pénztáron

Saját HTML-blokkot egy művelettel (action) tehetsz a pénztár egy kiválasztott pontjára. A lépések:

1. Válaszd ki, hová kerüljön a tartalom, vagyis melyik műveletet használod. A példában ez a cfw_after_cart_summary, vagyis a kosár-összefoglaló utáni hely.

2. Írd meg a kódot:

   add_action( 'cfw_after_cart_summary', function () {
     ?>
     <div class="sajat-doboz">
       <h2>Egy cím</h2>
       <p>Egy bekezdés.</p>
       <p>Bekezdés PHP-val: <?php echo 'PHP-ból kiírt szöveg'; ?></p>
     </div>
     <?php
   } );

3. Telepítsd a kódot: a PHP kódrészletek mezőbe (nyitó <?php nélkül), a gyermektéma functions.php fájljába vagy egy kódrészlet-kezelő bővítménybe.

További elérhető helyek a Gombok és feliratok átírása és a A pénztár elrendezésének finomhangolása fejezetben szerepelnek.

A „Rendelés összefoglaló megjelenítése” felirat mobilon

Mobilon a kosár-összefoglalót egy lenyitható sáv jelzi, alapból a „Rendelés összefoglaló megjelenítése” felirattal. Sok bolt átírja, hogy a vásárlók könnyebben megtalálják a kuponmezőt.

1. Nyisd meg a CheckoutWC → Oldalak → Pénztár fület.
2. A Mobil opciók szakaszban írd be a szöveget a Kosár összefoglaló mobil címke mezőbe.
3. Kattints a Módosítások mentése gombra.

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

A kép alján a Mobil opciók szakaszban látszik a Kosár összefoglaló mobil címke mező. Ha üresen hagyod, az alapszöveg marad. A mező a Pénztárszerkesztő pénztár-beállításai között is elérhető.

Régebbi módszer a szűrő, ami továbbra is működik:

add_filter( 'cfw_show_order_summary_link_text', function ( $text ) {
  return 'Összefoglaló és kuponok';
} );

A szűrő csak akkor fut le, ha a Kosár összefoglaló mobil címke mező üres: a mezőbe írt érték mindig erősebb.

A gombok rámutatáskori színe

A gombok rámutatáskori (hover) háttere és szövege nem kódot igényel: a Gombok színcsoportban, a Megjelenés színbeállításai között külön mezője van az elsődleges és a másodlagos gombnak is (lásd: Sablonok és dizájn).