根据切换开关在WooCommerce Checkout中添加自定义折扣 [英] Add Custom discount in WooCommerce Checkout based on a switch toggle

问题描述

此处的总体思路是添加一个"switch"开关.可以进行切换，如果客户进行了切换，则订单将获得5％的折扣.

这发生在WooCommerce结帐页面上.

我拥有CSS样式和整体功能，而且看起来都很不错-但是打开/关闭开关时什么也没发生.

预期输出:客户拨动开关并给予5％的折扣.如果客户将开关拨回，则折扣将被消除.

CSS代码:

  .switch-toggle-wrapper {边距:40px 0px 40px 0px;}.转变 {职位:相对显示:inline-block;宽度:60像素；高度:34像素；}.switch输入{不透明度:0；宽度:0;高度:0；}.slider {位置:绝对；光标:指针；最高:0;左:0；正确:0；底部:0;背景颜色:#ccc;-webkit-transition:.4s;过渡:.4s；}.slider:之前{位置:绝对；内容:"；高度:26像素；宽度:26像素；左:4px；底部:4px；背景颜色:白色；-webkit-transition:.4s;过渡:.4s；}输入:已选中+ .slider {背景颜色:#2196F3;}输入:focus + .slider {框阴影:0 0 1px#2196F3;}输入:选中+ .slider:之前{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);转换:translateX(26px);}.slider.round {border-radius:34px;}.slider.round:之前{边界半径:50％；} 

基于

解决方案

由于有些遗漏之处，我再次回顾了您的代码:

• 复选框输入字段中缺少名称属性，
• Ajax接收器部分的复合钩子上的Ajax操作名称错误.

使用以下内容:

 //显示字段add_action('woocommerce_review_order_before_payment'，'switch_toggle_fee_on_checkout'，20);函数switch_toggle_fee_on_checkout(){echo'< div class ='switch-toggle-wrapper'>< span>'.__(要增加公司折扣，请切换此开关."，"woocommerce").'</span><标签类=开关"><输入类型=复选框"；名称="company_discount"；id ="company_discount">< span class =滑块圆"</span></label></div>';}//jQuery Ajax发送者函数add_action('wp_footer'，'checkout_toggle_discount_script');函数checkout_toggle_discount_script(){if(is_checkout()&&！is_wc_endpoint_url()):if(WC()-> session-> __ isset('enable_discount')){WC()->会话-> __ unset('enable_discount');}?>< script type =文本/javascript">jQuery(函数($){如果(typeof wc_checkout_params ==='未定义')返回false；$('form.checkout').on('change'，'input [name ='"company_discount"]]'，function(){console.log('toggle');var toggle = $(this).prop('checked')=== true吗?'1':'0';$ .ajax({输入:"POST"，网址:wc_checkout_params.ajax_url，数据: {'action':'enable_discount'，'discount_toggle':切换，}，成功:功能(结果){$('body').trigger('update_checkout');}，});});});</script><?php万一;}//Ajax接收器:设置WC_Session变量add_action('wp_ajax_enable_discount'，'checkout_enable_discount_ajax');add_action('wp_ajax_nopriv_enable_discount'，'checkout_enable_discount_ajax');函数checkout_enable_discount_ajax(){如果(isset($ _ POST ['discount_toggle'])){WC()->会话-> set('enable_discount'，esc_attr($ _ POST ['discount_toggle'])?true:false);回声esc_attr($ _ POST ['discount_toggle']);}wp_die();}//设置折扣add_action('woocommerce_cart_calculate_fees'，'checkout_set_discount'，20，1);函数checkout_set_discount($ cart){if((is_admin()&&！defined('DOING_AJAX'))||！is_checkout())返回;$ subtotal = WC()->购物车-> get_subtotal();$％= 5;$折扣= $小计* $百分比/100;//如果在切换开关时提供5％的折扣if(WC()-> session-> get('enable_discount')){$ cart-> add_fee(sprintf(__('Company Discount(％s)'，'woocommerce')，$ percentage.'％')，-$ discount);}} 

代码进入活动子主题(或活动主题)的functions.php文件中.经过测试，可以正常工作.

The general idea here is to add a "switch" that can be toggled and if it is toggled, by the customer, a discount of 5% is given to the order.

This happens on the WooCommerce checkout page.

I have the CSS style and the overall functionality and it all looks great - but nothing happens when the switch is toggled on / off.

Expected output: Customer toggles the switch and a discount of 5% is given. If the customer toggles the switch back, the discount is removed.

CSS code:

.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%;
}

Based on Add a checkout checkbox field that enable a percentage fee in Woocommerce answer, here is the code I am using:

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) );
}

This is how it looks:

解决方案

I have revisited your code a bit as there was some missing things:

• The name attribute was missing from checkbox input field,
• The Ajax action name was wrong on the composite hook from the Ajax receiver part.

Use the following:

// 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 );
    }
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.

这篇关于根据切换开关在WooCommerce Checkout中添加自定义折扣的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！