【问题标题】:Display a checkbox that add a fee in Woocommerce checkout page在 Woocommerce 结帐页面中显示一个添加费用的复选框
【发布时间】:2019-12-28 00:20:11
【问题描述】:

在 Woocommerce 结帐页面中,我正在尝试在结帐页面上添加一个复选框

我参考过这些文章

woocommerce custom checkout field to add fee to order ajax

Checkbox field that add / remove a custom fee in WooCommerce

Add a checkout checkbox field that enable a percentage fee in Woocommerce

add_action( 'woocommerce_review_order_before_order_total', 'checkout_shipping_form_packing_addition', 20 );
function checkout_shipping_form_packing_addition( ){
echo '<tr class="packing-select"><th>';
woocommerce_form_field( 'add_gift_box', array(
    'type'          => 'checkbox',
    'class'         => array('add_gift_box form-row-wide'),
    'label'         => __('Hỗ trợ cài đặt'),
    'placeholder'   => __(''),
    ));
echo '</th><td>';}

add_action( 'wp_footer', 'woocommerce_add_gift_box' );
function woocommerce_add_gift_box() {
if (is_checkout()) {
?>
<script type="text/javascript">
jQuery( document ).ready(function( $ ) {
    $('#add_gift_box').click(function(){
        jQuery('body').trigger('update_checkout');
    });
});
</script>
<?php
}}
add_action( 'woocommerce_cart_calculate_fees', 'woo_add_cart_fee' );
function woo_add_cart_fee( $cart ){
    if ( ! $_POST || ( is_admin() && ! is_ajax() ) ) {
    return;
}

if ( isset( $_POST['post_data'] ) ) {
    parse_str( $_POST['post_data'], $post_data );
} else {
    $post_data = $_POST; // fallback for final checkout (non-ajax)
}

if (isset($post_data['add_gift_box'])) {
    $sl = WC()->cart->get_cart_contents_count();
    $extracost = 50000 * $sl; // not sure why you used intval($_POST['state']) ?
    WC()->cart->add_fee( 'Hỗ trợ cài đặt x '.$sl.'', $extracost );
}}
add_filter( 'woocommerce_form_field' , 'remove_order_comments_optional_fields_label', 10, 4 );
function remove_order_comments_optional_fields_label( $field, $key, $args, $value ) {
// Only on checkout page for Order notes field
if( 'add_gift_box' === $key && is_checkout() ) {
    $optional = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
    $field = str_replace( $optional, '', $field );
}
return $field;
}

它不像我想的那样工作。我做错了什么?

感谢任何帮助。

【问题讨论】:

    标签: php jquery ajax woocommerce checkout


    【解决方案1】:

    您确实需要将 Wordpress Ajax 与 WC_sessions 一起使用,以使其像 "Add a checkout checkbox field that enable a percentage fee in Woocommerce" 回答线程中那样工作。

    这是您重新访问的代码:

    // Display the custom checkbow field in checkout
    add_action( 'woocommerce_review_order_before_order_total', 'fee_installment_checkbox_field', 20 );
    function fee_installment_checkbox_field(){
        echo '<tr class="packing-select"><th>';
    
        woocommerce_form_field( 'installment_fee', array(
            'type'          => 'checkbox',
            'class'         => array('installment-fee form-row-wide'),
            'label'         => __('Support installation'),
            'placeholder'   => __(''),
        ), WC()->session->get('installment_fee') ? '1' : '' );
    
        echo '</th><td>';
    }
    
    // jQuery - Ajax script
    add_action( 'wp_footer', 'checkout_fee_script' );
    function checkout_fee_script() {
        // Only on Checkout
        if( is_checkout() && ! is_wc_endpoint_url() ) :
    
        if( WC()->session->__isset('installment_fee') )
            WC()->session->__unset('installment_fee')
        ?>
        <script type="text/javascript">
        jQuery( function($){
            if (typeof wc_checkout_params === 'undefined')
                return false;
    
            $('form.checkout').on('change', 'input[name=installment_fee]', function(){
                var fee = $(this).prop('checked') === true ? '1' : '';
    
                $.ajax({
                    type: 'POST',
                    url: wc_checkout_params.ajax_url,
                    data: {
                        'action': 'installment_fee',
                        'installment_fee': fee,
                    },
                    success: function (result) {
                        $('body').trigger('update_checkout');
                    },
                });
            });
        });
        </script>
        <?php
        endif;
    }
    
    // Get Ajax request and saving to WC session
    add_action( 'wp_ajax_installment_fee', 'get_installment_fee' );
    add_action( 'wp_ajax_nopriv_installment_fee', 'get_installment_fee' );
    function get_installment_fee() {
        if ( isset($_POST['installment_fee']) ) {
            WC()->session->set('installment_fee', ($_POST['installment_fee'] ? true : false) );
        }
        die();
    }
    
    
    // Add a custom calculated fee conditionally
    add_action( 'woocommerce_cart_calculate_fees', 'set_installment_fee' );
    function set_installment_fee( $cart ){
        if ( is_admin() && ! defined('DOING_AJAX') || ! is_checkout() )
            return;
    
        if ( did_action('woocommerce_cart_calculate_fees') >= 2 )
            return;
    
        if ( 1 == WC()->session->get('installment_fee') ) {
            $items_count = WC()->cart->get_cart_contents_count();
            $fee_label   = sprintf( __( "Support installation %s %s" ), '&times;', $items_count );
            $fee_amount  = 50000 * $items_count;
            WC()->cart->add_fee( $fee_label, $fee_amount );
        }
    }
    
    add_filter( 'woocommerce_form_field' , 'remove_optional_txt_from_installment_checkbox', 10, 4 );
    function remove_optional_txt_from_installment_checkbox( $field, $key, $args, $value ) {
        // Only on checkout page for Order notes field
        if( 'installment_fee' === $key && is_checkout() ) {
            $optional = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
            $field = str_replace( $optional, '', $field );
        }
        return $field;
    }
    

    代码在您的活动子主题(或活动主题)的functions.php 文件中。经过测试并在 Woocommerce 版本 3.6.5 上使用 Storefront 主题。

    【讨论】:

    • 如何去除购物车页面的费用
    • @LêNghĩa 我已经更新了这行if ( is_admin() &amp;&amp; ! defined('DOING_AJAX') || ! is_checkout() ),所以知道费用只会在结帐页面中应用。
    • 您好,非常感谢,您能做同样的事情,但只针对购物车页面吗?我的意思是当你点击复选框时添加一个费用,当你点击复选框时添加一个奉献信息,如果它太复杂,有没有插件可以做到这一点?
    • @LoicTheAztec 感谢这个伟大的代码!关于在加载时检查该选项的任何见解?
    猜你喜欢
    • 2020-05-11
    • 1970-01-01
    • 2019-08-26
    • 2018-08-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-23
    • 2020-07-15
    相关资源
    最近更新 更多