时间戳

首页 > 解决方案 > 基于开关切换在 WooCommerce Checkout 中添加自定义折扣

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

问题描述

这里的一般想法是添加一个可以切换的“开关”，如果它是由客户切换的，则给订单提供 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%;
}

基于在 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) );
}

这是它的外观： 在此处输入图像描述

标签： phpjqueryajaxwoocommercecheckout

解决方案

我重新审视了您的代码，因为缺少一些东西：

  • 复选框输入字段中缺少名称属性，
  • 来自 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 文件中。测试和工作。

推荐阅读