Valószínűleg mindenki látott már webáruházak fejlécében kosár ikont számokkal, melyek a kosárban lévő tételeket mutatják.
Erre a WooCommerce-ben van egy dedikált hook, amely kosár frissítésekor az ajax hívás befejezésekor bizonyos DOM elemeket – pl. a fejlécben egy konténerben a kosarat – frissítsen (ld. Mike Jolley eredeti gist bejegyzését). Ha valaki lusta kattintani, akkor itt van egy hasonló:
<?php
add_filter('woocommerce_add_to_cart_fragments', 'custom_header_cart_fragment');
function custom_header_cart_fragment( $fragments )
{
ob_start();
?>
<div class="header-cart-wrapper">
<a class="header-cart-link" href="<?php echo esc_url(wc_get_cart_url()); ?>">
Kosár (<?php echo WC()->cart->get_cart_contents_count(); ?>)
</a>
</div>
<?php
$fragments['div.header-cart-wrapper'] = ob_get_clean();
return $fragments;
}
?>A „párja” pedig, amit a fejlécbe kell tenni, az pedig így néz ki:
<div class="header-cart-wrapper">
<a class="header-cart-link" href="<?php echo esc_url(wc_get_cart_url()); ?>">
Kosár (<?php echo WC()->cart->get_cart_contents_count(); ?>)
</a>
</div>Fontos, hogy a <div class="header-cart-wrapper">-rel kezdődő sor mindkét kódban ugyanaz maradjon, mivel a WooCommerce hook a $fragments objektumban erre a class-ra fog hivatkozni, tehát ha átírjuk a fejlécben lévő header-cart-wrapper CSS osztályt, akkor nem fogja megtalálni.
Ez volt eddig az egyszerű rész, évek óta használom, sose volt vele gond. Most azonban mégis belefutottam egy hibába, ami egy kis utánanézést és magyarázatot igényel. Pár napja az egyik ügyfélnek be kellett tenni a fejlécébe egy kosarat (nem voltak neki előtt WooCommerce az oldalában), de valamiért hiába tettem be a fenti woocommerce_add_to_cart_fragments kódot, az nem akarta frissíteni a kosarat.
Még a ChatGPT-t is megkérdeztem, de nem talált megoldást, én viszont igen. Elkezdtem debuggolni és észrevettem, hogy a /wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js JavaScript nincs inicializálva. Egy WP Rocket-hoz (cache plugin) kapcsolódó WooCommerce github bejegyzés világított rá a megoldásra. A lényeg, hogy a WooCommerce 7.8-as verzióban kivezették a mini cart scriptet, mert túl sok felesleges ajax kérérst generált, ami lassította nemcsak a WooCommerce, de az egész weboldal működését, ahol WooCommerce volt telepítve. Akit érdekelnek a részleteket, az elolvashatja a WooCommerce fejlesztői blogban az erről szóló bejegyzést is.
Tehát ha a WooCommerce 7.8 vagy újabb verzió után szeretnénk használni ezt az automatikusan frissülő mini kosár funkciót, akkor nekünk kell azt engedélyezni, mégpedig a következő PHP kóddal (functions.php-ba, vagy külön pluginba szervezve kell tenni ezt is):
add_action('wp_enqueue_scripts', 'enable_wc_cart_fragments_script', 100);
function enable_wc_cart_fragments_script()
{
if (is_woocommerce() || is_cart() || is_checkout()) {
wp_enqueue_script('wc-cart-fragments');
}
}És működik, voilá!
