Cara Melaksanakan Butang \"Beli Sekarang\" WooCommerce AJAX Direct

Apabila anda menjalankan kedai dalam talian menggunakan WooCommerce, menjadikan proses pembelian selancar mungkin adalah penting. Satu cara yang berkesan untuk melakukan ini ialah dengan menambahkan butang "Beli Sekarang" yang membolehkan pelanggan membeli produk secara terus tanpa menavigasi berbilang halaman. Blog ini akan membimbing anda membuat butang "Beli Sekarang" WooCommerce AJAX menggunakan coretan kod yang disediakan.

Langkah 1: Tambah Butang "Beli Sekarang".

Pertama, anda perlu menambah butang "Beli Sekarang" tersuai pada halaman produk WooCommerce anda. Kami akan melakukan ini dengan menyambung ke dalam tindakan woocommerce_after_add_to_cart_button, yang meletakkan butang kami betul-betul selepas butang "Tambah ke Troli" standard.

Berikut ialah coretan kod PHP:

add_action( 'woocommerce_after_add_to_cart_button', 'add_content_after_addtocart' );
function add_content_after_addtocart() {
    $current_product_id = get_the_ID();
    $product = wc_get_product( $current_product_id );

    if( $product->is_type( 'simple' ) ){
        echo '<button data-id="'.$current_product_id.'" class="buy-now button"><i class="matico-icon-toys"></i>'.__('Buy Now', 'woocommerce').'</button>';
    }
}

Penjelasan:

• Kami menggunakan cangkuk woocommerce_after_add_to_cart_button untuk memasukkan butang "Beli Sekarang" kami sejurus selepas butang "Tambah ke Troli".
• Fungsi get_the_ID() mendapatkan semula ID produk semasa dan wc_get_product() mendapat butiran produk.
• Kami menyemak sama ada produk adalah jenis mudah dan kemudian menjadikan butang dengan atribut data-id dan ikon tersuai yang sesuai.

Langkah 3: Enqueque Skrip

Seterusnya, anda perlu menyusun skrip dalam tema anda untuk memastikan ia dimuatkan dengan betul pada halaman WooCommerce anda. Begini caranya:

wp_enqueue_script('matico-child-script', get_stylesheet_directory_uri() . '/assets/js/script.js', array( 'jquery', 'scrollfix-script' ),  $matico_version, true);

wp_localize_script( 'matico-child-script', 'matico_child_script_obj',
    array( 
        'checkout_page_url' => wc_get_checkout_url(),
    )
);

Penjelasan:

• wp_enqueue_script() digunakan untuk memuatkan fail skrip tersuai kami (script.js), yang mengandungi kod jQuery.
• wp_localize_script() menghantar data PHP ke skrip, seperti URL halaman pembayaran, membenarkan kami menggunakannya dalam skrip.

Langkah 2: Kendalikan Permintaan AJAX

Akhir sekali, kami akan mengendalikan acara klik butang menggunakan jQuery. Skrip jQuery menghantar permintaan AJAX ke WooCommerce, yang menambahkan produk pada troli dan kemudian mengubah hala pengguna terus ke halaman pembayaran.

Berikut ialah coretan kod jQuery:

(function ($) {
    var MaticoChildThemeConfig = {
        init: function () {
            this.bindEvents();
        },
        bindEvents: function () {
            $(document).on('click', '.buy-now', this.handleBuyNowClick);
        },
        handleBuyNowClick: function (event) {
            event.preventDefault();

            var $button = $(this),
                quantity = parseFloat($button.closest('.quantity').find('.qty').val()) || 1,
                productID = $button.data('id');

            var data = {
                product_id: productID,
                quantity: quantity,
            };

            $.ajax({
                type: 'POST',
                url: wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'),
                data: data,
                dataType: 'json',
                beforeSend: function () {
                    $button.addClass('loading');
                },
                success: function (res) {
                    if (res.error && res.product_url) {
                        window.location.href = res.product_url;
                    } else {
                        window.location.href = matico_child_script_obj.checkout_page_url;
                    }
                }
            });
        }
    };

    MaticoChildThemeConfig.init();
})(jQuery);

Penjelasan:

• Apabila butang "Beli Sekarang" diklik, kami menghalang tindakan lalai untuk mengelakkan muat semula halaman.
• Kami mengumpulkan ID produk dan kuantiti dari halaman produk semasa.
• Permintaan AJAX dihantar ke titik akhir add_to_cart WooCommerce, yang menambahkan produk pada troli.
• Jika produk berjaya ditambahkan, kami mengubah hala pengguna ke halaman pembayaran. Jika terdapat ralat (cth., produk tidak lagi tersedia), pengguna dialihkan ke halaman produk.

Kesimpulan

Dengan melaksanakan langkah di atas, anda boleh membuat butang "Beli Sekarang" yang menyelaraskan proses pembelian untuk pelanggan anda. Ciri ini amat berguna dalam meningkatkan penukaran dengan mengurangkan bilangan klik dan halaman yang pelanggan perlu menavigasi sebelum menyelesaikan pembelian.

Atas ialah kandungan terperinci Cara Melaksanakan Butang \"Beli Sekarang\" WooCommerce AJAX Direct. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!