379 lines
13 KiB
JavaScript
379 lines
13 KiB
JavaScript
/**
|
|
* Yoone Subscriptions 前端 JavaScript
|
|
*
|
|
* 处理混装产品和订阅功能的前端交互
|
|
*/
|
|
|
|
(function($) {
|
|
'use strict';
|
|
|
|
var YooneSubscriptions = {
|
|
|
|
/**
|
|
* 初始化
|
|
*/
|
|
init: function() {
|
|
this.initBundleOptions();
|
|
this.initSubscriptionOptions();
|
|
this.initCartUpdates();
|
|
this.bindEvents();
|
|
},
|
|
|
|
/**
|
|
* 初始化混装选项
|
|
*/
|
|
initBundleOptions: function() {
|
|
var $bundleOptions = $('.yoone-bundle-options');
|
|
|
|
if ($bundleOptions.length === 0) {
|
|
return;
|
|
}
|
|
|
|
// 绑定数量变化事件
|
|
$bundleOptions.on('change', '.bundle-quantity-input', this.updateBundleItemSubtotal);
|
|
|
|
// 绑定计算价格按钮
|
|
$bundleOptions.on('click', '#calculate-bundle-price', this.calculateBundlePrice);
|
|
|
|
// 绑定添加到购物车按钮
|
|
$bundleOptions.on('click', '#add-bundle-to-cart', this.addBundleToCart);
|
|
|
|
// 初始计算
|
|
this.calculateBundlePrice();
|
|
},
|
|
|
|
/**
|
|
* 初始化订阅选项
|
|
*/
|
|
initSubscriptionOptions: function() {
|
|
var $subscriptionOptions = $('.yoone-subscription-options');
|
|
|
|
if ($subscriptionOptions.length === 0) {
|
|
return;
|
|
}
|
|
|
|
// 绑定购买类型切换
|
|
$subscriptionOptions.on('change', 'input[name="purchase_type"]', this.toggleSubscriptionOptions);
|
|
|
|
// 绑定订阅周期切换
|
|
$subscriptionOptions.on('change', '#subscription_period', this.updateSubscriptionDetails);
|
|
},
|
|
|
|
/**
|
|
* 初始化购物车更新
|
|
*/
|
|
initCartUpdates: function() {
|
|
// 监听购物车更新事件
|
|
$(document.body).on('updated_wc_div', this.onCartUpdated);
|
|
},
|
|
|
|
/**
|
|
* 绑定事件
|
|
*/
|
|
bindEvents: function() {
|
|
// 绑定订阅管理操作
|
|
$('.yoone-my-subscriptions').on('click', '.subscription-pause, .subscription-resume, .subscription-cancel', this.handleSubscriptionAction);
|
|
},
|
|
|
|
/**
|
|
* 更新混装项目小计
|
|
*/
|
|
updateBundleItemSubtotal: function() {
|
|
var $input = $(this);
|
|
var $item = $input.closest('.bundle-item');
|
|
var $subtotal = $item.find('.subtotal-amount');
|
|
var basePrice = parseFloat($subtotal.data('base-price'));
|
|
var quantity = parseInt($input.val()) || 0;
|
|
var subtotal = basePrice * quantity;
|
|
|
|
$subtotal.html(YooneSubscriptions.formatPrice(subtotal));
|
|
|
|
// 启用计算按钮
|
|
$('#calculate-bundle-price').prop('disabled', false);
|
|
},
|
|
|
|
/**
|
|
* 计算混装价格
|
|
*/
|
|
calculateBundlePrice: function() {
|
|
var $bundleOptions = $('.yoone-bundle-options');
|
|
var productId = $bundleOptions.data('product-id');
|
|
var quantities = {};
|
|
|
|
// 收集数量数据
|
|
$bundleOptions.find('.bundle-quantity-input').each(function() {
|
|
var $input = $(this);
|
|
var itemProductId = $input.closest('.bundle-item').data('product-id');
|
|
var quantity = parseInt($input.val()) || 0;
|
|
quantities[itemProductId] = quantity;
|
|
});
|
|
|
|
// 发送AJAX请求计算价格
|
|
$.ajax({
|
|
url: yoone_ajax.ajax_url,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'yoone_calculate_bundle_price',
|
|
nonce: yoone_ajax.nonce,
|
|
product_id: productId,
|
|
quantities: quantities
|
|
},
|
|
beforeSend: function() {
|
|
$('#calculate-bundle-price').prop('disabled', true).text(yoone_ajax.calculating_text);
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
var data = response.data;
|
|
|
|
// 更新价格显示
|
|
$('#bundle-original-total').html(YooneSubscriptions.formatPrice(data.original_total));
|
|
$('#bundle-discount-amount').html('-' + YooneSubscriptions.formatPrice(data.discount_amount));
|
|
$('#bundle-final-total').html(YooneSubscriptions.formatPrice(data.final_total));
|
|
|
|
// 启用添加到购物车按钮
|
|
$('#add-bundle-to-cart').prop('disabled', false);
|
|
|
|
// 验证数量限制
|
|
if (data.quantity_valid) {
|
|
$('.bundle-quantity-error').remove();
|
|
} else {
|
|
YooneSubscriptions.showQuantityError(data.quantity_message);
|
|
}
|
|
} else {
|
|
YooneSubscriptions.showError(response.data.message);
|
|
}
|
|
},
|
|
error: function() {
|
|
YooneSubscriptions.showError(yoone_ajax.error_message);
|
|
},
|
|
complete: function() {
|
|
$('#calculate-bundle-price').prop('disabled', false).text(yoone_ajax.calculate_text);
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 添加混装到购物车
|
|
*/
|
|
addBundleToCart: function() {
|
|
var $bundleOptions = $('.yoone-bundle-options');
|
|
var productId = $bundleOptions.data('product-id');
|
|
var quantities = {};
|
|
|
|
// 收集数量数据
|
|
$bundleOptions.find('.bundle-quantity-input').each(function() {
|
|
var $input = $(this);
|
|
var itemProductId = $input.closest('.bundle-item').data('product-id');
|
|
var quantity = parseInt($input.val()) || 0;
|
|
quantities[itemProductId] = quantity;
|
|
});
|
|
|
|
// 发送AJAX请求添加到购物车
|
|
$.ajax({
|
|
url: yoone_ajax.ajax_url,
|
|
type: 'POST',
|
|
data: {
|
|
action: 'yoone_add_bundle_to_cart',
|
|
nonce: yoone_ajax.nonce,
|
|
product_id: productId,
|
|
quantities: quantities
|
|
},
|
|
beforeSend: function() {
|
|
$('#add-bundle-to-cart').prop('disabled', true).text(yoone_ajax.adding_text);
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
// 显示成功消息
|
|
YooneSubscriptions.showSuccess(response.data.message);
|
|
|
|
// 更新购物车计数
|
|
if (response.data.cart_count) {
|
|
$('.cart-contents-count').text(response.data.cart_count);
|
|
}
|
|
|
|
// 触发购物车更新事件
|
|
$(document.body).trigger('added_to_cart', [response.data.fragments, response.data.cart_hash]);
|
|
|
|
} else {
|
|
YooneSubscriptions.showError(response.data.message);
|
|
}
|
|
},
|
|
error: function() {
|
|
YooneSubscriptions.showError(yoone_ajax.error_message);
|
|
},
|
|
complete: function() {
|
|
$('#add-bundle-to-cart').prop('disabled', false).text(yoone_ajax.add_to_cart_text);
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 切换订阅选项显示
|
|
*/
|
|
toggleSubscriptionOptions: function() {
|
|
var $input = $(this);
|
|
var purchaseType = $input.val();
|
|
var $subscriptionOptions = $input.closest('.yoone-subscription-options');
|
|
|
|
if (purchaseType === 'subscription') {
|
|
$subscriptionOptions.find('.subscription-periods').show();
|
|
$subscriptionOptions.find('.subscription-info').show();
|
|
$subscriptionOptions.find('.subscription-trial').show();
|
|
YooneSubscriptions.updateSubscriptionDetails();
|
|
} else {
|
|
$subscriptionOptions.find('.subscription-periods').hide();
|
|
$subscriptionOptions.find('.subscription-info').hide();
|
|
$subscriptionOptions.find('.subscription-trial').hide();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 更新订阅详情
|
|
*/
|
|
updateSubscriptionDetails: function() {
|
|
var $select = $('#subscription_period');
|
|
var $selectedOption = $select.find(':selected');
|
|
var period = $selectedOption.data('period');
|
|
var interval = $selectedOption.data('interval');
|
|
var price = $selectedOption.data('price');
|
|
|
|
// 更新价格显示
|
|
$('#subscription-price').html(YooneSubscriptions.formatPrice(price));
|
|
|
|
// 更新计费周期
|
|
var billingCycle = YooneSubscriptions.formatBillingCycle(period, interval);
|
|
$('#billing-cycle').text(billingCycle);
|
|
|
|
// 计算下次配送日期
|
|
var nextDate = YooneSubscriptions.calculateNextDeliveryDate(period, interval);
|
|
$('#next-delivery-date').text(nextDate);
|
|
},
|
|
|
|
/**
|
|
* 处理订阅操作
|
|
*/
|
|
handleSubscriptionAction: function(e) {
|
|
var $button = $(this);
|
|
var action = '';
|
|
|
|
if ($button.hasClass('subscription-pause')) {
|
|
action = 'pause';
|
|
} else if ($button.hasClass('subscription-resume')) {
|
|
action = 'resume';
|
|
} else if ($button.hasClass('subscription-cancel')) {
|
|
action = 'cancel';
|
|
if (!confirm(yoone_ajax.confirm_cancel)) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// 这里可以添加AJAX处理逻辑
|
|
// 目前使用链接跳转的方式
|
|
},
|
|
|
|
/**
|
|
* 购物车更新回调
|
|
*/
|
|
onCartUpdated: function() {
|
|
// 购物车更新后的处理逻辑
|
|
console.log('Cart updated');
|
|
},
|
|
|
|
/**
|
|
* 格式化价格
|
|
*/
|
|
formatPrice: function(price) {
|
|
return yoone_ajax.currency_symbol + parseFloat(price).toFixed(2);
|
|
},
|
|
|
|
/**
|
|
* 格式化计费周期
|
|
*/
|
|
formatBillingCycle: function(period, interval) {
|
|
var periods = {
|
|
'day': yoone_ajax.period_day,
|
|
'week': yoone_ajax.period_week,
|
|
'month': yoone_ajax.period_month,
|
|
'year': yoone_ajax.period_year
|
|
};
|
|
|
|
var periodName = periods[period] || period;
|
|
|
|
if (interval > 1) {
|
|
return '/ ' + yoone_ajax.every_text + ' ' + interval + ' ' + periodName;
|
|
} else {
|
|
return '/ ' + yoone_ajax.every_text + periodName;
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 计算下次配送日期
|
|
*/
|
|
calculateNextDeliveryDate: function(period, interval) {
|
|
var now = new Date();
|
|
var nextDate = new Date(now);
|
|
|
|
switch (period) {
|
|
case 'day':
|
|
nextDate.setDate(now.getDate() + interval);
|
|
break;
|
|
case 'week':
|
|
nextDate.setDate(now.getDate() + (interval * 7));
|
|
break;
|
|
case 'month':
|
|
nextDate.setMonth(now.getMonth() + interval);
|
|
break;
|
|
case 'year':
|
|
nextDate.setFullYear(now.getFullYear() + interval);
|
|
break;
|
|
}
|
|
|
|
return nextDate.toLocaleDateString();
|
|
},
|
|
|
|
/**
|
|
* 显示成功消息
|
|
*/
|
|
showSuccess: function(message) {
|
|
this.showNotice(message, 'success');
|
|
},
|
|
|
|
/**
|
|
* 显示错误消息
|
|
*/
|
|
showError: function(message) {
|
|
this.showNotice(message, 'error');
|
|
},
|
|
|
|
/**
|
|
* 显示数量错误
|
|
*/
|
|
showQuantityError: function(message) {
|
|
$('.bundle-quantity-error').remove();
|
|
$('.yoone-bundle-summary').before('<div class="bundle-quantity-error notice notice-error"><p>' + message + '</p></div>');
|
|
},
|
|
|
|
/**
|
|
* 显示通知
|
|
*/
|
|
showNotice: function(message, type) {
|
|
var $notice = $('<div class="yoone-notice yoone-notice-' + type + '">' + message + '</div>');
|
|
|
|
$('body').prepend($notice);
|
|
|
|
$notice.fadeIn().delay(3000).fadeOut(function() {
|
|
$(this).remove();
|
|
});
|
|
}
|
|
};
|
|
|
|
// 文档就绪时初始化
|
|
$(document).ready(function() {
|
|
YooneSubscriptions.init();
|
|
});
|
|
|
|
// 导出到全局
|
|
window.YooneSubscriptions = YooneSubscriptions;
|
|
|
|
})(jQuery); |