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

I've assembled the link to add a variable product to my cart like so but I'm at a loss on how to then "refresh" the cart without reloading the page. My guess is that I'm not properly making this AJAX add to cart request and therefore, the woocommerce_add_to_cart_fragments (where I believe my cart HTML would be placed for refresh) isn't being called.

我已经组装了一个链接,可以将变量产品添加到我的购物车中,但是我不知道如何在不重新加载页面的情况下“刷新”购物车。我的猜测是我没有正确地将这个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();
});

If anyone can just point me in the right direction I'd be greatly appreciative. Variable/AJAX/WooCommerce docs seems to be rather sparse.

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

1 个解决方案

#1

@helgatheviking - Thanks, I found that a few hours after I posted. This also provided a mega assist https://github.com/wp-plugins/woocommerce-ajax-add-to-cart-for-variable-products/blob/master/js/add-to-cart-variation.js.

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

Here was my finished solution in case it helps anyone.

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

I'm storing my var_id and product_id as data attributes and quantity and the var_name are hardcoded in this instance. .doodleVarButton is the class I apply to all my variable item add to cart links.

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

The 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);
                });

            }

        });

    });

The extended WC action (threw in functions.php)

扩展的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();
}

Then - the key - WC_AJAX::get_refreshed_fragments calls the crucial woocommerce_header_add_to_cart_fragment function where you update your cart. My cart is modularized in a separate PHP file.

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

Just make sure 'xxx' in $fragments[xxx] matches the container for your cart code.

只需确保$ 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' );

#1