WooCommerce Checkout에서 라디오 버튼 선택을 기반으로 동적 수수료 조정을 구현하는 방법은 무엇입니까?

WooCommerce Checkout의 라디오 버튼을 기반으로 동적으로 수수료 업데이트

소개

라디오 버튼 선택에 따라 동적 수수료 업데이트를 활성화하여 WooCommerce 결제 경험을 향상하세요. . 이를 통해 고객의 선호도에 맞춰 다양한 포장 옵션과 수수료를 제공할 수 있습니다.

코드 구현

원하는 기능을 얻으려면 function.php 파일에 다음 코드를 구현하세요.

<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 및 AJAX 스크립트

라디오 버튼 선택 시 원활한 업데이트를 보장하려면 다음 JavaScript 및 AJAX 스크립트를 구현하세요.

<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>

Notes

• 이 코드가 활성 하위 테마에 추가되거나 테마의 function.php 파일에 직접 추가되었는지 확인하세요.
• 제공된 코드는 로그인하지 않은 사용자를 고려하며 최신 WooCommerce 버전(3.7.x)과 호환됩니다. .
• 문제가 발생하면 라디오 버튼 및 포장 옵션과 관련된 이전 사용자 정의를 모두 제거하세요.

위 내용은 WooCommerce Checkout에서 라디오 버튼 선택을 기반으로 동적 수수료 조정을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!