WooCommerce AJAX adăugați în coș – Tutorial pas cu pas

Publicat: 2019-11-20

Acum câteva săptămâni am vorbit despre cum să adăugați funcția coș în mod programatic pentru a vă crește vânzările. Astăzi, vom arunca o privire asupra modului de implementare AJAX în butonul Adaugă în coș din produsele WooCommerce . Acest lucru va îmbunătăți experiența utilizatorului și procesul general de vânzare, ceea ce vă va ajuta, de asemenea, să vă optimizați magazinul și să vă creșteți veniturile.

În zilele noastre, dacă doriți să conduceți un magazin de succes, este esențial ca site-ul dvs. să actualizeze coșul în mod dinamic. În caz contrar, de fiecare dată când un utilizator adaugă un produs în coș, pagina se va reîncărca, ceea ce face procesul de cumpărare foarte lent și crește șansele de renunțare la clienți. De aceea, reînnoirea magazinului dvs. cu funcția de adăugare în coș WooCommerce AJAX este o necesitate pentru a reduce abandonul coșului și pentru a vă crește vânzările.

În acest ghid, vă vom arăta cum să o faceți pas cu pas.

Beneficiile AJAX în WooCommerce

Deci, pentru a rezuma, beneficiile utilizării AJAX în magazinul dvs. sunt:

  • Reduceți încărcarea serverului și lățimea de bandă
  • Accelerează procesul de cumpărare
  • Îmbunătățiți experiența clienților
  • Reduceți abandonul căruciorului
  • Creșteți ratele de conversie

Tutorial: WooCommerce AJAX adăugați în coș

Pentru a aplica funcția de adăugare în coș AJAX în WooCommerce , există două opțiuni:

  1. Cu un plugin
  2. Codați-l singur

Să aruncăm o privire la fiecare metodă.

1) AJAX adăugați în coș cu un plugin

Dacă nu aveți experiență în codificare sau preferați o soluție ușoară, folosirea unui plugin este o alegere excelentă. Pur și simplu descărcați pluginul nostru AJAX pentru adăugarea în coș WooCommerce, instalați-l și software-ul se va ocupa de restul.

Ajax adăugați în coș pentru WooCommerce

AJAX adăugați în coș pentru WooCommerce este unul dintre cele mai bune plugin-uri pentru a adăuga AJAX la butonul WooCommerce adăugați în coș . Acest instrument permite cumpărătorilor să includă produse unice sau variabile în coșul lor, fără a fi necesar să reîncarce site-ul de fiecare dată. Ceea ce este și mai bun este că funcționează fără probleme în 99% dintre temele WordPress și nu necesită nicio configurare inițială. Odată ce îl instalați, va fi gata de funcționare.

2) Codați-l singur

Aveți niște abilități de codificare și preferați să personalizați butonul WooCommerce AJAX pentru adăugare în coș ? În acest ghid, vă vom arăta cum să o faceți pas cu pas.

A) Instalați o temă copil

Primul lucru pe care trebuie să-l faceți este să creați o temă copil . Dacă nu aveți unul, puteți utiliza un plugin. Există mai multe dintre ele, așa că alegeți-l pe cel care vă place cel mai mult și instalați-l în magazinul dvs. De ce ar trebui să instalați o temă copil? Pentru că dacă personalizați direct fișierele temei, data viitoare când actualizați tema, noile fișiere vă vor înlocui modificările și toate personalizările dvs. se vor pierde. Cu toate acestea, dacă personalizați tema copil, modificările nu vor fi înlocuite.

B) Includeți fișierul JavaScript (JS).

În fișierul functions.php al temei copil, includeți un fișier JavaScript folosind hook-ul wp_enqueue_script . Acesta este unul dintre cele mai populare cârlige pe care WordPress le oferă pentru personalizarea site-urilor web. Să aruncăm o privire la scriptul care include fișierul ajax_add_to_cart.js de mai jos:

 funcția ql_woocommerce_ajax_add_to_cart_js() {
    if (funcția_există('este_produsul') && este_produsul()) {  
       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');

Cu condiționalul if (function_exists('is_product') && is_product()) în linia 2, vă asigurați că JQuery este aplicat numai pe pagina unui produs.

C) Creați un fișier JS

După ce ați făcut asta, creați fișierul pe care l-ați inclus la pasul anterior. Doar accesați cPanelul dvs. și apoi în folderul cu tema copil . După aceea, urmați ruta wp_content /themes/ folder . Acolo, creați un folder nou în tema copil numit js și apoi un fișier în interiorul acestuia cu același nume pe care l-ați folosit în hook-ul ajax-add-to-cart.js . Rețineți că acest pas funcționează și dacă utilizați un client FTP. Dacă tema copilului dvs. are deja un folder JS, îl puteți utiliza fără a crea unul nou.

D) Fișierul JQuery/JS

