基于 Woocommerce 中的自定义单选按钮的动态运费

Posted

技术标签:

【中文标题】基于 Woocommerce 中的自定义单选按钮的动态运费【英文标题】:Dynamic shipping fee based on custom radio buttons in Woocommerce 【发布时间】:2019-01-04 14:21:06 【问题描述】:

在 Woocommerce 中,我在结帐页面上添加了两个自定义单选按钮,在点击时,我调用了一个 ajax 函数来添加运费。

这是我的代码:

$(document).on('change','#shipping_method_0_local_pickup5',function(e)               
            $('.woocommerce-shipping-fields').css(
                'display': 'none'
            );

                        $("#deli").css("display","block"); 
                        var selected = $("input[type='radio'][name='post-del']:checked");
                        var selectedVal = selected.val();               
                        var pickurl= "<?php echo admin_url('admin-ajax.php');?>?action=delivery";
                        $.ajax(   
                            url: pickurl,
                            type: "POST",
                            data:
                                input:selectedVal,                       
                            ,            
                            success: function(responseText) 
                             
                                jQuery(".order-total .woocommerce-Price-amount").html(responseText);
                                //$(".discount_code").css("display","block"); 
                            
                        ); 

        );

当单击单选按钮时,我想在我的总价中添加 2 美元的附加价格。

add_action( 'wp_ajax_delivery', 'delivery' );
add_action( 'wp_ajax_nopriv_delivery', 'delivery' );

function delivery()
      
    //My code  
    do_action( 'woocommerce_cart_calculate_fees', 'prefix_add_discount_line' ); // not working
    exit;

注意:这是更新代码的钩子

add_action( 'woocommerce_cart_calculate_fees', 'prefix_add_discount_line' );
function prefix_add_discount_line( $cart ) 

    $discount = $cart->subtotal + 2;

    $cart->add_fee( __( 'Delivery', 'yourtext-domain' ) , +$discount );


【问题讨论】:

【参考方案1】:

您应该在问题中提供所有必要的相关代码。请记住“寻求调试帮助的问题(“为什么这段代码不起作用?”)必须包括所需的行为、特定问题或错误以及在问题本身中重现它所需的最短代码强>".

因此,在下面的代码中,您将找到一个完整的工作解决方案,其中包含额外的自定义单选按钮,它将根据所选单选按钮和“本地取货”运输方式动态添加运费。

代码(您需要在其中定义目标“本地取货”方法 ID)

// Enabling delivery options for a specific defined shipping method
function targeted_shipping_method()
    // HERE below define the shipping method Id that enable the custom delivery options
    return 'local_pickup:5';


// Customizing Woocommerce checkout radio form field
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'] ) && 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;


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

    if (  WC()->session->get( 'chosen_shipping_methods' )[0] == targeted_shipping_method() ) :

        echo '<tr class="delivery-radio"><th>' . __('Delivery options', $domain) . '</th><td>';

        $chosen = WC()->session->get('chosen_delivery');
        $chosen = empty($chosen) ? WC()->checkout->get_value('delivery') : $chosen;
        $chosen = empty($chosen) ? 'regular' : $chosen;

        // Add a custom checkbox field
        woocommerce_form_field( 'radio_delivery', array(
            'type' => 'radio',
            'class' => array( 'form-row-wide' ),
            'options' => array(
                'regular' => __('Regular', $domain),
                'premium' => __('Premium +'.wc_price(2.00), $domain),
            ),
            'default' => $chosen,
        ), $chosen );

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

    endif;


// jQuery - Ajax script
add_action( 'wp_footer', 'checkout_delivery_script' );
function checkout_delivery_script() 
    // Only checkout page
    if ( ! is_checkout() ) return;
    ?>
    <script type="text/javascript">
    jQuery( function($)
        if (typeof wc_checkout_params === 'undefined')
            return false;

        $('form.checkout').on('change', 'input[name=radio_delivery]', function(e)
            e.preventDefault();
            var d = $(this).val();
            $.ajax(
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: 
                    'action': 'delivery',
                    'delivery': d,
                ,
                success: function (result) 
                    $('body').trigger('update_checkout');
                    console.log(result); // just for testing | TO BE REMOVED
                ,
                error: function(error)
                    console.log(error); // just for testing | TO BE REMOVED
                
            );
        );
    );
    </script>
    <?php



// Get Ajax request and saving to WC session
add_action( 'wp_ajax_delivery', 'wc_get_delivery_ajax_data' );
add_action( 'wp_ajax_nopriv_delivery', 'wc_get_delivery_ajax_data' );
function wc_get_delivery_ajax_data() 
    if ( isset($_POST['delivery']) )
        WC()->session->set('chosen_delivery', sanitize_key( $_POST['delivery'] ) );
        echo json_encode( $delivery ); // Return the value to jQuery
    
    die();


// Add a custom dynamic delivery fee
add_action( 'woocommerce_cart_calculate_fees', 'add_packaging_fee', 20, 1 );
function add_packaging_fee( $cart ) 
    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
        return;

    // Only for targeted shipping method
    if (  WC()->session->get( 'chosen_shipping_methods' )[0] != targeted_shipping_method() )
        return;

    if( WC()->session->get( 'chosen_delivery' ) == 'premium' )
        $cart->add_fee( __( 'Delivery fee', 'woocommerce' ), 2.00 );

代码进入您的活动子主题(或活动主题)的 function.php 文件中。经过测试并且可以工作。

【讨论】:

是的,先生,我赞成您的回答。你的话意义重大

以上是关于基于 Woocommerce 中的自定义单选按钮的动态运费的主要内容,如果未能解决你的问题,请参考以下文章

基于产品类型的 WooCommerce 的“添加到购物车”按钮旁边的自定义按钮

基于产品类型的 WooCommerce 的“添加到购物车”按钮旁边的自定义按钮

将基于 ACF 字段的自定义“添加到购物车”按钮添加到 WooCommerce 单品页面

Woocommerce 3 中的自定义加减数量按钮

通过 WooCommerce 产品设置中的自定义复选框禁用添加到购物车按钮

用 WooCommerce 中的自定义数量输入字段替换“添加到购物车”