Bagaimana untuk Melaksanakan Pelarasan Yuran Dinamik Berdasarkan Pemilihan Butang Radio dalam WooCommerce Checkout?

Yuran Kemas Kini Secara Dinamik Berdasarkan Butang Radio dalam WooCommerce Checkout

Pengenalan

Tingkatkan pengalaman daftar keluar WooCommerce anda dengan mendayakan kemas kini yuran dinamik berdasarkan pemilihan butang radio . Ini membolehkan anda menawarkan pilihan pembungkusan dan bayaran yang berbeza, memenuhi pilihan pelanggan.

Pelaksanaan Kod

Laksanakan kod berikut dalam fail functions.php anda untuk mencapai fungsi yang diingini:

<code class="php">// Add a custom dynamic packaging fee
add_action( 'woocommerce_cart_calculate_fees', 'add_packaging_fee', 20, 1 );
function add_packaging_fee( $cart ) {
    if ( is_admin() &amp;&amp; ! defined( 'DOING_AJAX' ) )
        return;

    $packing_fee = WC()->session->get( 'chosen_packing' ); // Dynamic packing fee
    $fee = $packing_fee === 'box' ? 9.00 : 3.00;
    $cart->add_fee( __( 'Packaging fee', 'woocommerce' ), $fee );
}

// Add a custom radio fields for packaging selection
add_action( 'woocommerce_review_order_after_shipping', 'checkout_shipping_form_packing_addition', 20 );
function checkout_shipping_form_packing_addition() {
    $domain = 'woocommerce';

    echo '<tr class="packing-select"><th>' . __('Packing options', $domain) . '</th><td>';

    $chosen   = WC()->session->get('chosen_packing');
    $chosen   = empty($chosen) ? WC()->checkout->get_value('radio_packing') : $chosen;
    $chosen   = empty($chosen) ? 'bag' : $chosen;

    // Add a custom checkbox field
    woocommerce_form_field( 'radio_packing', array(
        'type' => 'radio',
        'class' => array( 'form-row-wide packing' ),
        'options' => array(
            'bag' => __('In a bag '.wc_price(3.00), $domain),
            'box' => __('In a gift box '.wc_price(9.00), $domain),
        ),
        'default' => $chosen,
    ), $chosen );

    echo '</td></tr>';
}</code>

JavaScript dan Skrip AJAX

Untuk memastikan kemas kini yang lancar semasa pemilihan butang radio, laksanakan JavaScript dan skrip AJAX ini:

<code class="javascript">// jQuery - Ajax script
add_action( 'wp_footer', 'checkout_shipping_packing_script' );
function checkout_shipping_packing_script() {
    if ( ! is_checkout() )
        return; // Only checkout page
    ?>
    <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

}

// Php Ajax (Receiving request and saving to WC session)
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>

Nota

• Pastikan kod ini ditambahkan pada tema kanak-kanak yang aktif atau terus ke fail functions.php tema anda.
• Kod yang disediakan menganggap pengguna tidak log masuk dan serasi dengan versi WooCommerce (3.7.x) terkini .
• Jika menghadapi sebarang isu, alih keluar semua penyesuaian sebelumnya yang berkaitan dengan butang radio dan pilihan pembungkusan.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Pelarasan Yuran Dinamik Berdasarkan Pemilihan Butang Radio dalam WooCommerce Checkout?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!