WooCommerce AJAX aggiungi al carrello – Tutorial passo dopo passo

Pubblicato: 2019-11-20

Alcune settimane fa abbiamo parlato di come aggiungere la funzione carrello in modo programmatico per aumentare le vendite. Oggi daremo un'occhiata a come implementare AJAX nel pulsante Aggiungi al carrello nei prodotti WooCommerce . Ciò migliorerà l'esperienza dell'utente e il processo di vendita generale, che ti aiuterà anche a ottimizzare il tuo negozio e aumentare le tue entrate.

Al giorno d'oggi, se vuoi gestire un negozio di successo, è fondamentale che il tuo sito aggiorni il carrello in modo dinamico. In caso contrario, ogni volta che un utente aggiunge un prodotto al carrello, la pagina si ricaricherà rendendo il processo di acquisto molto lento e aumentando le possibilità che i clienti abbandonino. Ecco perché rinnovare il tuo negozio con la funzione Aggiungi al carrello WooCommerce AJAX è un must per ridurre l'abbandono del carrello e aumentare le vendite.

In questa guida, ti mostreremo come farlo passo dopo passo.

Vantaggi di AJAX in WooCommerce

Quindi, per riassumere, i vantaggi dell'utilizzo di AJAX nel tuo negozio sono:

  • Riduci il carico del server e la larghezza di banda
  • Accelera il processo di acquisto
  • Migliora l'esperienza del cliente
  • Riduci l'abbandono del carrello
  • Aumenta i tassi di conversione

Tutorial: WooCommerce AJAX aggiungi al carrello

Per applicare la funzione di aggiunta al carrello AJAX in WooCommerce ci sono due opzioni:

  1. Con un plug-in
  2. Codificalo tu stesso

Diamo un'occhiata a ciascun metodo.

1) AJAX aggiungi al carrello con un plugin

Se non hai esperienza di programmazione o preferisci una soluzione semplice, l'utilizzo di un plug-in è una scelta eccellente. Basta scaricare il nostro plug-in WooCommerce per aggiungere al carrello AJAX, installarlo e il software farà il resto.

Ajax aggiungi al carrello per WooCommerce

AJAX aggiungi al carrello per WooCommerce è uno dei migliori plugin per aggiungere AJAX al pulsante Aggiungi al carrello di WooCommerce. Questo strumento consente agli acquirenti di includere prodotti singoli o variabili nei loro carrelli senza dover ricaricare il sito ogni volta. La cosa ancora migliore è che funziona senza problemi nel 99% dei temi WordPress e non richiede alcuna configurazione iniziale. Una volta installato, sarà pronto per l'uso.

2) Codificalo tu stesso

Hai alcune capacità di programmazione e preferisci personalizzare il tuo pulsante Aggiungi al carrello WooCommerce AJAX? In questa guida, ti mostreremo come farlo passo dopo passo.

A) Installa un tema figlio

La prima cosa che devi fare è creare un tema figlio . Se non ne hai uno, puoi utilizzare un plugin. Ce ne sono molti, quindi scegli quello che ti piace di più e installalo nel tuo negozio. Perché dovresti installare un tema figlio? Perché se personalizzi direttamente i file del tema, la prossima volta che aggiorni il tema, i nuovi file sostituiranno le tue modifiche e tutte le tue personalizzazioni andranno perse. Tuttavia, se personalizzi il tema figlio, le modifiche non verranno sovrascritte.

B) Includere il file JavaScript (JS).

Nel file functions.php del tema figlio, includi un file JavaScript usando l'hook wp_enqueue_script . Questo è uno degli hook più popolari che WordPress offre per personalizzare i siti web. Diamo un'occhiata allo script che include il file ajax_add_to_cart.js di seguito:

 funzione ql_woocommerce_ajax_add_to_cart_js() {
    if (function_exists('is_product') && is_product()) {  
       wp_enqueue_script('custom_script', get_bloginfo('stylesheet_directory') . '/js/ajax_add_to_cart.js', array('jquery'),'1.0');
    }
}
add_action('wp_enqueue_scripts', 'ql_woocommerce_ajax_add_to_cart_js');

Con il condizionale if (function_exists('is_product') && is_product()) nella riga 2, assicurati che JQuery sia applicato solo su una pagina di prodotto.

C) Creare un file JS

Dopo averlo fatto, crea il file che hai incluso nel passaggio precedente. Vai al tuo cPanel e poi alla cartella del tema figlio . Successivamente, segui il percorso wp_content /themes/ folder . Lì, crea una nuova cartella nel tema figlio chiamato js , quindi un file al suo interno con lo stesso nome che hai usato nell'hook ajax-add-to-cart.js . Tieni presente che questo passaggio funziona anche se utilizzi un client FTP. Se il tuo tema figlio ha già una cartella JS, puoi usarla senza crearne una nuova.

D) Il file JQuery/JS

