以下是使用 Ajax 和 WC 会话的高级功能:
它将根据选定的单选按钮选项添加自定义提示(作为自定义费用):固定百分比选项或自定义选项,将显示文本字段以允许客户输入固定金额。
显示的字段是手动编码的,以便比 WooCommerce 表单字段更好地显示单选按钮(请参阅下面的屏幕截图)。
它对客户的作用:
在结帐页面加载时,将应用 5% 的小费(收费)(默认选择)。将所选选项更改为其他选项时,应用的费用会发生变化。
如果选择了“自定义”选项,则会在下方显示文本字段时移除费用:
客户可以输入固定金额,然后根据该金额应用提示(费用)。
代码如下:
// Display custom checkout fields
add_action( 'woocommerce_after_checkout_billing_form', 'add_box_option_to_checkout' );
function add_box_option_to_checkout( ) {
// Here set your radio button options (Values / Labels pairs)
$options = array( '5' => '5%', '10' => '10%', '15' => '15%', 'custom' => __('Custom', 'woocommerce') );
// Radio button fields
echo '<style> #add_tip_field.form-row label { display:inline-block; margin-left:6px; } </style>
<p class="form-row form-row-wide" id="add_tip_field"><span class="woocommerce-input-wrapper">
<label for="add_tip"><strong>'.__('Add a tip', 'woocommerce'). ':</strong> </label>';
foreach ( $options as $value => $label_name ) {
$checked = $value == '5' ? ' checked="checked"' : '';
echo '<label for="add_tip_'.$value.'" class="radio ">
<input type="radio" class="input-radio " value="'.$value.'" name="add_tip" id="add_tip_'.$value.'"'.$checked.'> '.$label_name.'
</label>';
}
echo '</span></p>';
// Text field (hidden by default)
echo '<p class="form-row form-row-wide" id="custom_tip_field" style="display:none""><span class="woocommerce-input-wrapper">
<input type="text" class="input-text " name="custom_tip" id="custom_tip" value="" placeholder="'.__('Input a tip amount', 'woocommerce').'">
</span></p>';
}
// jQuery / Ajax script
add_action( 'woocommerce_after_checkout_form', 'wc_checkout_fee_script' );
function wc_checkout_fee_script() {
?>
<script type="text/javascript">
jQuery( function($){
if (typeof wc_checkout_params === 'undefined')
return false;
var addTip = 'input[name="add_tip"]',
customTip = 'input[name="custom_tip"]'
function triggerAjaxEvent( amount, type = 'percent' ){
$.ajax({
type: 'POST',
url: wc_checkout_params.ajax_url,
data: {
'action': 'tip_fee',
'amount': amount,
'type' : type
},
success: function (result) {
$(document.body).trigger('update_checkout');
console.log(result);
},
});
}
triggerAjaxEvent( $(addTip+':checked').val() );
$('form.checkout').on('change', addTip, function() {
var textField = $('#custom_tip_field'),
percent = $(this).val();
if( percent === 'custom' && textField.css('display') === 'none' ) {
textField.show(200);
} else if ( percent !== 'custom' && textField.css('display') !== 'none' ) {
textField.hide(200, function(){
$(customTip).val('');
});
}
triggerAjaxEvent( percent );
});
$('form.checkout').on('input change', customTip, function() {
triggerAjaxEvent( $(this).val(), 'custom' );
});
});
</script>
<?php
}
// Get Ajax request and save data to WC session
add_action( 'wp_ajax_tip_fee', 'get_tip_fee' );
add_action( 'wp_ajax_nopriv_tip_fee', 'get_tip_fee' );
function get_tip_fee() {
if ( isset($_POST['amount']) && isset($_POST['type']) ) {
$fee = is_numeric($_POST['amount']) && $_POST['amount'] > 0 ? floatval($_POST['amount']) : 0;
WC()->session->set('fee_data', array(
'type' => esc_attr($_POST['type']),
'amount' => $fee
) );
print_r(WC()->session->get('fee_data'));
}
die();
}
// Add a dynamic fee from WC Session ajax data
add_action( 'woocommerce_cart_calculate_fees', 'checkout_custom_tip_fee' );
function checkout_custom_tip_fee( $cart ) {
if ( is_admin() && !defined('DOING_AJAX') )
return;
$data = WC()->session->get('fee_data');
$fee = $total = 0;
if ( isset($data['type']) && isset($data['amount']) ) {
// 1. Fixed Fee amount
if ( $data['type'] === 'custom' ) {
$text = $data['type'];
$fee = $data['amount'];
}
// 2. Calculated percentage Fee amount
elseif ( $data['type'] === 'percent' && $data['amount'] > 0 ) {
$text = $data['amount'] . '%';
// Get cart subtotal excl. Taxes (discounted)
foreach ( $cart->get_cart() as $cart_item ) {
$total = $cart_item['line_total'];
}
// Calculate fee
$fee = $total * $data['amount'] / 100 ;
}
// Add the fee
if ( $fee > 0 ) {
$cart->add_fee( sprintf( __('Tip (%s)', 'woocommerce' ), $text ), $fee );
}
}
}
代码进入活动子主题(或活动主题)的functions.php 文件中。经过测试并且可以工作。
与您的评论相关的补充:
要在最后一个函数中使用购物车项目总计 including 税金替换:
// Get cart subtotal excl. Taxes (discounted)
foreach ( $cart->get_cart() as $cart_item ) {
$total = $cart_item['line_total'];
}
与
// Get cart subtotal Incl. Taxes (discounted)
foreach ( $cart->get_cart() as $cart_item ) {
$total = $cart_item['line_total'] + $cart_item['line_tax'];
}