javascript - Woocommerce 使用添加到购物车按钮添加多个选定的产品

Question

我在将多个产品/数量添加到购物车时遇到了一些问题。网址如下： stg-rogue.amplab.com

产品示例代码，这是选择时产品的示例之一：

                <div class="card">
                <?php 
                    $product_DI = 77; //Product ID
                    $pro = new WC_Product($product_DI);
                    echo '<img class="card-img-top cart-prod-img flavor-patis patis-inactive" src="http://doughnutwoo.com/wp-content/uploads/2020/08/doughnut-1.png"/>';
                    echo '<div class="card-body">';
                    echo '<p class="card-title">'.$pro->get_title();'</p>';
                    echo '<p class="card-text" id="patis-price">Php '.$pro->get_price();'';
                    echo '</p>';
                    echo '<input type="number" value="0" min="0" max="100" step="1" class="qty-patis" name="flavor-qty" disabled>';
                    echo '<input type="text" value="" class="patis-hidden-url" >';
                    echo '<input type="text" value="" class="patis-hidden-id" >';
                    
                ?>
                  </div>
                </div>

按钮，这连接到所有上面和下面的js：

            <div class="row justify-content-center" style="margin-bottom: 20px;">
                  <div class="col-md-6">
                      <button type="button" id="AddToCartBtn" class="btn btn-warning btn-block" disabled><i class="fas fa-shopping-cart"  id="AddToCart-Icon" style="padding-right: 10px;"></i><span id="AddToCart-Span">ADD TO CART</span></button>
                  </div>
                  <div class="col-md-6">
                      <button type="button" id="BuyNowBtn" class="btn btn-warning btn-block" disabled><span id="BuyNow-Span">BUY NOW</span></button>
                  </div>
            </div>

我添加的 Javascript 是创建一个数组，创建 3 盒或 6 盒，以显示我添加的风味注释：

    jQuery('#AddToCartBtn').click(function(){

        var el = document.getElementById("AddToCartBtn");
        var spanElem = document.getElementById("AddToCart-Span");
        var check_el = document.getElementById("AddToCart-Icon");

        //Disables button and change span element text, gives visual feedback to the user
        el.disabled = true;
        spanElem.innerHTML = "ADDING...";

        var totalQty = findTotalQty();
        var dealID = 0;
        var dealQty = 0;

        if(jQuery('.box-of-3-active').length > 0)
        {
            dealID = 125;
            dealQty = jQuery('.input-boxof-3').val();
        }
        else if(jQuery('.box-of-6-active').length > 0)
        {
            dealID = 126;
            dealQty = jQuery('.input-boxof-6').val();
        }

        var maxFlavors = calculateMaxFlavorsAllowed(dealID, dealQty);
        var currentTotalFlavorQty = findTotalQty();

        //Wait for some seconds to pass to change some attributes of the button, then set the attributes back to their initial values. 
        //This is again purely just for visual feedback, when a customer clicks the add to cart button.
        if(currentTotalFlavorQty > maxFlavors)
        {
            setTimeout(function(){
                check_el.setAttribute('class', "fas fa-times"); 
                spanElem.innerHTML = "ERROR"; 
                el.setAttribute('class', "btn btn-danger btn-block"); }, 1500);

            setTimeout(function(){
                            el.disabled = false; 
                            check_el.setAttribute('class', "fas fa-shopping-cart"); 
                            spanElem.innerHTML = "ADD TO CART"; el.setAttribute('class', "btn btn-warning btn-block"); }, 2500);

            alert('You cannot add any more flavors! Please Try Again.');
        }
        else if(currentTotalFlavorQty <= 0 || currentTotalFlavorQty < maxFlavors)
        {
            setTimeout(function(){
                check_el.setAttribute('class', "fas fa-times"); 
                spanElem.innerHTML = "ERROR"; 
                el.setAttribute('class', "btn btn-danger btn-block"); }, 1500);

            setTimeout(function(){
                            el.disabled = false; 
                            check_el.setAttribute('class', "fas fa-shopping-cart"); 
                            spanElem.innerHTML = "ADD TO CART"; el.setAttribute('class', "btn btn-warning btn-block"); }, 2500);

            alert('Please check the quantity for the flavors you have selected and try again.');

        }
        else if(currentTotalFlavorQty === maxFlavors)
        {
            addToCart();
        }
    });
    
    function addToCart()
{
    var el = document.getElementById("AddToCartBtn");
    var spanElem = document.getElementById("AddToCart-Span");
    var check_el = document.getElementById("AddToCart-Icon");

    setTimeout(function(){
        check_el.setAttribute('class', "fas fa-check"); 
        spanElem.innerHTML = "SUCCESSFULLY ADDED!"; 
        el.setAttribute('class', "btn btn-success btn-block"); }, 1500);

    setTimeout(function(){
        check_el.setAttribute('class', "fas fa-shopping-cart"); 
        spanElem.innerHTML = "ADD TO CART"; el.setAttribute('class', "btn btn-warning btn-block");}, 2500);

        var test_wew = constructOrders();
        var boxDealQty = 0;
        var chosenBoxDeal = 0;

        if(jQuery('.box-of-3-active').length > 0)
        {
            chosenBoxDeal = 125;
            boxDealQty = jQuery('.input-boxof-3').val();
        }
        else if(jQuery('.box-of-6-active').length > 0)
        {
            chosenBoxDeal = 126;
            boxDealQty = jQuery('.input-boxof-6').val();
        }
        
        console.log(test_wew);

        jQuery.ajax({
            type: 'post',
            url: 'index.php',
            data: { 
                    'SelectedFlavors': test_wew,
                    'testqty' : boxDealQty,
                    'chosenboxdeal' : chosenBoxDeal
                    

            },
            success: function () {
                console.log("Added To Cart");
            },
            error: function () {
                alert("error");
            }
        });

        resetFieldsAll();
        isActivePatis = false; 
        isActiveCotabato = false;
        isActiveCalamansi = false;
        isActiveLemonMeringue = false;
        isActiveUbeCheese= false;
        isActiveHazelButternut = false;
}

如果我可以使用添加到购物车按钮一次添加多个具有数量的产品，希望您能帮助我。提前谢谢

标签： javascripthtmljquerywordpresswoocommerce