Sweet Alert Woocommerce Добавить в корзину Подтверждение

Question

У меня есть плагин, который изменяет варианты Wordpress Woocommerce в формат таблицы. Я немного изменил код. Я пытаюсь реализовать Alerts Сладких 2 вместо предупреждений это дает теперь, когда пользователь успешно добавляет товар в корзину (или показывает ошибку.)

Исходный код в файле JS, который обрабатывает предупреждение здесь через конец файла.

$.ajax({ 

     'url' : wcvw_urls.ajax_url, 

     'method' : 'POST', 

     dataType:"json", 

     data : data, 

     success: function(res){ 

      if(res.type === 'success'){ 

       main_container.find('.wcvw_messages').html(res.message).fadeIn('slow'); 

       $this.addClass('added').removeClass('loading'); 

      }else{ 

       main_container.find('.wcvw_messages').html(res.message).fadeIn('slow'); 

       $this.addClass('').removeClass('loading'); 
      } 
      }, 
     }); 
     }); 
    })(jQuery); 

Код, который я пытаюсь получить, работает над работами ... но действует странно. Я не знаю много javascript, поэтому я знаю, что я не делаю что-то правильно. Когда я нажимаю кнопку, она добавит продукт в корзину, но сладостное предупреждение не активируется, пока не появится третий клик, но затем работает. Но работает только для первого продукта в списке. Может быть, нужна петля foreach?

Вот ссылка на мою страницу, если вы хотите увидеть, как он действует ... http://192.163.245.60/~oti/product/asfs-1100-v-series/

Просто нажмите на кнопку Добавить для Quote на первый продукт несколько раз. Второй продукт должен дать ошибку, но нет. Третий должен добавить продукты.

Вот мой модифицированный код, который я пытаюсь реализовать.

$.ajax({ 

     'url' : wcvw_urls.ajax_url, 

     'method' : 'POST', 

     dataType:"json", 

     data : data, 

     success: function(res){ 

      if(res.type === 'success'){ 
       //ORIGINAL CODE 
       // main_container.find('.wcvw_messages').html(res.message).fadeIn('slow'); 

       //Added Sweet Alert Success// 
       document.querySelector('.add-to-cart-success').onclick = function() { 
       swal({ 
        title: 'Product Added to Quote!', 
        type: 'success', 
        html: 
         '<div><a class="fusion-button button-flat button-square button-large button-default button-1" href="http://192.163.245.60/~oti/cart/">Send Quote Now!</a></div><br />', 
        timer: 10000, 
        confirmButtonText: '<i class="fa fa-times-circle"></i> Continue Shopping', 
        showCloseButton: false, 
        showCancelButton: false, 
        }); 
       }; 
       //End Success Sweet Alert// 
       $this.addClass('added').removeClass('loading'); 

      }else{ 
       //ORIGINAL CODE 
       //main_container.find('.wcvw_messages').html(res.message).fadeIn('slow'); 

       //Added Sweet Alert Error// 
       document.querySelector('.add-to-cart-error.sweet').onclick = function(){ 
       swal("Oops...", "Something went wrong! Please try again!", "error"); 
        }; 
       //End Error Sweet Alert// 
       $this.addClass('').removeClass('loading'); 
      } 
      }, 
     }); 
    }); 
    })(jQuery); 

Answer 1

При нажатии на кнопку, она будет добавить товар в корзину, но сладкая тревога не не активирующего до как 3 клика, но works.But работает только для первого продукта список.

Это происходит потому, что первый щелчок кнопки отправляет запрос Ajax, а затем, когда он возвращается вы связывание сладкого предупреждения в качестве обработчика клика в случай «document.querySelector (». Добавить к корзине -success')». Другими словами, первый щелчок привязывает событие, последующие клики после его привязки вызовут сладкое предупреждение.

Просто нажмите кнопку «Добавить в предложение» на первый продукт несколько раз. Второй продукт должен дать ошибку, но нет. Третий должен добавить продукты.

Все три кнопок имеют классы «добавить к проселочному успеху добавить к проселочной ошибке сладкой» и document.querySelector() возвращает только первый элемент, соответствующий запрос, так как для успеха и ошибка, которую обработчики ваших кликов свяжут только с первой кнопкой. Вы только когда-либо добьетесь успеха, так что предупреждение о победе - это единственное, что вы когда-либо видели.

Самое простое исправление - удалить "document.querySelector ('. Add-to-cart-success'). Onclick = function() {}" и "document.querySelector ('. Add-to-cart- error.sweet '). onclick = function() {} "полностью. Возврат к этому - это предупреждение не будет отображаться до тех пор, пока не вернется запрос ajax. Это хорошо, потому что вы не представляете ложную информацию. Вы только знаете, показывать ли сообщение об успехе или сбое после возвращения запроса.

Если вы хотите дать пользователю индикатор, как только он нажмет кнопку, а затем обновить предупреждение, когда запрос вернется, вы можете привязать базовое предупреждение к нажатию кнопки, а затем получить предупреждение от ajax-запрос на поездку, когда ваш запрос вернется.

JQuery:

(function($){ 

// Button click event binding 
$(document).on('click','.wcvw_varition_add_to_cart', function(){ 

    var $this = $(this); 
    $this.removeClass('added').addClass('loading'); 
    var main_container = $('.wcvw_main_container'); 
    var rows = $(this).closest('.wcvw_row_of_items'); 
    var qty_data = rows.find('.wcvw_quantity input').val(); 

    if(qty_data=="" || qty_data==undefined){ 
     qty_data = 1; 
    } 

    var data = { 

     'action' : 'add_varition_product_into_cart', 
     'product_id' : $this.attr('data-id'), 
     'qty' : qty_data 
    }; 

    // Initial alert when button is clicked 
    swal({ 
     title: 'Adding to Quote...', 
     showConfirmButton: false, 
     allowOutsideClick: false 
    }) 

    $.ajax({ 
     'url' : wcvw_urls.ajax_url, 
     'method' : 'POST', 
     dataType:"json", 
     data : data, 
     success: function(res){ 

      if(res.type === 'success'){ 

       //Added Sweet Alert Success// 
       swal({ 
        title: 'Product Added to Quote!', 
        type: 'success', 
        html: 
         '<div><a class="fusion-button button-flat button-square button-large button-default button-1" href="http://192.163.245.60/~oti/cart/">Send Quote Now!</a></div><br />', 
        timer: 10000, 
        confirmButtonText: '<i class="fa fa-times-circle"></i> Continue Shopping', 
        showCloseButton: false, 
        showCancelButton: false, 
        }); 

       //End Success Sweet Alert// 
       $this.addClass('added').removeClass('loading'); 

      }else{ 

       //Added Sweet Alert Error// 
       swal("Oops...", "Something went wrong! Please try again!", "error"); 
       //End Error Sweet Alert// 
       $this.addClass('').removeClass('loading'); 
      } 
     } 
    }); 
}); 
})(jQuery);