Mini-Cart Bloccato dopo la Disattivazione dei Fragments: Guida alla Soluzione con JavaScript

Velocizzare un e-commerce richiede spesso scelte drastiche sulle prestazioni. Disattivare lo script dei frammenti velocizza WooCommerce in modo evidente.

Ritrovarsi con il mini-cart bloccato dopo la disattivazione dei fragments è uno scenario comune per molti sviluppatori WooCommerce. Gli utenti aggiungono prodotti ma il contatore nell’header resta fermo a zero.

Questo problema compromette l’esperienza utente e riduce le conversioni del negozio. Abbiamo analizzato la procedura di disattivazione nella nostra guida su come disabilitare i cart fragments in WooCommerce. In questo tutorial pratico risolveremo il blocco del carrello tramite eventi JavaScript personalizzati.

Perché il carrello smette di aggiornarsi

WooCommerce include di default uno script denominato wc-cart-fragments.js. Questo file gestisce l’aggiornamento automatico delle icone del carrello.

Il ruolo tradizionale dello script nativo

Lo script nativo effettua una chiamata AJAX verso admin-ajax.php ad ogni caricamento pagina. Questa operazione verifica il contenuto del carrello e sincronizza l’interfaccia. La chiamata ignora la cache della pagina e genera carico sul server. Essa rallenta pesantemente il Time to First Byte (TTFB) del sito.

La conseguenza della sua rimozione

Affrontare il problema del mini-cart bloccato dopo la disattivazione dei fragments significa ripensare l’interazione client-server. Quando deregistri lo script nativo, la richiesta AJAX automatica scompare del tutto. Di conseguenza il browser non riceve più i dati aggiornati del carrello. Il markup HTML generato dalla cache statica rimane identico per tutti i visitatori.

L’approccio moderno con eventi JavaScript

Non serve riattivare lo script pesante per sincronizzare il mini carrello. Possiamo sfruttare gli eventi JavaScript nativi generati durante l’aggiunta al carrello.

Come funzionano gli eventi del pulsante Ajax

Quando un utente clicca su ‘Aggiungi al carrello’, WooCommerce scatena eventi specifici sul DOM. Uno dei più utili è l’evento added_to_cart. Questo evento include già i dati principali dei frammenti nella risposta iniziale. Possiamo intercettare questo evento senza interrogare continuamente il server.

Archiviazione locale e sincronizzazione client-side

Possiamo memorizzare temporaneamente il numero di articoli nel sessionStorage del browser. In questo modo l’interfaccia si aggiorna istantaneamente tra le pagine. Il server non riceve richieste inutili durante la normale navigazione del catalogo.

Trucco pratico: Non interrogare mai admin-ajax.php ad ogni caricamento di pagina. Usa invece gli eventi del browser per eseguire richieste solo dopo azioni reali dell’utente.

Procedura passo-passo per sbloccare il mini-cart

Vediamo ora come implementare una soluzione pulita e leggera nel tuo tema child.

Passo 1: Creare un endpoint REST leggero per i dati del carrello

Evitiamo il vecchio sistema admin-ajax.php. Creiamo un endpoint REST personalizzato molto più rapido e ottimizzato per la cache.

add_action('rest_api_init', function () {
    register_rest_route('custom-shop/v1', '/cart-data', [
        'methods' => 'GET',
        'callback' => 'custom_get_cart_data',
        'permission_callback' => '__return_true',
    ]);
});

function custom_get_cart_data() {
    if (!function_exists('WC') || !WC()->cart) {
        return new WP_REST_Response(['count' => 0, 'subtotal' => 0], 200);
    }
    return new WP_REST_Response([
        'count' => WC()->cart->get_cart_contents_count(),
        'subtotal' => WC()->cart->get_cart_subtotal(),
    ], 200);
}

Questo codice restituisce solo le informazioni indispensabili in formato JSON leggero.

Passo 2: Configurare lo script JavaScript custom

Creiamo ora un piccolo file JavaScript per ascoltare l’aggiunta di prodotti. Questo script aggiorna l’elemento grafico contenente il contatore del carrello.

(function($) {
    'use strict';

    function updateCartCounter(count) {
        $('.cart-count-badge').text(count);
        sessionStorage.setItem('custom_cart_count', count);
    }

    // Aggiornamento all'aggiunta al carrello
    $(document.body).on('added_to_cart', function(event, fragments, cart_hash, $button) {
        if (fragments && fragments['div.widget_shopping_cart_content']) {
            // Sostituisce il drawer o widget se fornito
            $('.widget_shopping_cart_content').replaceWith(fragments['div.widget_shopping_cart_content']);
        }
        fetch('/wp-json/custom-shop/v1/cart-data')
            .then(res => res.json())
            .then(data => updateCartCounter(data.count));
    });

    // Ripristino al caricamento pagina
    $(document).ready(function() {
        const savedCount = sessionStorage.getItem('custom_cart_count');
        if (savedCount !== null) {
            $('.cart-count-badge').text(savedCount);
        }
    });
})(jQuery);

Passo 3: Caricare lo script in modo asincrono

Questa tecnica evita di avere un mini-cart bloccato dopo la disattivazione dei fragments preservando al tempo stesso ottimi punteggi Core Web Vitals. Inserisci lo script nel file functions.php del tuo tema child.

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script(
        'custom-cart-updater',
        get_stylesheet_directory_uri() . '/js/cart-updater.js',
        ['jquery'],
        '1.0.0',
        true
    );
});

Gestione avanzata di drawer e rimozione articoli

I carrelli a comparsa (drawer) richiedono attenzioni particolari durante lo sviluppo del negozio.

Gestire la rimozione degli elementi via Ajax

Quando un utente rimuove un prodotto dal drawer, WooCommerce lancia un evento differente. L’evento da intercettare è denominato removed_from_cart. Aggiungi semplicemente questo trigger nel file JavaScript visto in precedenza.

Compatibilità con plugin di caching e cookie

Assicurati che i cookie di WooCommerce non vengano memorizzati nella cache statica del server. Sistemi come Varnish, Nginx FastCGI Cache o Cloudflare devono escludere i cookie woocommerce_items_in_cart. Questa configurazione previene la visualizzazione di dati errati tra utenti diversi.

Domande Frequenti (FAQ)

Cosa causa il problema del carrello fermo dopo aver tolto i fragments?

Avere il mini-cart bloccato dopo la disattivazione dei fragments accade perché WooCommerce interrompe l’invio automatico delle chiamate AJAX periodiche. Senza queste richieste, il markup della pagina rimane statico e non mostra i nuovi prodotti aggiunti.

Perché la REST API è migliore di admin-ajax?

La REST API di WordPress carica un ambiente più leggero rispetto a admin-ajax.php. Questo riduce notevolmente il consumo di memoria RAM sul server. I tempi di risposta diventano molto più brevi.

Questo metodo funziona con tutti i page builder?

Sì, il metodo funziona con tutti i principali builder come Elementor, Divi o Bricks. Devi soltanto verificare il selettore CSS della classe assegnata al badge del contatore.

Articoli simili