WooCommerce AJAX sepete ekle – Adım Adım Eğitim

Yayınlanan: 2019-11-20

Birkaç hafta önce, satışlarınızı artırmak için sepet işlevini programlı olarak nasıl ekleyeceğiniz hakkında konuştuk. Bugün, WooCommerce ürünlerinde Sepete ekle düğmesinde AJAX'ın nasıl uygulanacağına bir göz atacağız. Bu, kullanıcı deneyimini ve genel satış sürecini iyileştirecek ve ayrıca mağazanızı optimize etmenize ve gelirinizi artırmanıza yardımcı olacaktır.

Günümüzde başarılı bir mağaza işletmek istiyorsanız, sitenizin alışveriş sepetini dinamik olarak güncellemesi çok önemlidir. Aksi takdirde, bir kullanıcı sepete her ürün eklediğinde, sayfa yeniden yüklenecek ve satın alma sürecini çok yavaşlatacak ve müşterilerin bırakma şansını artıracaktır. Bu nedenle, mağazanızı WooCommerce AJAX sepete ekle işleviyle yenilemek, alışveriş sepetini terk etmeyi azaltmak ve satışlarınızı artırmak için bir zorunluluktur.

Bu kılavuzda, size adım adım nasıl yapacağınızı göstereceğiz.

AJAX'ın WooCommerce'deki Faydaları

Özetlemek gerekirse, mağazanızda AJAX kullanmanın faydaları şunlardır:

  • Sunucu yükünü ve bant genişliğini azaltın
  • Satın alma sürecini hızlandırın
  • Müşteri deneyimini iyileştirin
  • Alışveriş sepetini terk etmeyi azaltın
  • Dönüşüm oranlarını artırın

Öğretici: WooCommerce AJAX sepete ekle

AJAX sepete ekle işlevini WooCommerce'de uygulamak için iki seçenek vardır:

  1. bir eklenti ile
  2. Kendiniz kodlamak

Her bir yönteme bir göz atalım.

1) AJAX bir eklenti ile sepete ekle

Kodlama deneyiminiz yoksa veya kolay bir çözümü tercih ediyorsanız, bir eklenti kullanmak mükemmel bir seçimdir. Basitçe AJAX sepete ekle WooCommerce eklentimizi indirin, kurun ve yazılım gerisini halletsin.

WooCommerce için Ajax sepete ekle

WooCommerce için AJAX sepete ekle, AJAX'ı WooCommerce sepete ekle düğmesine eklemek için en iyi eklentilerden biridir. Bu araç, alışveriş yapanların her seferinde siteyi yeniden yüklemek zorunda kalmadan sepetlerine tek veya değişken ürünler eklemesine olanak tanır. Daha da iyisi, WordPress temalarının %99'unda sorunsuz çalışması ve herhangi bir ilk kurulum gerektirmemesidir. Bir kez kurduktan sonra, gitmeye hazır olacak.

2) Kendiniz kodlayın

Bazı kodlama becerileriniz var ve WooCommerce AJAX sepete ekle düğmenizi özelleştirmeyi mi tercih ediyorsunuz? Bu kılavuzda, size adım adım nasıl yapacağınızı göstereceğiz.

A) Bir alt tema yükleyin

Yapmanız gereken ilk şey bir çocuk teması oluşturmak. Eğer yoksa, bir eklenti kullanabilirsiniz. Birkaç tane var, bu yüzden en çok beğendiğinizi seçin ve mağazanıza kurun. Neden bir alt tema yüklemelisiniz? Çünkü temanın dosyalarını doğrudan kişiselleştirirseniz, temayı bir sonraki güncellemenizde, yeni dosyalar değişikliklerinizin yerini alacak ve tüm özelleştirmeleriniz kaybolacaktır. Ancak, alt temayı özelleştirirseniz, değişiklikler geçersiz kılınmaz.

B) JavaScript (JS) dosyasını dahil et

Alt temanın functions.php dosyasında, wp_enqueue_script kancasını kullanarak bir JavaScript dosyası ekleyin. Bu, WordPress'in web sitelerini özelleştirmek için sunduğu en popüler kancalardan biridir. Aşağıdaki ajax_add_to_cart.js dosyasını içeren komut dosyasına bir göz atalım:

 function 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');

2. satırdaki koşullu if (function_exists('is_product') && is_product()) ile, JQuery'nin yalnızca bir ürün sayfasına uygulandığından emin olursunuz.

C) Bir JS dosyası oluşturun

Bunu yaptıktan sonra, önceki adımda eklediğiniz dosyayı oluşturun. Sadece cPanel'inize ve ardından alt tema klasörüne gidin. Bundan sonra, wp_content /themes/ klasörü yolunu izleyin. Orada, alt temada js adlı yeni bir klasör ve ardından bunun içinde ajax-add-to-cart.js kancasında kullandığınız ada sahip bir dosya oluşturun. Bu adımın bir FTP istemcisi kullansanız bile çalıştığını unutmayın. Alt temanızın zaten bir JS klasörü varsa, yeni bir tane oluşturmadan kullanabilirsiniz.

