通过 WooCommerce 中的 JQuery 和 Ajax 将产品变体添加到购物车

Question

我无法使用 jQuery 和 Ajax 将产品变体添加到购物车。使用下面的代码，添加了父变量产品，但没有添加变体。 例如，我指定了一种 T 恤变体（蓝色），价格为 45 美元，但最后添加了父级，价格为 30 美元。

购物车应显示：T 恤 - 蓝色 45$，但它显示：T 恤 30$。

到目前为止我的代码：

jQuery(document).ready(function($) {
    $(document.body).on('click', '#button', function(e) {
        const data = {
            product_id: 592,
            quantity: 2,
            variation_id: 1017,
        };

        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'add_to_cart' ),
            data: data,
            success: function(res) {
                console.log('added');
            },
        });
    });
});

如何用 jQuery 来完成这个？

Answer 1

如果您查看

WC_Ajax

add_to_cart

方法 （第 470 至 474 行），您将看到以下内容：

if ( $product && 'variation' === $product->get_type() ) {
    $variation_id = $product_id;
    $product_id   = $product->get_parent_id();
    $variation    = $product->get_variation_attributes();
}

这意味着您实际上不需要在代码中设置主变量产品 ID，但您可以将变体 ID 设置为产品 ID 参数和数量，例如：

jQuery(function($) {
    // wc_add_to_cart_params is required to continue
    if ( typeof wc_add_to_cart_params === 'undefined' ) {
        console.log('Error: wc_add_to_cart_params is not defined.');
        return false;
    }

    $(document.body).on('click', '#button', function(e) {
        const data = {
            product_id: 1017, // The variation ID
            quantity: 2,
        };

        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'add_to_cart' ),
            data: data,
            success: function(response) {
                // Refresh cart items counter and mini-cart widget
                $(document.body).trigger('wc_fragment_refresh'); 
                console.log(response);
            },
            error: function (error) {
                console.log(error);
            }
        });
    });
});

经过测试并可使用真实的变体 ID。