ajax - WooCommerceプラグイン、Ajaxを介してカートにバリエーションを追加

Question

Ajaxを介して製品バリエーションを追加するためのソリューションを探しています。

私が知ったように、すべてのWooCommerceの基本機能では、バリエーションアイテムでない場合にのみ、カートに商品を追加できます。

カートに追加ボタンを表示するために使用<?php echo woocommerce_template_loop_add_to_cart() ?>していますが、このボタンは通常の送信ボタンです。

カートに追加するAjaxを使用して可変アイテムを作成するにはどうすればよいですか？

Answer 1

私は次のような変数製品を作成し、AJAX をカートに追加しました。

遅れて申し訳ありませんが、拡張された回答は次のとおりです。

added-to-cart.js という新しい 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