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

Yuran Dinamik Berdasarkan Pemilihan Butang Radio dalam WooCommerce Checkout

Untuk melaksanakan yuran dinamik berdasarkan pemilihan butang radio dalam pembayaran WooCommerce, langkah berikut disyorkan:

Menyesuaikan Medan Borang Radio

Kemas kini tindakan woocommerce_form_field_radio untuk mengubah suai medan borang butang radio. Ini boleh meningkatkan pengalaman pengguna dengan memastikan bahawa label dipaparkan sebaris.

<code class="php">add_action( 'woocommerce_form_field_radio', 'custom_form_field_radio', 20, 4 );
function custom_form_field_radio( $field, $key, $args, $value ) {
    if ( ! empty( $args['options'] ) &amp;&amp; is_checkout() ) {
        $field = str_replace( '</label><input ', '</label><br><input ', $field );
        $field = str_replace( '<label ', '<label style="display:inline;margin-left:8px;" ', $field );
    }
    return $field;
}

Menambah Yuran Pembungkusan Tersuai

Lampirkan pada woocommerce_cart_calculate_fees untuk menambah yuran pembungkusan dinamik. Ia menyemak pilihan pembungkusan yang dipilih dalam sesi dan mengenakan yuran yang sesuai.

<code class="php">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 );
}</code>

Menambah Medan Butang Radio

Sambung ke woocommerce_review_order_after_shipping untuk menambah medan butang radio tersuai untuk pemilihan pembungkusan.

<code class="php">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>

jQuery dan Skrip Ajax

Skrip ini mengendalikan fungsi Ajax untuk mengemas kini yuran pada pemilihan butang radio.

<code class="php">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

}

Fungsi Ajax PHP

Fungsi ini memproses permintaan Ajax, menyimpan pilihan pembungkusan yang dipilih dan mengembalikannya.

<code class="php">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>

Penyelesaian ini menggunakan jQuery, Ajax, dan fungsi WooCommerce tersuai untuk mengemas kini yuran secara dinamik berdasarkan pemilihan butang radio, memastikan pengalaman pengguna yang lancar semasa pembayaran.

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