代码之家 › 专栏 › 技术社区 › Becker Armata

在WooCommerce中通过JQuery和Ajax添加产品变体

product-variations woocommerce wordpress ajax jquery

1

Becker Armata · 技术社区 · 1 年前

我无法使用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实现这一点?

1 回复 | 直到 1 年前

1

LoicTheAztec 1 年前

如果你看 WC_Ajax add_to_cart method (line 470 to 474) ,您将看到以下内容:

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

这意味着你不需要在代码中设置主变量product Id,但你可以将变体Id设置为product 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。