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

Question

我已经组装链接以将可变产品添加到我的购物车中，但如何在不重新加载页面的情况下“刷新”购物车后，我不知所措。我的猜测是，我没有正确地将此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');