php - WooCommerce 使用 Ajax 将多个项目添加到购物车
问题描述
我使用最新版本的 Wordpress 和 Woocommerce。我有一些 JavaScript 循环遍历 class 的 DOM 元素.selectable
并product_id
从具有 class 的元素中获取属性.selected
,并将该项目添加到购物车:
// selects the elements
$('.next').on('click', function() {
var parent = $(this).closest('.panel');
var selectables = parent.children('.option.selectable.selected');
$(selectables).each(function() {
var product = $(this).attr('product');
add_to_cart(product, 1);
});
}
// add to cart AJAX
function add_to_cart(product_id, qty) {
$.ajax({
type: "POST",
url: base_url + '/wp-admin/admin-ajax.php',
data: {action : 'cl_add_to_cart', 'product_id': product_id, 'qty': qty},
success : function(response) {
console.log(response);
}
});
}
我在functions.php中有一个PHP函数
add_action('wp_ajax_cl_add_to_cart', 'cl_add_to_cart');
add_action('wp_ajax_nopriv_cl_add_to_cart', 'cl_add_to_cart');
function cl_add_to_cart() {
global $woocommerce;
$product_id = trim($_POST['product_id']);
$qty = !empty($_POST['qty']) ? trim($_POST['qty']) : 1;
$added = WC()->cart->add_to_cart($product_id, $qty);
echo json_encode($added);
}
AJAX 调用可以很好地访问 PHP 函数 - 我可以回显 $add ,这给了我一个哈希值。如果我在 selectables var 中有两个或多个项目,它们都会命中 PHP 函数(我得到两个哈希值),但只有第一个被添加到购物车中。
我无法为我的生活找出原因。有任何想法吗?
解决方案
最好用 Ajax 一次发送所有要添加的项目,而不是在多个 Ajax 请求中单独发送,这样会更轻更有效。
您需要确保它$(selectables).each(function() { // ... });
按预期工作。
以下将为您的点击事件发送一个唯一的 Ajax 请求。
jQuery 代码
// Multi Ajax adda to cart
function multiAddToCart( productsData ) {
$.ajax({
url: base_url + '/wp-admin/admin-ajax.php',
type: 'POST',
dataType: 'JSON',
data: {
'action': 'multi_add_to_cart',
'items' : Object.assign({}, productsData)
},
success : function(response) {
$(document.body).trigger('wc_fragment_refresh'); // Refresh cart fragments
console.log(response);
},
error : function(error) {
console.log(error);
}
});
}
$('.next').on('click', function() {
var productsData = [];
var parent = $(this).closest('.panel');
var selectables = parent.children('.option.selectable.selected');
$(selectables).each(function() {
var productId = $(this).attr('product');
productsData.push({'id': productId, 'qty': 1});
});
// Check the data before (number of items found)
console.log(productsData);
multiAddToCart( productsData );
});
php接收函数:
add_action('wp_ajax_multi_add_to_cart', 'multi_ajax_add_to_cart');
add_action('wp_ajax_nopriv_multi_add_to_cart', 'multi_ajax_add_to_cart');
function multi_ajax_add_to_cart() {
if (isset($_POST['items']) ) {
$item_keys = array();
foreach( $_POST['items'] as $item ) {
if( isset($item['id']) ) {
$item_qty = isset($item['qty']) && $item['qty'] > 1 ? $item['qty'] : 1;
$item_keys[] = WC()->cart->add_to_cart($item['id'], $item_qty);
}
}
echo json_encode($item_keys); // Send back cart item keys
}
die();
}
代码位于活动子主题(或活动主题)的 functions.php 文件中。测试和工作。
它应该可以一次添加所有项目。
推荐阅读
- python - 调用函数后的 (x) 是什么意思?
- ios - Ionic 4 IOS 深层链接重定向到浏览器而不是实际应用程序
- django - 通过 pytest 运行时未完成登录视图
- c - Linux 内核中如何解决线程本地存储偏移?
- vuetify.js - Vuetify 辅助类和道具
- built-in - 在哪里可以找到 IDL 的内置函数(INTERPOLATE、GRID_TPS 和 TRIGRID)的源代码?
- orm - 使用负索引加速 sqlalchemy orm 动态关系切片
- python - 如何在 PyQt5 中捕获 QTableWidget 上的左右鼠标单击事件?
- python - 通过访问 Uniprot(使用 Python)获取蛋白质序列
- javascript - 多次导入 ES6 模块?