用于 WooCommerce 3 中产品变化的 Ajax 添加到购物车按钮

Posted 2023-02-24

【中文标题】用于 WooCommerce 3 中产品变化的 Ajax 添加到购物车按钮

【英文标题】：Ajax add to cart button for product variation in WooCommerce 3

【发布时间】：2018-11-10 21:52:41

【问题描述】：

我这里有这个按钮。此按钮的用途是将产品添加到购物车，产品 ID 为 237，变体 ID 为 208673，attribute_pa_option 为蓝牙。有没有办法对此进行 AJAX？

<div class="btnss">
    <span class="price">
        <span class="woocommerce-Price-amount amount">6,999&nbsp;
            <span class="woocommerce-Price-currencySymbol">kr</span>
        </span>
    </span>
    <div class="quantity buttons_added">
        <input type="button" value="-" class="minus">
        <label class="screen-reader-text" for="quantity_5b101f605f067">Quantity</label>
        <input type="number" id="quantity_5b101f605f067" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="">
        <input type="button" value="+" class="plus">
    </div>
    <a href="/?add-to-cart=237&variation_id=208673&attribute_pa_option=bluetooth" class="button product_type_simple add_to_cart_button ajax_add_to_cart">Add to cart</a>
</div>

【参考方案1】：

为了使其正常工作，我专门为产品变体使用自定义 ajax 添加到购物车。

1)。我先修改了一下你的按钮html：

<div class="btnss">
    <span class="price">
        <span class="woocommerce-Price-amount amount">6,999&nbsp;
            <span class="woocommerce-Price-currencySymbol">kr</span>
        </span>
    </span>
    <div class="quantity buttons_added">
        <input type="button" value="-" class="minus">
        <label class="screen-reader-text" for="quantity_5b101f605f067">Quantity</label>
        <input type="number" id="quantity_5b101f605f067" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="Qty" size="4" pattern="[0-9]*" inputmode="numeric" aria-labelledby="">
        <input type="button" value="+" class="plus">
    </div>
    <a href="#" class="button product_type_variation add_to_cart_button ajax variation" data-product_id="237" data-variation_id="208673" data-quantity="1" data-variation="pa_option=bluetooth">Add to cart</a>
</div>

如您所见，我不使用按钮 href 属性，因为我通过 ajax 发布数据。

对于您的属性，如果您有多个属性，您将用逗号分隔每一对，例如：

data-variation="pa_option=bluetooth,pa_color=red-shiny"

2)。 php (Wordpress-Ajax) 和 jQuery (Ajax) 代码：

// Wordpress Ajax php: Adding variation to cart
add_action( 'wp_ajax_nopriv_variation_to_cart', 'product_variation_add_to_cart' );
add_action( 'wp_ajax_variation_to_cart', 'product_variation_add_to_cart' );
function product_variation_add_to_cart() 
    if( isset($_POST['pid']) && $_POST['pid'] > 0 )
        $product_id   = (int) $_POST['pid'];
        $variation_id = (int) $_POST['vid'];
        $quantity     = (int) $_POST['qty'];
        $attributes   = explode(',', $_POST['var']);
        $variation    = array();
        foreach($attributes as $values)
            $values = explode('=', $values);
            $variation['attributes_'.$values[0]] = $values[1];
        
        WC()->cart->add_to_cart( $product_id, $quantity, $variation_id, $variation );
        echo true;
    
    die(); // To avoid server error 500


// The Jquery ajax script
add_action( 'wp_footer', 'custom_product_variation_script' );
function custom_product_variation_script() 
    // HERE set the page or the post ID
    $the_id = 102;

    if( ! ( is_page($the_id) || is_single($the_id) ) ) return;

    $view_cart = '<a href="'.wc_get_cart_url().'" class="added_to_cart wc-forward" title="View cart">View cart</a>';
    $adding    = __('Adding to cart…', 'woocommerce');
    ?>
    <script type="text/javascript">
    jQuery( function($)
        // wc_add_to_cart_params is required to continue
        if ( typeof wc_add_to_cart_params === 'undefined' )
            return false;

        var a = 'a.button.ajax.variation',
            b = $(a).html(),
            c = '<?php echo $view_cart; ?>',
            d = '<?php echo $adding; ?>';

        // Sync the data-quantity attribute
        $('input.minus,input.plus').on( 'click blur', function()
            $(a).attr('data-quantity',$('input.qty').val());
        );
        $('input.qty').on('input click blur', function()
            $(a).attr('data-quantity',$('input.qty').val());
        )

        $(a).on('click', function(e)
            e.preventDefault();

            $('a.wc-forward').remove();
            $(a).html(d);

            // The Ajax request
            $.ajax(
                type: 'POST',
                url: wc_add_to_cart_params.ajax_url,
                data: 
                    'action': 'variation_to_cart',
                    'pid'   : $(a).attr('data-product_id'),
                    'vid'   : $(a).attr('data-variation_id'),
                    'qty'   : $(a).attr('data-quantity'),
                    'var'   : $(a).attr('data-variation'),
                ,
                success: function (response) 
                    if(response)
                        // Update button and refresh minicart fragments
                        setTimeout(function()
                            $(a).addClass('added').html(b).after(c);
                            $(document.body).trigger('added_to_cart').trigger('wc_fragment_refresh');
                        , 500);
                    
                ,
                error: function (error) 
                    $(a).addClass('failed').html('Add to cart failed!');
                    console.log(error);
                
            );
        );
    );
    </script>
    <?php

代码进入您的活动子主题（或活动主题）的 function.php 文件中。经过测试并且可以工作。

【讨论】：

这行得通！非常感谢。感谢您的帮助:)

谢谢，它成功了。但是，当涉及多种变体但没有选择第二个选项时，它就不起作用了。示例我的产品“T 恤” - 变体 1。尺寸：M，颜色：绿色（在这种情况下有效）。变化 2. 尺寸：XL，颜色：任何（在这种情况下它不起作用，即使我从任何颜色中选择颜色）

【参考方案2】：

您可以使用this plugin ("Woocommerce Ajax add to cart for variable products") 对应该按下的 "Add to cart" 按钮进行 Ajaxify在前端选择变体的属性（例如Color）和quantity之后。默认没有这个插件，点击“加入购物车”页面会刷新