@krinbin

Как подружить load more и фильтр товаров на ajax?

День добрый.

Перейдем сразу к делу.

На сайте стоит woocommerce в категориях есть кнопка load more которая подгружает товары без перезагрузки.
Так же есть фильтрация товаров, которая так же подгружает товары без перезагрузки.

Суть в том, что load more отталкивается от ссылки в пагинации на след. страницу

var desturl = $(nextSelector).attr("href");
т.е. изначльно имеет вид
https://domen.ru/shop/page/2/

Но если мы применяем фильтр, то у нас добавляется get запрос и ссылка у элемента пагинации меняется на
https://domen.ru/shop/page/2/?get=**

Так вот, с учетом того что все это происходит без перезагрузок, load more не видит, что пагинация изменилась и продолжает подгружать товары без учета фильтра.

Сам скрипт load more
jQuery(document).ready(function($) {
    var loading = false;
    var finished = false;
	var desturl = $(nextSelector).attr("href");

  if ($(nextSelector).length && $(navSelector).length && $(itemSelector).length && $(contentSelector).length) {} else {
        finished = true;
    }
        
    var first_elem = $(contentSelector).find(itemSelector).first(), columns = $(contentSelector).find(itemSelector + " last").eq();
    var mgkisr_main_ajax = function() {
        var last_elem = $(contentSelector).find(itemSelector).last();
        if (loader) $(contentSelector).after('<div class="magik-infi-loader"><img src="/loader.svg"></div>');
        loading = true;
        
         desturl = decodeURIComponent(desturl);
         desturl = desturl.replace(/^(?:\/\/|[^\/]+)*\//, "/");
         console.log(desturl);
	
	
    
		$.ajax({
            url: desturl,
            dataType: "html",
            cache: false,
            success: function(data) {
                var obj = $(data), elem = obj.find(".products " + itemSelector), next = obj.find(nextSelector), current_url = desturl;
                if (next.length) {
                    desturl = next.attr("href");
                } else {
                    finished = true;
                }
                var wooloop = 0;
                elem.each(function() {
                    var t = $(this);
                    if (wooloop % columns == 1) {
                        pgrid = "first";
                    } else if (wooloop % columns == 0) {
                        pgrid = "last";
                    } else {
                        pgrid = "";
                    }
                    t.addClass(itemclass + " " + pgrid);
                    wooloop++;
                });
                last_elem.after(elem);
                if (typeof grid_list_load !== "undefined" && $.isFunction(grid_list_load)) {
                    grid_list_load();
                }
                $(".magik-infi-loader").remove();
                setTimeout(function() {
                    loading = false;
                }, 100);
                if (finished) {
                    $(".load_more").hide();
                }
            }
        });
    };
	

	
	    $(".load_more").click(function() {
        $(this).trigger("mgkisr_scroll_start");
    });
    $(window).on("mgkisr_scroll_start", function() {
        var t = $(this), elem = $(itemSelector).last();
        if (typeof elem == "undefined") {
            return;
        }
        if (!loading && !finished) {
            mgkisr_main_ajax();
        }
    });

 
});


Если я правильно понимаю, необходимо в случае срабатывания фильтра, передать обновленную переменную var desturl.

Обертывал скрипт в $(document).ajaxComplete(function(data) { } , но это так себе затея.
  • Вопрос задан
  • 210 просмотров
Пригласить эксперта
Ответы на вопрос 1
@gian_tiaga
В чём проблема передавать теже гет параметры в desturl ?
Ответ написан
Ваш ответ на вопрос

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

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