Il prossimo passo è lavorare sul file JQuery che hai caricato nel tuo tema figlio. Quel file è vuoto, quindi è necessario aggiungere script. Innanzitutto, impedisci al pulsante Aggiungi al carrello di ricaricare la pagina con il seguente script:

 $('.single_add_to_cart_button').on('click', function(e) { 
    e.preventDefault();
});

Tieni presente che utilizziamo il selettore $('.single_add_to_cart_button') per attivare la chiamata AJAX quando si fa clic sul pulsante. Devi capirlo perché tutto il seguente script andrà all'interno di questa funzione.

E) JQuery WooCommerce AJAX aggiungi al carrello sui singoli prodotti

Quindi lo script JQuery completo per l'aggiunta di AJAX al carrello su singoli prodotti è:

 jQuery(documento).ready(funzione($) {
    $('.single_add_to_cart_button').on('click', funzione(e){ 
    e.preventDefault();
    $questopulsante = $(questo),
                $form = $thisbutton.closest('form.cart'),
                id = $questopulsante.val(),
                product_qty = $form.find('input[nome=quantità]').val() || 1,
                id_prodotto = $form.find('input[nome=id_prodotto]').val() || ID,
                id_variazione = $form.find('input[nome=id_variazione]').val() || 0;
    dati variabili = {
            azione: 'ql_woocommerce_ajax_add_to_cart',
            ID_prodotto: ID_prodotto,
            codice_prodotto: '',
            quantità: prodotto_qty,
            variazione_id: variazione_id,
        };
    $.ajax({
            digitare: 'post',
            URL: wc_add_to_cart_params.ajax_url,
            dati: dati,
            beforeSend: funzione (risposta) {
                $thisbutton.removeClass('aggiunto').addClass('caricamento');
            },
            completo: funzione (risposta) {
                $thisbutton.addClass('aggiunto').removeClass('caricamento');
            }, 
            successo: funzione (risposta) { 
                if (response.error & response.product_url) {
                    window.location = response.product_url;
                    Restituzione;
                } altro { 
                    $(document.body).trigger('aggiunto_al_carrello', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

F) Lo script PHP

Successivamente, è necessario il gestore PHP. Il modo migliore è utilizzare alcuni degli hook del filtro WooCommerce per creare la tua funzione di aggiunta al carrello . Questa volta lo farai usando AJAX. Copia e incolla semplicemente il seguente script nel file functions.php del tema figlio sotto lo script precedente che abbiamo usato per includere il file JS.

 add_action('wp_ajax_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart'); 
add_action('wp_ajax_nopriv_ql_woocommerce_ajax_add_to_cart', 'ql_woocommerce_ajax_add_to_cart');          
funzione ql_woocommerce_ajax_add_to_cart() {  
    $ product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $quantità = vuoto($_POST['quantità']) ? 1 : wc_stock_amount($_POST['quantità']);
    $variation_id = absint($_POST['variation_id']);
    $validazione_passata = apply_filters('ql_woocommerce_add_to_cart_validation', true, $id_prodotto, $quantità);
    $stato_prodotto = get_post_stato($id_prodotto); 
    if ($validazione_passata && WC()->carrello->aggiungi_al_carrello($id_prodotto, $quantità, $id_variazione) && 'pubblica' === $stato_prodotto) { 
        do_action('ql_woocommerce_ajax_added_to_cart', $id_prodotto);
            if ('yes' === get_option('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message(array($id_prodotto => $quantità), true); 
            } 
            WC_AJAX :: get_refreshed_fragments(); 
            } altro { 
                $dati = matrice( 
                    'errore' => vero,
                    'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($ product_id), $ product_id));
                echo wp_send_json($dati);
            }
            wp_die();
        }

Questo è tutto! Hai appena creato il tuo pulsante Aggiungi al carrello WooCommerce AJAX ! Ma come fai a sapere che hai fatto tutto correttamente? Puoi verificarlo facilmente. Quando si fa clic sul pulsante Aggiungi al carrello , il prodotto deve essere aggiunto al carrello senza ricaricare la pagina.

Conclusione

Tutto sommato, se vuoi ottimizzare il tuo negozio, la funzione di aggiunta al carrello di WooCommerce AJAX è un must. Il modo più semplice per applicarlo è utilizzare il plug-in WooCommerce per aggiungere al carrello AJAX. Tuttavia, se hai capacità di programmazione, puoi codificare AJAX add to cart con un tema figlio e un po' di PHP come descritto sopra.

Entrambe le opzioni sono eccellenti, quindi scegli quella più adatta alle tue esigenze e abilità. Questo ti aiuterà a migliorare l'esperienza utente e ad aumentare i tuoi tassi di conversione. Fateci sapere i vostri pensieri nella sezione commenti qui sotto.

Infine, per ulteriori guide su WooCommerce, ti consigliamo di consultare le nostre guide su come aggiungere prodotti WooCommerce e come creare attributi di prodotto predefiniti in WooCommerce.