Rumah > pembangunan bahagian belakang > tutorial php > Bagaimana untuk melaksanakan Yuran Dinamik Berdasarkan Pemilihan Butang Radio dalam WooCommerce Checkout?

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

Mary-Kate Olsen
Lepaskan: 2024-10-20 17:55:31
asal
592 orang telah melayarinya

How to implement a Dynamic Fee Based on Radio Button Selection in 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;
}
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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

}
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan