woocommerce插件，通過ajax添加變體到購物車

Question

我正在尋找一種解決方案，通過Ajax添加產品變體。

正如我發現所有的woocommerce基本功能允許只有當它不是一個變化項目時添加產品到購物車。

即時通訊使用<?php echo woocommerce_template_loop_add_to_cart() ?>顯示添加到購物車按鈕，但此按鈕是一個常規提交按鈕。

我怎樣才能使一個變量項目使用ajax添加到購物車？

感謝

Answer 1

我創建和AJAX添加到購物車可變同類產品：

很抱歉的延遲，這裏是擴大答案：

我包括一個新的名爲js文件added- to-cart.js並且該文件包含以下代碼。有一些額外的代碼用於處理彈出窗口，並增加您可能想要移除的購物車計數器。

/* *開頭/

jQuery(function($) { 

/* event for closing the popup */ 
$("div.close").hover(
       function() { 
        $('span.ecs_tooltip').show(); 
       }, 
       function() { 
        $('span.ecs_tooltip').hide(); 
       } 
      ); 

$("div.close").click(function() { 
    disablePopup(); // function close pop up 
}) 

$("a.close").click(function() { 
    disablePopup(); // function close pop up 
}); 

$(this).keyup(function(event) { 
    if (event.which == 27) { // 27 is 'Ecs' in the keyboard 
     disablePopup(); // function close pop up 
    } 
}); 

    $("div#backgroundPopup").click(function() { 
    disablePopup(); // function close pop up 
}); 

$('a.livebox').click(function() { 
    //alert('Hello World!'); 
return true; 
}); 

setAjaxButtons(); // add to cart button ajax 

function loading() { 
    $("div.loader").show(); 
} 
function closeloading() { 
    $("div.loader").fadeOut('normal'); 
} 

// AJAX buy button for variable products 
function setAjaxButtons() { 
    $('.single_add_to_cart_button').click(function(e) { 
     var target = e.target; 
     loading(); // loading 
     e.preventDefault(); 
     var dataset = $(e.target).closest('form'); 
     var product_id = $(e.target).closest('form').find("input[name*='product_id']"); 
     values = dataset.serialize(); 

     $.ajax({ 
      type: 'POST', 
      url: '?add-to-cart='+product_id.val(), 
      data: values, 
      success: function(response, textStatus, jqXHR){ 
       loadPopup(target); // function show popup 
       updateCartCounter(); 
      }, 
     });  
     return false; 
    });  

} 

function updateCartCounter() { 
    var counter = $('.widget_shopping_cart_content').text().replace(/\s/g, ''); 
    if (counter == '') { 
     $('.widget_shopping_cart_content').text("1"); 
    } 
    else { 
     $('.widget_shopping_cart_content').text(++counter); 
    } 
} 

var popupStatus = 0; // set value 

function loadPopup(target) { 

    var currentPopup = $(target).parents(".single_variation_wrap").find("#toPopup"); 
    var currentBgPopup = $(target).parents(".single_variation_wrap").find("#backgroundPopup"); 

    if(popupStatus == 0) { // if value is 0, show popup 
     closeloading(); // fadeout loading 
     currentPopup.fadeIn(0500); // fadein popup div 
     currentBgPopup.css("opacity", "0.7"); // css opacity, supports IE7, IE8 
     currentBgPopup.fadeIn(0001); 
     popupStatus = 1; // and set value to 1 
    } 
} 

function disablePopup() { 
    if(popupStatus == 1) { // if value is 1, close popup 
     $(".single_variation_wrap > div:nth-child(2)").fadeOut("normal"); 
     $(".single_variation_wrap > div:nth-child(4)").fadeOut("normal"); 
     popupStatus = 0; // and set value to 0 
    } 
} 
}); // jQuery End