WooCommerce AJAX tambahkan ke troli – Tutorial Langkah-demi-Langkah

Diterbitkan: 2019-11-20

Beberapa minggu yang lalu kami berbicara tentang cara menambahkan fungsi keranjang secara terprogram untuk meningkatkan penjualan Anda. Hari ini, kita akan melihat bagaimana menerapkan AJAX di tombol Tambahkan ke troli di produk WooCommerce . Ini akan meningkatkan pengalaman pengguna dan proses penjualan secara keseluruhan, yang juga akan membantu Anda mengoptimalkan toko dan meningkatkan pendapatan Anda.

Saat ini, jika Anda ingin menjalankan toko yang sukses, kuncinya adalah situs Anda memperbarui keranjang secara dinamis. Jika tidak, setiap kali pengguna menambahkan produk ke keranjang, halaman akan dimuat ulang sehingga proses pembelian menjadi sangat lambat dan meningkatkan kemungkinan pelanggan putus. Itu sebabnya pembenahan toko Anda dengan fungsi add to cart WooCommerce AJAX adalah suatu keharusan untuk mengurangi pengabaian keranjang dan meningkatkan penjualan Anda.

Dalam panduan ini, kami akan menunjukkan cara melakukannya langkah demi langkah.

Manfaat AJAX di WooCommerce

Jadi kesimpulannya, manfaat menggunakan AJAX di toko Anda adalah:

Kurangi beban server dan bandwidth
Mempercepat proses pembelian
Tingkatkan pengalaman pelanggan
Kurangi pengabaian keranjang
Tingkatkan tingkat konversi

Tutorial: WooCommerce AJAX tambahkan ke troli

Untuk menerapkan fungsi AJAX add to cart di WooCommerce ada dua opsi:

Dengan plugin
Coding sendiri

Mari kita lihat masing-masing metode.

1) AJAX tambahkan ke troli dengan plugin

Jika Anda tidak memiliki pengalaman pengkodean atau Anda lebih suka solusi yang mudah, menggunakan plugin adalah pilihan yang sangat baik. Cukup unduh plugin AJAX add to cart WooCommerce kami, instal dan perangkat lunak akan melakukan sisanya.

Ajax tambahkan ke troli untuk WooCommerce

AJAX add to cart untuk WooCommerce adalah salah satu plugin terbaik untuk menambahkan AJAX ke tombol add to cart WooCommerce. Alat ini memungkinkan pembeli untuk memasukkan produk tunggal atau variabel ke dalam keranjang mereka tanpa harus memuat ulang situs setiap saat. Apa yang lebih baik lagi adalah ini berjalan dengan lancar di 99% tema WordPress dan tidak memerlukan pengaturan awal apa pun. Setelah Anda menginstalnya, itu akan siap untuk digunakan.

2) Kode sendiri

Apakah Anda memiliki beberapa keterampilan pengkodean dan lebih suka menyesuaikan tombol add to cart WooCommerce AJAX Anda? Dalam panduan ini, kami akan menunjukkan cara melakukannya langkah demi langkah.

A) Pasang tema anak

Hal pertama yang perlu Anda lakukan adalah membuat tema anak . Jika Anda tidak memilikinya, Anda dapat menggunakan plugin. Ada beberapa di antaranya, jadi pilih saja yang paling Anda sukai dan pasang di toko Anda. Mengapa Anda harus menginstal tema anak? Karena jika Anda langsung menyesuaikan file tema, saat berikutnya Anda memperbarui tema, file baru akan menggantikan perubahan Anda dan semua penyesuaian Anda akan hilang. Namun, jika Anda menyesuaikan tema anak, modifikasi tidak akan diganti.

B) Sertakan file JavaScript (JS)

Dalam file functions.php dari tema anak, sertakan file JavaScript dengan menggunakan kait wp_enqueue_script . Ini adalah salah satu pengait paling populer yang ditawarkan WordPress untuk menyesuaikan situs web. Mari kita lihat skrip yang menyertakan file ajax_add_to_cart.js di bawah ini:

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

Dengan kondisi if (function_exists('is_product') && is_product()) di baris 2, Anda memastikan bahwa JQuery hanya diterapkan pada halaman produk.

C) Buat file JS

Setelah Anda selesai melakukannya, buat file yang Anda sertakan di langkah sebelumnya. Cukup buka cPanel Anda dan kemudian ke folder tema anak . Setelah itu, ikuti rute folder wp_content /themes/ . Di sana, buat folder baru di tema anak bernama js , lalu file di dalamnya dengan nama yang sama dengan yang Anda gunakan di hook ajax-add-to-cart.js . Ingatlah bahwa langkah ini juga berfungsi bahkan jika Anda menggunakan klien FTP. Jika tema anak Anda sudah memiliki folder JS, Anda dapat menggunakannya tanpa membuat yang baru.

