我想更新,然后当购物车中的商品数量发生变化时,通过AJAX重新加载我的购物车.
我已经可以通过AJAX成功加载到我的购物车中.
要加载我的购物车我的PHP功能看起来像这样. (在我的functions.PHP中)
function enqueue_cart_show_ajax() {
wp_register_script( 'cart-show-ajax-js', get_template_directory_uri() . '/js/cart-show-ajax.js', array( 'jquery' ), '', true );
wp_localize_script( 'cart-show-ajax-js', 'cart_show_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.PHP' ) ) );
wp_enqueue_script( 'cart-show-ajax-js' );
}
add_action('wp_enqueue_scripts', 'enqueue_cart_show_ajax');
function ajax_show_cart() {
echo do_shortcode( '[woocommerce_cart]' );
die();
}
add_action('wp_ajax_show_cart', 'ajax_show_cart');
add_action('wp_ajax_nopriv_show_cart', 'ajax_show_cart');
我的Jquery代码看起来像这样(在cart-show-ajax.js中)
jQuery(function($) {
//If view-cart is clicked, fill the view-cart-popup window with the cart
$( '.view-cart' ).on('click', function(){
show_cart();
});
//Main ajax function
function show_cart() {
$.ajax({
type: 'GET',
url: cart_show_ajax.ajax_url,
data: {
action: 'show_cart',
},
beforeSend: function ()
{
//You Could show a loader here
},
success: function(data)
{
//Hide loader here
$( '.view-cart-popup' ).html(data);
activateReturnToShop();
},
error: function()
{
//If an ajax error has occured, do something here...
$(".product-container").html('<p>There has been an error</p>');
}
});
}
});
购物车的HTML如下
<td class="product-quantity">
<div class="quantity">
<input type="number" step="1" min="0"
name="cart[1e334311e1ef4cf849abff19e4237358][qty]"
value="4" title="Qty" class="input-text qty text" size="4">
</div>
</td>
我最好的猜测是,如果输入更改后我可以实现这一点,我会运行一个更新购物车的功能,然后只运行现有的show_cart()函数.
我不确定如何制作能够检测输入变化的功能,获取产品的新数量并更新购物车中的金额……
它可能看起来像：
$( 'input.qty' ).on("change", function(){
// Grab the new product quantity
// Update the cart
show_cart();
});
任何人都知道如何使用它来更新购物车的新数量？
谢谢你的帮助！
解决方法:
好的,所以我想出来了！
我现在可以更新购物车商品的数量而无需通过AJAX刷新(：
我的functions.PHP看起来像这样
//Enqueue Ajax Scripts
function enqueue_cart_qty_ajax() {
wp_register_script( 'cart-qty-ajax-js', get_template_directory_uri() . '/js/cart-qty-ajax.js', array( 'jquery' ), '', true );
wp_localize_script( 'cart-qty-ajax-js', 'cart_qty_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.PHP' ) ) );
wp_enqueue_script( 'cart-qty-ajax-js' );
}
add_action('wp_enqueue_scripts', 'enqueue_cart_qty_ajax');
function ajax_qty_cart() {
// Set item key as the hash found in input.qty's name
$cart_item_key = $_POST['hash'];
// Get the array of values owned by the product we're updating
$threeball_product_values = WC()->cart->get_cart_item( $cart_item_key );
// Get the quantity of the item in the cart
$threeball_product_quantity = apply_filters( 'woocommerce_stock_amount_cart_item', apply_filters( 'woocommerce_stock_amount', preg_replace( "/[^0-9\.]/", '', filter_var($_POST['quantity'], FILTER_SANITIZE_NUMBER_INT)) ), $cart_item_key );
// Update cart validation
$passed_validation = apply_filters( 'woocommerce_update_cart_validation', true, $cart_item_key, $threeball_product_values, $threeball_product_quantity );
// Update the quantity of the item in the cart
if ( $passed_validation ) {
WC()->cart->set_quantity( $cart_item_key, $threeball_product_quantity, true );
}
// Refresh the page
echo do_shortcode( '[woocommerce_cart]' );
die();
}
add_action('wp_ajax_qty_cart', 'ajax_qty_cart');
add_action('wp_ajax_nopriv_qty_cart', 'ajax_qty_cart');
我的cart-qty-ajax.js看起来像这样.
jQuery( function( $) {
$( document ).on( 'change', 'input.qty', function() {
var item_hash = $( this ).attr( 'name' ).replace(/cart\[([\w]+)\]\[qty\]/g, "$1");
var item_quantity = $( this ).val();
var currentVal = parseFloat(item_quantity);
function qty_cart() {
$.ajax({
type: 'POST',
url: cart_qty_ajax.ajax_url,
data: {
action: 'qty_cart',
hash: item_hash,
quantity: currentVal
},
success: function(data) {
$( '.view-cart-popup' ).html(data);
}
});
}
qty_cart();
});
});
工作得很漂亮,虽然我不确定这是否是“良好做法”.
谢谢大家！
