基于开关切换在 WooCommerce Checkout 中添加自定义折扣

Question

这里的总体思路是添加一个可以切换的“开关”，如果它被客户切换，订单将获得 5% 的折扣。

这发生在 WooCommerce 结帐页面上。

我有 CSS 风格和整体功能，一切看起来都很棒 - 但当开关打开/关闭时没有任何反应。

预期输出： 客户拨动开关并给予 5% 的折扣。如果客户将开关拨回，折扣将被取消。

CSS代码：

.switch-toggle-wrapper{
margin: 40px 0px 40px 0px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

根据 Add a checkout checkbox field that enable a percentage fee in Woocommerce 的回答，这是我正在使用的代码：

add_action( 'woocommerce_review_order_before_payment', 'switch_toggle_fee_on_checkout', 20 );
function switch_toggle_fee_on_checkout() { ?>

    <div class="switch-toggle-wrapper">
    <span>To add the company discount, toggle this switch. </span>
    <label class="switch">
  
        <input id="company_discount" type="checkbox">
  
        <span class="slider round"></span>
    </label>
    </div>

<?php
}

add_action( 'wp_footer', 'checkout_company_discount_script' );
function checkout_company_discount_script() {

    if( is_checkout() && ! is_wc_endpoint_url() ) :

    if( WC()->session->__isset('enable_discount') )
        WC()->session->__unset('enable_discount')

    ?>
    
    <script type="text/javascript">
    
        jQuery( function($){
        
            if (typeof wc_checkout_params === 'undefined') 
            
                return false;

        $('form.checkout').on('change', 'input[name=company_discount]', function(e){
            var fee = $(this).prop('checked') === true ? '1' : '';

            $.ajax( {
                
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'enable_discount',
                    'enable_discount': fee,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                },
            });
        });
    });

    </script>

    <?php
    endif;
}

add_action( 'wp_ajax_enable_fee', 'checkout_company_discount_ajax' );
add_action( 'wp_ajax_nopriv_enable_fee', 'checkout_company_discount_ajax' );
function checkout_company_discount_ajax() {

    if ( isset($_POST['enable_discount']) ) {

        WC()->session->set('enable_discount', ($_POST['enable_discount'] ? true : false) );
    }
    die();
}

add_action( 'woocommerce_cart_calculate_fees', 'checkout_company_discount', 20, 1 );
function checkout_company_discount( $cart ) {

    if ( ( is_admin() && ! defined( 'DOING_AJAX' ) ) || ! is_checkout() )

        return;

    $subtotal = WC()->cart->get_subtotal();
    $company_discount = $subtotal * 0.05; // give 5% discount if and when the switch is toggled 

    if( WC()->session->get('enable_discount') )
    
        $cart->add_fee( __( 'Company Discount', 'woocommerce')." (-$company_discount%)", ($company_discount) );
}

它是这样的：

Answer 1

我已经重新访问了你的代码，因为有一些遗漏的东西：

复选框输入字段中缺少名称属性，
来自 Ajax 接收器部分的复合挂钩上的 Ajax 动作名称错误。

使用以下内容：

// Display the field
add_action( 'woocommerce_review_order_before_payment', 'switch_toggle_fee_on_checkout', 20 );
function switch_toggle_fee_on_checkout() {

    echo '<div class="switch-toggle-wrapper">
    <span>' . __("To add the company discount, toggle this switch.", "woocommerce") . ' </span>
    <label class="switch">
        <input type="checkbox" name="company_discount" id="company_discount">
        <span class="slider round"></span>
    </label>
    </div>';
}

// jQuery Ajax sender function
add_action( 'wp_footer', 'checkout_toggle_discount_script' );
function checkout_toggle_discount_script() {
    if( is_checkout() && ! is_wc_endpoint_url() ) :

    if( WC()->session->__isset('enable_discount') ) {
        WC()->session->__unset('enable_discount');
    }
    ?>
    <script type="text/javascript">
    jQuery( function($){
        if (typeof wc_checkout_params === 'undefined')
            return false;

        $('form.checkout').on('change', 'input[name="company_discount"]', function(){
            console.log('toggle');
            var toggle = $(this).prop('checked') === true ? '1' : '0';
            $.ajax( {
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'enable_discount',
                    'discount_toggle': toggle,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                },
            });
        });
    });
    </script>
    <?php
    endif;
}

// Ajax receiver: Set a WC_Session variable
add_action( 'wp_ajax_enable_discount', 'checkout_enable_discount_ajax' );
add_action( 'wp_ajax_nopriv_enable_discount', 'checkout_enable_discount_ajax' );
function checkout_enable_discount_ajax() {
    if ( isset($_POST['discount_toggle']) ) {
        WC()->session->set('enable_discount', esc_attr($_POST['discount_toggle']) ? true : false );
        echo esc_attr($_POST['discount_toggle']);
    }
    wp_die();
}

// Set the discount
add_action( 'woocommerce_cart_calculate_fees', 'checkout_set_discount', 20, 1 );
function checkout_set_discount( $cart ) {
    if ( ( is_admin() && ! defined('DOING_AJAX') ) || ! is_checkout() )
        return;

    $subtotal   = WC()->cart->get_subtotal();
    $percentage = 5;
    $discount   = $subtotal * $percentage / 100; 

    // Give 5% discount if and when the switch is toggled
    if( WC()->session->get('enable_discount') ) {
        $cart->add_fee( sprintf( __( 'Company Discount (%s)', 'woocommerce'), $percentage .'%' ), -$discount );
    }
}

代码进入活动子主题（或活动主题）的 functions.php 文件。已测试并有效。

基于开关切换在 WooCommerce Checkout 中添加自定义折扣

Add Custom discount in WooCommerce Checkout based on a switch toggle

php

ajax

jquery

checkout

woocommerce