Javascript 添加产品后更新 Woocommerce 购物车 (jQuery)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13930421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Update Woocommerce cart after adding a product (jQuery)
提问by estrar
The Ajax seems to work just fine but the cart content won't refresh as expected. I want the contents of the cart to be refreshed once the "add to cart" button is clicked. As it is now, I have to refresh the page manually to see the added products.
Ajax 似乎工作得很好，但购物车内容不会按预期刷新。我希望在单击“添加到购物车”按钮后刷新购物车的内容。就像现在一样，我必须手动刷新页面才能看到添加的产品。
I'm using this function to add a product to my woocommerce cart:
我正在使用此功能将产品添加到我的 woocommerce 购物车：
function addToCart(p_id) {
jQuery.ajax({
type: 'POST',
url: '/wp/?post_type=product&add-to-cart='+p_id,
data: { 'product_id': p_id,
'quantity': amount},
success: function(response, textStatus, jqXHR){
console.log("Product added");
}/*,
dataType: 'JSON'*/
});
}
jQuery('#addToCart').click(function(e) {
e.preventDefault();
addToCart(prod_id["product_id"]);
return false;
});
Is it possible to refresh only the cart after a product was added?
添加产品后是否可以仅刷新购物车？
采纳答案by user319940
This is possible - you need to use a modified version of this code:
这是可能的 - 您需要使用此代码的修改版本：
http://docs.woothemes.com/document/show-cart-contents-total/
http://docs.woothemes.com/document/show-cart-contents-total/
Edit - in case of future 404's
编辑 - 在未来 404 的情况下
<a class="cart-customlocation" href="<?php echo wc_get_cart_url(); ?>" title="<?php _e( 'View your shopping cart' ); ?>"><?php echo sprintf ( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count() ), WC()->cart->get_cart_contents_count() ); ?> - <?php echo WC()->cart->get_cart_total(); ?></a>
// Ensure cart contents update when products are added to the cart via AJAX (place the following in functions.php).
// Used in conjunction with https://gist.github.com/DanielSantoro/1d0dc206e242239624eb71b2636ab148
add_filter('add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment');
function woocommerce_header_add_to_cart_fragment( $fragments ) {
global $woocommerce;
ob_start();
?>
<a class="cart-customlocation" href="<?php echo $woocommerce->cart->get_cart_url(); ?>" title="<?php _e('View your shopping cart', 'woothemes'); ?>"><?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
<?php
$fragments['a.cart-customlocation'] = ob_get_clean();
return $fragments;
}
回答by klewis
Do you mind if the ajax request "automatically" refreshes the page on its own? then you could try something like this... (untested).
您是否介意 ajax 请求“自动”自行刷新页面？那么你可以尝试这样的事情......（未经测试）。
function addToCart(p_id) {
jQuery.ajax({
type: 'POST',
url: '/wp/?post_type=product&add-to-cart='+p_id,
data: { 'product_id': p_id,
'quantity': amount},
success: function(response, textStatus, jqXHR){
location.reload(true);
}/*,
dataType: 'JSON'*/
});
}
回答by npradeetw
First observe what is the html in the cart and what all information you require to fulfill that. Example your cart may look something like this :
首先观察购物车中的 html 是什么以及你需要什么信息来完成它。例如，您的购物车可能如下所示：
<div id="cart">
<form action="checkout" method="POST" id="cart_checkout_form">
<table id="cart_table">
<tr>
<td> Product </td>
<td> Qty </td>
<td> Price </td>
</tr>
<tr>
<td> <input type="hidden" name="product_id" value="221321"/> Product 1</td>
<td> 2</td>
<td> 200 $</td>
</tr>
</table>
</form>
</div>
Now your code should contain the following changes to reflect the product:
现在您的代码应包含以下更改以反映产品：
function addToCart(p_id) {
jQuery.ajax({
type: 'POST',
url: '/wp/?post_type=product&add-to-cart='+p_id,
data: { 'product_id': p_id,
'quantity': amount},
success: function(response, textStatus, jqXHR){
/* response should contain details required for adding to cart
like price quantity name etc in the json response */
var new_product_html = "<tr><td><input type='hidden' value='"+ response.product_id +"' name="product_id"/>"+ response.product_name +" </td><td>"+response.product_qty+"</td><td>"+ response.product_price +"</td></tr>";
$("#cart_table").append(new_product_html);
console.log("Product added");
}/*,
dataType: 'JSON'*/
});
}
jQuery('#addToCart').click(function(e) {
e.preventDefault();
addToCart(prod_id["product_id"]);
return false;
});
This will reflect in getting the product added to the cart. Please read the following links if you find it confusing. TutorialAlso jquery append and ajax functions in more detail at jquery.com
这将反映在将产品添加到购物车中。如果您感到困惑，请阅读以下链接。教程还可以在 jquery.com 上更详细地了解 jquery append 和 ajax 函数
