通过AJAX添加可变产品后更新WooCommerce购物车

我已经组装了一个链接，可以将变量产品添加到我的购物车中，但是我不知道如何在不重新加载页面的情况下“刷新”购物车。 我的猜测是我没有正确地将这个AJAX添加到购物车请求中，因此，不会调用woocommerce_add_to_cart_fragments（我相信我的购物车HTML将被放置以进行刷新）。

$addToCartLink = '?add-to-cart=' . $prod->id . '&variation_id=' . $var_id . '&attribute_pa_quantity-attribute=' . $var_quantity; jQuery.get($addToCartLink, function() { //refreshCart(); }); 

如果有人能指出我正确的方向，我将非常感激。 变量/ AJAX / WooCommerce文档似乎相当稀疏​​。

Answer 1

@helgatheviking – 谢谢，我发现我发布后几个小时。 这也提供了一个巨大的帮助https://github.com/wp-plugins/woocommerce-ajax-add-to-cart-for-variable-products/blob/master/js/add-to-cart-variation.js。

这是我完成的解决方案，以防它帮助任何人。

我将var_id和product_id存储为数据属性和数量，并且var_name在此实例中是硬编码的。 .doodleVarButton是我应用于所有变量项添加到购物车链接的类。

JS

 jQuery( function( $ ) { $( document ).on( 'click', '.doodleVarButton', function() { var var_id = $(this).data("varid"); var product_id = $(this).data("prodid"); var data = { action: 'woocommerce_add_to_cart_variable_rc', product_id: product_id, quantity: 1, variation_id: var_id, variation: 'quantity-attribute' }; jQuery.post( woocommerce_params.ajax_url, data, function( response ) { var fragments = response.fragments; if ( fragments ) { $.each(fragments, function(key, value) { $(key).replaceWith(value); }); } }); }); 

扩展的WC动作（扔进了functions.php）

 add_action( 'wp_ajax_woocommerce_add_to_cart_variable_rc','woocommerce_add_to_cart_variable_rc_callback' ); function woocommerce_add_to_cart_variable_rc_callback() { $product_id = apply_filters( 'woocommerce_add_to_cart_product_id', absint( $_POST['product_id'] ) ); $quantity = empty( $_POST['quantity'] ) ? 1 : apply_filters( 'woocommerce_stock_amount', $_POST['quantity'] ); $variation_id = $_POST['variation_id']; $variation = $_POST['variation']; $passed_validation = apply_filters( 'woocommerce_add_to_cart_validation', true, $product_id, $quantity ); if ( $passed_validation && WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variation ) ) { do_action( 'woocommerce_ajax_added_to_cart', $product_id ); if ( get_option( 'woocommerce_cart_redirect_after_add' ) == 'yes' ) { wc_add_to_cart_message( $product_id ); } WC_AJAX::get_refreshed_fragments(); } else { //$this->json_headers(); header('Content-Type: application/json'); $data = array( 'error' => true, 'product_url' => apply_filters( 'woocommerce_cart_redirect_after_error', get_permalink( $product_id ), $product_id ) ); echo json_encode( $data ); } die(); } 

然后 – 键 – WC_AJAX :: get_refreshed_fragments调用关键的woocommerce_header_add_to_cart_fragment函数 ，您可以在其中更新购物车。 我的购物车在一个单独的PHP文件中模块化。

只需确保$ fragments [xxx]中的’xxx’与购物车代码的容器匹配即可。

 function woocommerce_header_add_to_cart_fragment( $fragments ) { ob_start(); include( dirname(__FILE__) . "/../views/checkout-bar.php"); $fragments['div.checkout'] = ob_get_clean(); return $fragments; } add_filter( 'woocommerce_add_to_cart_fragments', 'woocommerce_header_add_to_cart_fragment' );