在 Woocommerce 结帐页面中显示一个添加费用的复选框 [英] Display a checkbox that add a fee in Woocommerce checkout page

问题描述

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

In Woocommerce checkout page, I'am trying to add a check box on checkout page

我参考了这些文章

woocommerce 自定义结帐字段以添加订单费用阿贾克斯

添加/删除自定义费用的复选框字段在 WooCommerce 中

添加结帐复选框字段在 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;
}

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

It does not work as I would like. What I am doing wrong?

感谢任何帮助.

推荐答案

您确实需要将 Wordpress Ajax 与 WC_sessions 结合使用，以使其像 "添加在 Woocommerce 中启用百分比费用的结帐复选框字段" answer线程.

You really need to use Wordpress Ajax with WC_sessions to make it work like in "Add a checkout checkbox field that enable a percentage fee in Woocommerce" answer thread.

这是您重新访问的代码:

Here is your revisited code:

// 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 版和店面主题上进行测试和工作.

Code goes in functions.php file of your active child theme (or active theme). Tested and works on Woocommerce version 3.6.5 with Storefront theme.

这篇关于在 Woocommerce 结帐页面中显示一个添加费用的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！