D) JQuery/JS dosyası

Sonraki adım, alt temanıza yüklediğiniz JQuery dosyası üzerinde çalışmaktır. Bu dosya boş, bu yüzden komut dosyaları eklemeniz gerekiyor. İlk olarak, sepete ekle düğmesinin aşağıdaki komut dosyasıyla sayfayı yeniden yüklemesini önleyin:

 $('.single_add_to_cart_button').on('tıklama', işlev(e) { 
    e.preventDefault();
});

Düğme tıklandığında AJAX çağrısını tetiklemek için $('.single_add_to_cart_button') seçicisini kullandığımızı lütfen unutmayın. Bunu anlamalısınız çünkü aşağıdaki tüm komut dosyası bu işlevin içine girecektir.

E) JQuery WooCommerce AJAX tek ürünlerde sepete ekleme

Bu nedenle, tek ürünlerde sepete eklenen AJAX için tam JQuery betiği şöyledir:

 jQuery(belge).ready(işlev($) {
    $('.single_add_to_cart_button').on('tıklama', işlev(e){ 
    e.preventDefault();
    $bubuton = $(bu),
                $form = $bubuton.yakın('form.cart'),
                kimlik = $bubutton.val(),
                product_qty = $form.find('input[ad=miktar]').val() || 1,
                product_id = $form.find('input[name=product_id]').val() || İD,
                varyasyon_id = $form.find('input[name=variation_id]').val() || 0;
    var data = {
            eylem: 'ql_woocommerce_ajax_add_to_cart',
            ürün_kimliği: ürün_kimliği,
            product_sku: '',
            miktar: product_qty,
            varyasyon_id: varyasyon_id,
        };
    $.ajax({
            tür: 'gönder',
            url: wc_add_to_cart_params.ajax_url,
            veri: veri,
            önceGönder: işlev (yanıt) {
                $thisbutton.removeClass('added').addClass('loading');
            },
            tamamlama: işlev (yanıt) {
                $thisbutton.addClass('added').removeClass('loading');
            }, 
            başarı: işlev (yanıt) { 
                if (response.error & response.product_url) {
                    window.location = yanıt.product_url;
                    dönüş;
                } Başka { 
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

F) PHP betiği

Daha sonra PHP işleyicisine ihtiyacınız var. En iyi yol, sepete ekle işlevinizi oluşturmak için bazı WooCommerce filtre kancalarını kullanmaktır. Bu sefer AJAX kullanarak yapacaksınız. Aşağıdaki betiği kopyalayıp JS dosyasını eklemek için kullandığımız önceki betiğin altındaki alt temanın functions.php dosyasına yapıştırın.

 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');          
function ql_woocommerce_ajax_add_to_cart() {  
    $product_id = application_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $miktar = boş($_POST['miktar']) ? 1 : wc_stock_amount($_POST['miktar']);
    $variation_id = absint($_POST['variation_id']);
    $passed_validation = application_filters('ql_woocommerce_add_to_cart_validation', true, $product_id, $quantity);
    $product_status = get_post_status($product_id); 
    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'yayınla' === $product_status) { 
        do_action('ql_woocommerce_ajax_added_to_cart', $product_id);
            if ('yes' === get_option('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message(array($product_id => $miktar), true); 
            } 
            WC_AJAX :: get_refreshed_fragments(); 
            } Başka { 
                $veri = dizi( 
                    'hata' => doğru,
                    'product_url' => application_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
                echo wp_send_json($veri);
            }
            wp_die();
        }

Bu kadar! Az önce WooCommerce AJAX sepete ekle düğmenizi oluşturdunuz ! Ama her şeyi doğru yaptığınızı nereden biliyorsunuz? Kolayca kontrol edebilirsiniz. Sepete ekle butonuna tıkladığınızda ürün sayfa tekrar yüklenmeden sepete eklenmelidir.

Çözüm

Sonuç olarak, mağazanızı optimize etmek istiyorsanız, WooCommerce AJAX sepete ekle işlevi bir zorunluluktur. Bunu uygulamanın kolay yolu, AJAX sepete ekle WooCommerce eklentisini kullanmaktır. Ancak, kodlama becerileriniz varsa, yukarıda açıklandığı gibi bir alt tema ve biraz PHP ile sepete AJAX ekle kodunu kodlayabilirsiniz.

Her iki seçenek de mükemmeldir, bu nedenle ihtiyaçlarınıza ve becerilerinize daha uygun olanı seçin. Bu, kullanıcı deneyimini iyileştirmenize ve dönüşüm oranlarınızı artırmanıza yardımcı olacaktır. Lütfen düşüncelerinizi aşağıdaki yorumlar bölümünde bize bildirin.

Son olarak, WooCommerce hakkında daha fazla kılavuz için, WooCommerce ürünlerinin nasıl ekleneceği ve WooCommerce'de varsayılan ürün özelliklerinin nasıl oluşturulacağı ile ilgili kılavuzlarımıza göz atmanızı öneririz.