D) File JQuery/JS

Langkah selanjutnya adalah mengerjakan file JQuery yang telah Anda unggah di tema anak Anda. File itu kosong sehingga Anda perlu menambahkan skrip. Pertama, cegah tombol tambahkan ke troli memuat ulang halaman dengan skrip berikut:

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

Harap dicatat bahwa kami menggunakan pemilih $('.single_add_to_cart_button') untuk memicu panggilan AJAX saat tombol diklik. Anda harus memahami ini karena semua skrip berikut akan masuk ke dalam fungsi ini.

E) JQuery WooCommerce AJAX tambahkan ke troli pada produk tunggal

Jadi skrip JQuery lengkap untuk AJAX add to cart pada produk tunggal adalah:

 jQuery(dokumen).siap(fungsi($) {
    $('.single_add_to_cart_button').on('click', function(e){ 
    e.preventDefault();
    $tombol ini = $(ini),
                $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() || Indo,
                variasi_id = $form.find('input[nama=variasi_id]').val() || 0;
    var data = {
            tindakan: 'ql_woocommerce_ajax_add_to_cart',
            id_produk: id_produk,
            produk_sku: '',
            kuantitas: produk_qty,
            variasi_id: variasi_id,
        };
    $.ajax({
            ketik: 'posting',
            url: wc_add_to_cart_params.ajax_url,
            data: data,
            beforeSend: fungsi (tanggapan) {
                $thisbutton.removeClass('ditambahkan').addClass('memuat');
            },
            lengkap: fungsi (respon) {
                $thisbutton.addClass('ditambahkan').removeClass('memuat');
            }, 
            sukses: fungsi (respon) { 
                if (respons.error & respons.product_url) {
                    window.location = response.product_url;
                    kembali;
                } kalau tidak { 
                    $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $thisbutton]);
                } 
            }, 
        }); 
     }); 
});

F) Skrip PHP

Setelah itu, Anda memerlukan penangan PHP. Cara terbaik adalah dengan menggunakan beberapa kait filter WooCommerce untuk membangun fungsi tambahkan ke troli Anda. Kali ini Anda akan melakukannya menggunakan AJAX. Cukup salin dan tempel skrip berikut di file functions.php dari tema anak di bawah skrip sebelumnya yang kami gunakan untuk menyertakan 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');          
fungsi ql_woocommerce_ajax_add_to_cart() {  
    $produk_id = apply_filters('ql_woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
    $jumlah = kosong($_POST['jumlah']) ? 1 : wc_stock_amount($_POST['jumlah']);
    $variation_id = absint($_POST['variation_id']);
    $passed_validation = apply_filters('ql_woocommerce_add_to_cart_validation', true, $product_id, $quantity);
    $produk_status = get_post_status($id_produk); 
    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity, $variation_id) && 'publish' === $product_status) { 
        do_action('ql_woocommerce_ajax_added_to_cart', $product_id);
            if ('ya' === get_option('ql_woocommerce_cart_redirect_after_add')) { 
                wc_add_to_cart_message(array($product_id => $quantity), benar); 
            } 
            WC_AJAX :: get_refreshed_fragments(); 
            } kalau tidak { 
                $data = larik( 
                    'kesalahan' => benar,
                    'product_url' => apply_filters('ql_woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id));
                echo wp_send_json($data);
            }
            wp_mati();
        }

Itu dia! Anda baru saja membuat tombol add to cart WooCommerce AJAX Anda! Tetapi bagaimana Anda tahu bahwa Anda telah melakukan semuanya dengan benar? Anda dapat memeriksanya dengan mudah. Ketika Anda mengklik tombol tambahkan ke troli , produk harus ditambahkan ke troli tanpa memuat ulang halaman.

Kesimpulan

Secara keseluruhan, jika Anda ingin mengoptimalkan toko Anda, fungsi add to cart WooCommerce AJAX adalah suatu keharusan. Cara mudah untuk menerapkannya adalah dengan menggunakan plugin AJAX add to cart WooCommerce. Namun, jika Anda memiliki keterampilan pengkodean, Anda dapat membuat kode AJAX tambahkan ke troli sendiri dengan tema anak dan sedikit PHP seperti yang dijelaskan di atas.

Kedua opsi tersebut sangat baik, jadi pilihlah yang lebih sesuai dengan kebutuhan dan keterampilan Anda. Ini akan membantu Anda meningkatkan pengalaman pengguna dan meningkatkan rasio konversi Anda. Beri tahu kami pendapat Anda di bagian komentar di bawah.

Terakhir, untuk panduan lebih lanjut tentang WooCommerce, kami sarankan Anda melihat panduan kami tentang cara menambahkan produk WooCommerce dan cara membuat atribut produk default di WooCommerce.