問題描述

在 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 結帳頁面中顯示一個添加費用的復選框的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！