@trenton

Как «сдружить» два ajax-запроса, чтобы один действовал после другого?

Кнопка добавления в корзину и фильтрация. Нет, не плагины - сниппеты. По отдельности действуют, и при загрузке страницы кнопка добавляет товары в корзину, и фильтрация фильтрует, но в отфильтрованных товарах кнопка не действует. Я думал после success сразу второй запрос вставить, как получилось со слайдером. но не получилось. Куда правильно его поставить, чтобы и в отфильтрованных товарах добавляло в корзину без перехода в карточку?
Первый
jQuery(function($)
{
    $('.categories.side-nav.log>#st-accordion>ul>li input, .sortby>.price-slider input, select.orderby').on('change',function(e){ 
        e.preventDefault();    
        themename_get_posts();
        jQuery('html, body').animate({scrollTop:0}, 1);
    });
    $('.orderby').on('change', function(e){
        e.preventDefault();
        themename_get_posts();
    });
    
    $(document).on("click",".ajax-page-numbers .page-numbers",function(e){
        e.preventDefault();

        var url = $(this).attr('href'); //Grab the URL destination as a string
        var paged = url.split('&paged='); //Split the string at the occurance of &paged=

        if(~url.indexOf('&paged=')){
            paged = url.split('&paged=');
        } else {
            paged = url.split('/page/');
        }
        themename_get_posts(paged[1]); //Load Posts (feed in paged value)
    });

    //Получают данные
    function getCats()
    {
        var cats = []; //Setup empty array

        $(".themename_filter_check input:checked").each(function() {
            var val = $(this).val();
            cats.push(val); //Push value onto array
        });

        return cats; //Return all of the selected genres in an array
    }
    function getColor()
    {
        var cats = []; //Setup empty array

        $(".themename_filter_pa_color_check input:checked").each(function() {
            var val = $(this).val();
            cats.push(val); //Push value onto array
        });

        return cats; //Return all of the selected genres in an array
    }
    function getSize()
    {
        var cats = []; //Setup empty array

        $(".themename_filter_pa_size_check input:checked").each(function() {
            var val = $(this).val();
            cats.push(val); //Push value onto array
        });

        return cats; //Return all of the selected genres in an array
    }
    function getPricesMin(){
       return $('#priceMin').val();
    }
    function getPriceMax(){
       return $('#priceMax').val();
    }
    function themename_order(){
        return $('.orderby option:selected').val();
    }
    function themename_get_posts(paged)
    {
        var paged_value = paged; //Store the paged value if it's being sent through when the function is called
        var ajax_url = woocommerce_params.ajax_url; //Get ajax url (added through wp_localize_script)

        $.ajax({
            type: 'GET',
            url: ajax_url,
            data: {
                action: 'themename_filter',
                category: getCats,
                pa_color: getColor,
                pa_size: getSize,
                min: getPricesMin,
                max: getPriceMax,
                order: themename_order,
                paged: paged_value //If paged value is being sent through with function call, store here
            },
            beforeSend: function ()
            {
                $('.main-product-content').html('<div class="text-center" style="height:50vh;">Waiting</div>');
            },
            success: function(data)
            {
                //Hide loader here
                $('.main-product-content').html(data);
                $('.main-product-content ul.products').addClass('row');
                jQuery('.slider-archive').each(function() {
                  var slider = jQuery(this);
                  slider.slick({
                  infinite: true,
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  driggable:false, 
                  dots: true,
                  arrows:true,  
                  focusOnSelect: true,
                });
                var sLightbox = jQuery(this);
                  sLightbox.slickLightbox({
                    src: 'src',
                    itemSelector: 'img.attachment-woocommerce_single.size-woocommerce_single',   
                  });
                }); 
                jQuery('.var-wrapper-pa_color .radio-span').click(function() {
                  jQuery('.var-wrapper-pa_color .radio-span').removeClass('attr-selected');
                  jQuery(this).addClass('attr-selected');
                });
                 // Add new slide
                
            },
            error: function()
            {
                //If an ajax error has occured, do something here...
                $(".main-product-content").html('<div class="text-center" style="height:50vh;">There has been an error</div>');
            }
        });
    }    
});


Второй
jQuery(function($) {

      $('form.cart').on('submit', function(e) {
        e.preventDefault();

        var form = $(this);
        form.block({ message: null, overlayCSS: { background: '#fff', opacity: 0.6 } });

        var formData = new FormData(form[0]);
        formData.append('add-to-cart', form.find('[name=add-to-cart]').val() );

        // Ajax action.
        $.ajax({
          url: wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'ace_add_to_cart' ),
          data: formData,
          type: 'POST',
          processData: false,
          contentType: false,
          complete: function( response ) {
            response = response.responseJSON;
            if ( ! response ) {
              return;
            }
            if ( response.error && response.product_url ) {
              window.location = response.product_url;
              return;
            }

            // Redirect to cart option
            if ( wc_add_to_cart_params.cart_redirect_after_add === 'yes' ) {
              window.location = wc_add_to_cart_params.cart_url;
              return;
            }

            var $thisbutton = form.find('.single_add_to_cart_button'); //
//            var $thisbutton = null; // uncomment this if you don't want the 'View cart' button

            // Trigger event so themes can refresh other areas.
            $( document.body ).trigger( 'added_to_cart', [ response.fragments, response.cart_hash, $thisbutton ] );

            // Remove existing notices
            $( '.woocommerce-error, .woocommerce-message, .woocommerce-info' ).remove();

            // Add new notices
            form.closest('.product').before(response.fragments.notices_html)
            form.unblock();
          }
        });
      });
    });


Хочу понять, как вообще подобное заставить работать вместе, часто надо.
  • Вопрос задан
  • 180 просмотров
Пригласить эксперта
Ответы на вопрос 1
cyber-jet
@cyber-jet
Предполагаю, что после фильтрации переписываются объекты в DOM, по этому, все что ранее было поставлено на прослушку, стирается. Есть несколько способов, как это исправить:
1. Вынести установщик прослушки событий отправки форм $('form.cart').on( 'submit' ... в отдельную функцию, и вызывать её каждый раз после фильтрации. Вариант так себе, говнокод :)
2. Слушать событие на объекте, который точно не стирается из DOM, например:
$( 'body' ).on( 'submit', 'form.cart', ...
3. Для любителей старой школы, написать функцию отправки в корзину в корне window. И вызывать её непосредственно на элементе:
<form onsubmit="addToCart();return false">...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы