我试图建立一个“添加到购物车”按钮使用Ajax在WooCommerce。经过几个小时的搜索在这里和谷歌，我的问题是，我能够得到一个200状态对我的呼吁，但没有被添加到购物车。我希望订单以这种状态添加到购物车中。
我在我的活跃子主题functions.php中有以下代码：
function add_to_cart() {
$product_id = intval($_POST['product_id']);
$quantity = intval($_POST['quantity']);
$height = sanitize_text_field($_POST['height']);
$width = sanitize_text_field($_POST['width']);
$totalArea = sanitize_text_field($_POST['totalArea']);
$cost = sanitize_text_field($_POST['cost']);
$numPanels = intval($_POST['numPanels']);
$enteredHeight = sanitize_text_field($_POST['enteredHeight']);
$enteredWidth = sanitize_text_field($_POST['enteredWidth']);
WC()->cart->add_to_cart($product_id, $quantity, 0, array(), array('height'=>$height, 'width'=>$width, 'totalArea'=>$totalArea, 'cost'=>$cost, 'numPanels'=>$numPanels, 'enteredHeight'=>$enteredHeight, 'enteredWidth'=>$enteredWidth));
wp_die();
}
add_action('wp_ajax_add_to_cart', 'add_to_cart');
add_action('wp_ajax_nopriv_add_to_cart', 'add_to_cart');
function enqueue_add_to_cart_script() {
if(function_exists('is_product') && is_product()) {
wp_enqueue_script('add_to_cart', get_stylesheet_directory_uri() . '/js/add-to-cart-ajax.js');
wp_localize_script('add_to_cart', 'ajax_object', array('ajax_url' => admin_url('admin-ajax.php'), 'nonce' => wp_create_nonce('ajax_nonce')));
}
}
add_action('wp_enqueue_scripts', 'enqueue_add_to_cart_script');在我创建的子主题的js文件夹中还有以下代码：
document.addEventListener('DOMContentLoaded', () => {
const ADD_TO_CART = document.getElementById('add-to-cart');
const URL = wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'add_to_cart' );
ADD_TO_CART.addEventListener('click', (e) => {
e.preventDefault();
ADD_TO_CART.disabled = true;
const ORDER = {
action: 'add_to_cart',
quantity: 1,
product_id: '123ABC',
height: '96 in.',
width: '120 in.',
totalArea: '80 sq ft',
cost: '$636.00',
numPanels: 5,
enteredHeight: '96 in.',
enteredWidth: '120 in.',
};
fetch(URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(ORDER),
})
.then((response) => console.log('success:', response))
.catch((error) => console.error('Error:', error));
});
});console.log('order: ', ORDER);正在创建我期望的对象。console.log('success: ', response);返回的是200，正如我之前所说的。
但是没有什么东西被添加到购物车里。无论如何，我都想不出我到底哪里做错了。有没有人看到我错过了什么（可能很简单）？
这里有一个快速的小“添加到购物车”按钮，任何人都可以测试：
<?php
function add_to_cart() { ?>
<button id="add-to-cart">Add to Cart</button>
<?php }谢谢.
1条答案
按热度按时间p4tfgftt1#
下面，我们使用jQuery（就像WordPress/WooCommerce已经做的那样）。我重命名了一些函数以避免现有函数的问题（也重命名了一些其他参数）。
尝试以下重新访问的代码：
按钮HTML代码：
PHP代码：
代码放在子主题的
functions.php文件中。JavaScript代码：
代码放在子主题文件夹中的
js/custom-add-to-cart.js文件中。测试和工程。
相关：Ajax加入购物车简单和可变的产品在WooCommerce单一产品