Bagaimana Mengemas kini Yuran Secara Dinamik Berdasarkan Pilihan Pengguna dalam WooCommerce Checkout?

Kemas Kini Yuran Dinamik Berdasarkan Pemilihan Butang Radio dalam WooCommerce Checkout

Apabila membangunkan pemalam WooCommerce, selalunya perlu menambah yuran dinamik kepada proses pembayaran. Satu contoh biasa ialah menawarkan pilihan pembungkusan yang berbeza dengan kos yang berbeza-beza, seperti beg plastik atau kotak hadiah. Artikel ini meneroka cara terbaik untuk mencapai perkara ini dan menangani pertimbangan keselamatan.

Penambahan Yuran Dinamik Menggunakan WC_Cart

<code class="php">function at87_add_custom_fees( WC_Cart $cart ){
    $fees = 3; // fee amount
    $fees = isset($_GET['test']) ? $_GET['test'] : 3;

    $cart->add_fee( 'Emballagegebyr', intval($fees));
}</code>

Kod ini menambahkan yuran pada troli berdasarkan dinamik pada nilai yang diperoleh daripada $_GET['test'], yang boleh diubah suai menggunakan JavaScript atau permintaan Ajax. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa menggunakan $_GET adalah tidak selamat dan harus digunakan dengan berhati-hati.

Penyelesaian Berasaskan AJAX

Pendekatan yang lebih selamat dan dinamik adalah untuk gunakan AJAX untuk mengemas kini yuran. Kod berikut menyediakan penyelesaian lengkap:

<code class="php">// Ajax script
add_action( 'wp_footer', 'checkout_shipping_packing_script' );
function checkout_shipping_packing_script() {
    if ( ! is_checkout() )
        return;

    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('form.checkout').on('change', 'input[name=radio_packing]', function(e){
            e.preventDefault();
            var p = $(this).val();
            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'woo_get_ajax_data',
                    'packing': p,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                    console.log('response: '+result); // just for testing | TO BE REMOVED
                },
                error: function(error){
                    console.log(error); // just for testing | TO BE REMOVED
                }
            });
        });
    });
    </script>
    <?php }

// Ajax request handler
add_action( 'wp_ajax_woo_get_ajax_data', 'woo_get_ajax_data' );
add_action( 'wp_ajax_nopriv_woo_get_ajax_data', 'woo_get_ajax_data' );
function woo_get_ajax_data() {
    if ( isset($_POST['packing']) ){
        $packing = sanitize_key( $_POST['packing'] );
        WC()->session->set('chosen_packing', $packing );
        echo json_encode( $packing );
    }
    die(); // Alway at the end (to avoid server error 500)
}</code>

Kod ini menggunakan Ajax untuk menghantar pilihan pembungkusan yang dipilih ke pelayan, yang kemudiannya menyimpannya dalam sesi WooCommerce. Pembayaran dikemas kini secara dinamik tanpa memerlukan muat semula halaman.

Kesimpulan

Pendekatan berasaskan Ajax menyediakan kaedah yang selamat dan cekap untuk mengemas kini yuran secara dinamik berdasarkan pengguna pilihan dalam proses pembayaran WooCommerce. Ia menghapuskan keperluan untuk $_GET dan memastikan pengalaman daftar keluar yang lancar dan selamat.

Atas ialah kandungan terperinci Bagaimana Mengemas kini Yuran Secara Dinamik Berdasarkan Pilihan Pengguna dalam WooCommerce Checkout?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!