Următorul pas este să lucrați la fișierul JQuery pe care l-ați încărcat în tema copilului. Fișierul este gol, așa că trebuie să adăugați scripturi. În primul rând, împiedicați butonul de adăugare în coș să reîncarce pagina cu următorul script:

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

Vă rugăm să rețineți că folosim selectorul $('.single_add_to_cart_button') pentru a declanșa apelul AJAX atunci când se face clic pe butonul. Trebuie să înțelegeți acest lucru, deoarece toate scripturile următoare vor intra în această funcție.

E) JQuery WooCommerce AJAX adăugați în coș pentru produse individuale

Deci, scriptul complet JQuery pentru AJAX adăugat în coș pentru produse individuale este:

 jQuery(document).ready(funcție($) {
    $('.single_add_to_cart_button').on('click', function(e){ 
    e.preventDefault();
    $thisbutton = $(acest),
                $form = $thisbutton.closest('form.cart'),
                id = $thisbutton.val(),
                product_qty = $form.find('input[name=quantity]').val() || 1,
                product_id = $form.find('input[name=product_id]').val() || id,
                variation_id = $form.find('input[name=variation_id]').val() || 0;
    var data = {
            acțiune: „ql_woocommerce_ajax_add_to_cart”,
            product_id: product_id,
            product_sku: '',
            cantitate: product_qty,
            variation_id: variation_id,
        };
    $.ajax({
            tip: „post”,
            url: wc_add_to_cart_params.ajax_url,
            date: date,
            beforeSend: funcție (răspuns) {
                $thisbutton.removeClass('adăugat').addClass('se încarcă');
            },
            complet: funcție (răspuns) {
                $thisbutton.addClass('adăugat').removeClass('se încarcă');
            }, 
            succes: funcție (răspuns) { 
                dacă (response.error și response.product_url) {
                    window.location = response.product_url;
                    întoarcere;
                } altfel { 
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

F) Scriptul PHP

După aceea, aveți nevoie de handlerul PHP. Cel mai bun mod este să utilizați unele dintre cârligele de filtru WooCommerce pentru a vă crea funcția de adăugare în coș . De data aceasta o vei face folosind AJAX. Pur și simplu copiați și lipiți următorul script în fișierul functions.php al temei copil sub scriptul anterior pe care l-am folosit pentru a include fișierul 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');          
funcția ql_woocommerce_ajax_add_to_cart() {  
    $product_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $cantitate = gol($_POST['cantitate']) ? 1: wc_stock_amount($_POST['cantity']);
    $variation_id = absent($_POST['variation_id']);
    $passed_validation = apply_filters('ql_woocommerce_add_to_cart_validation', true, $product_id, $cantity);
    $product_status = get_post_status($product_id); 
    if ($passed_validation && WC()->cart->add_to_cart($product_id, $cantity, $variation_id) && „publicare” === $product_status) { 
        do_action('ql_woocommerce_ajax_added_to_cart', $product_id);
            dacă („da” === get_option('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message(array($product_id => $cantity), true); 
            } 
            WC_AJAX :: get_refreshed_fragments(); 
            } altfel { 
                $date = matrice( 
                    „eroare” => adevărat,
                    'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
                echo wp_send_json($date);
            }
            wp_die();
        }

Asta e! Tocmai ați creat butonul WooCommerce AJAX de adăugare în coș ! Dar de unde știi că ai făcut totul corect? Puteți verifica cu ușurință. Când faceți clic pe butonul de adăugare în coș , produsul ar trebui adăugat în coș fără a reîncărca pagina.

Concluzie

Una peste alta, dacă doriți să vă optimizați magazinul, funcția de adăugare în coș WooCommerce AJAX este o necesitate. Modalitatea ușoară de a-l aplica este prin utilizarea pluginului AJAX pentru adăugarea în coș WooCommerce. Cu toate acestea, dacă aveți abilități de codare, puteți codifica AJAX adăugați în coș cu o temă copil și un pic de PHP așa cum este descris mai sus.

Ambele opțiuni sunt excelente, așa că alege-o pe cea care se potrivește mai bine nevoilor și aptitudinilor tale. Acest lucru vă va ajuta să îmbunătățiți experiența utilizatorului și să vă creșteți ratele de conversie. Vă rugăm să ne spuneți părerile dvs. în secțiunea de comentarii de mai jos.

În cele din urmă, pentru mai multe ghiduri despre WooCommerce, vă recomandăm să consultați ghidurile noastre despre cum să adăugați produse WooCommerce și cum să creați atribute implicite ale produselor în WooCommerce.