2

Есть ajax подгрузка товаров на сайте, но работает некорректно. Подгружаются около 200 товаров только, не больше. В админке выставлено чтобы на странице было 30 товаров.

Помогите сделать так, чтобы подгружались все товары.

Вот код:

var pagination_exist = false; // оставить пагинацию и добавить кнопку
var button_more = false; // наличие кнопки "загрузить ещё"
var top_offset = 100; // высота отступа от верха окна, запускающего arrow_top
var window_height = 0; // высота окна
var product_block_offset = 0; // отступ от верха окна блока, содержащего контейнеры

var product_block = '.product-list'; // определяет div, содержащий товары
var pages_count = 0; // счетчик массива ссылок пагинации
var pages = []; // массив для ссылок пагинации
var waiting = false;

function getNextProductPage(pages, pages_count) {
    console.log('getNextProductPage');
    if (waiting) return;
    if (pages_count >= pages.length) return;
    waiting = true;
    $(product_block).parent().after('<div id="ajax_loader"><img src="/img/30.gif" /></div>');
    $.ajax({
        url:pages[pages_count], 
        type:"GET", 
        data:'',
        success:function (data) {
            $data = $(data);
            $('#ajax_loader').remove();
            if ($data) {         
                if ($data.find('.product-list').length > 0)    {
                    $(product_block).parent().append($data.find('.product-list').parent().html());
                    if (product_block == '.product-grid') {$('#grid-view').trigger('click')};
                } else {
                    $(product_block).parent().append($data.find('.product-grid').parent().html());
                    if (product_block == '.product-list') {$('#list-view').trigger('click')};
                }
                if (pagination_exist) {
                    $('.pagination').html($data.find('.pagination'));
                }
                // $('script').each(function(){eval($(this).text())});
            }
            waiting = false;
        }
    });
    if (pages_count+1 >= pages.length) {$('.load_more').hide();};
}

function getProductBlock() {
    if ($('.product-list').length > 0) {
        product_block = '.product-list';
    } else {
        product_block = '.product-grid';
    }
    return product_block;
}

$(document).ready(function(){ 
    window_height = $(window).height();
    product_block = getProductBlock();
    var button_more_block = $('#load_more').html(); //
    var arrow_top = $('#arrow_top'); //
    if ($(product_block).length > 0) {
        product_block_offset = $(product_block).offset().top;
        var href = $('.pagination').find('li:last a').attr('href');
        $('.pagination').each(function(){
            if (href) {
                TotalPages = href.substring(href.indexOf("page=")+5);
                First_index = $(this).find('li.active span').html();
                i = parseInt(First_index) + 1;
                while (i <= TotalPages) {
                    pages.push(href.substring(0,href.indexOf("page=")+5) + i);
                    i++;
                }
            }       
        }); 

        if (button_more && href) {
            $('.pagination').parent().parent().before(button_more_block);
            if (!pagination_exist) {
                $('.pagination').parent().parent().remove();
            } else {
                $('.pagination').parent().parent().find('.col-sm-6.text-right').remove();
            }
            $('.load_more').click( function(event) {
                getNextProductPage(pages, pages_count);
                pages_count++;
            });
        } else if (href) { 
            $('.pagination').parent().parent().hide();
            $(window).scroll(function(){
                product_block = getProductBlock();
                product_block_height = $(product_block).parent().height();
                if (pages.length > 0) {
                    if((product_block_offset+product_block_height-window_height)<($(this).scrollTop())){
                        event.preventDefault();
                        getNextProductPage(pages, pages_count);
                        pages_count++;
                    }
                }
            });
        }
    }
});
3
  • Покажите что вы пытались сделать чтобы решить эту проблему. Что не получилось? Почему? Приложите HTML код нескольких страниц чтобы читатели смогли проверить работу вашего кода на живом примере.
    – sanmai
    20 дек 2016 в 0:24
  • Ничего не делал еще, хотел спросить здесь что мне делать. Код @sanmai, нашел в интернете, там люди тоже писали что не коректно раьотает, но автор уже не будет обновлять этот код. Завтра тогда установлю Опенкарт и покажу на живом примере, а то сейчас на локалке работаю. Хотя можно скачать Opencart 2.1.0.1 (как у меня) и добавить этот код
    – Abmin
    20 дек 2016 в 0:37
  • Попробуйте этот скрипт использовать. Его должно быть несложно доработать под вашу верстку.
    – sanmai
    20 дек 2016 в 1:19

2 ответа 2

2
+50
function getNextProductPage(pages, pages_count, callback) {
    console.log('getNextProductPage');
    if (waiting) return;
    if (pages_count >= pages.length) return;
    waiting = true;
    $(product_block).parent().after('<div id="ajax_loader"><img src="/img/30.gif" alt=""></div>');
    $.ajax({
        url:pages[pages_count], 
        type:"GET", 
        data:'',
        success:function (data) {
            $data = $(data);
            $('#ajax_loader').remove();
            if ($data) {
                console.log(pages[pages_count]);                
                if ($data.find('.product-list').length > 0)    {
                    $(product_block).parent().append($data.find('.product-list').parent().html());
                    if (product_block == '.product-grid') {$('#grid-view').trigger('click')};
                } else {
                    $(product_block).parent().append($data.find('.product-grid').parent().html());
                    if (product_block == '.product-list') {$('#list-view').trigger('click')};
                }
                if (pagination_exist) {
                    $('.pagination').html($data.find('.pagination'));
                }
                // $('script').each(function(){eval($(this).text())});
            }
            waiting = false;
        }
    });
    if(callback) {
        callback()
    }
}

function getProductBlock() {
    if ($('.product-list').length > 0) {
        product_block = '.product-list';
    } else {
        product_block = '.product-grid';
    }
    return product_block;
}

$(document).ready(function(){ 
    window_height = $(window).height();
    product_block = getProductBlock();
    var button_more_block = $('#load_more').html(); //
    var arrow_top = $('#arrow_top'); //
    if ($(product_block).length > 0) {
        product_block_offset = $(product_block).offset().top;
        var href = $('.pagination').find('li:last a').attr('href');
        $('.pagination').each(function(){
            if (href) {
                TotalPages = href.substring(href.indexOf("page=")+5);
                First_index = $(this).find('li.active span').html();
                i = parseInt(First_index) + 1;
                while (i <= TotalPages) {
                    pages.push(href.substring(0,href.indexOf("page=")+5) + i);
                    i++;
                }
            }       
        });

        if (button_more && href) {
            $('.pagination').parent().parent().before(button_more_block);
            if (!pagination_exist) {
                $('.pagination').parent().parent().remove();
            } else {
                $('.pagination').parent().parent().find('.col-sm-6.text-right').remove();
            }
            $('.load_more').click( function(event) {
                getNextProductPage(pages, pages_count);
                pages_count++;
            });
        } else if (href) { 
            $('.pagination').parent().parent().hide();
            $(window).scroll(function(){
                product_block = getProductBlock();
                product_block_height = $(product_block).parent().height();
                if (pages.length > 0) {
                    if((product_block_offset+product_block_height-window_height)<($(this).scrollTop())){
                        event.preventDefault();
                        getNextProductPage(pages, pages_count, function(){
                            pages_count++;
                            console.log("pages_count++");
                        });

                    }
                }
            });
        }
    }

});
1

В функции getNextProductPage вам нужно подгружать новый список страниц в массив pages.

Эта операция уже делается в $(document).ready(), а значит нужно лишь вынести эту логику в отдельную функцию, которая будет вызываться из двух мест.

Так нужно делать потому что, по-умолчанию в OpenCart, на первой странице показываются ссылки лишь на несколько следующих страниц:

список страниц

Соответственно, при загрузке страницы массив pages заполняется ссылками на эти несколько страниц, а "бесконечная" прокрутка останавливается по исчерпании этого списка.

Если же этот список обновлять с каждой следующей загруженной страницы, то прокрутка действительно будет бесконечной.

Возможно также что создатель этого скрипта намеренно заложил такое ограничение, ведь пользователю когда-то захочется дойти до подвала страницы. Подумайте, может быть вы тоже этого хотите!

2
  • Нет, мне нужна именно "бесконечная прокрутка". Пагинацию я скрываю с помощью display: none, чтобы пользователям не мешала а ПС видели, то есть я мог бы сделать и все страницы в пагинации, но там сейчас на первой странице в пагинации у меня есть 8 страниц, так как по 30 товаров на странице, это получается (8*30 = 240 товаров), но у меня даже их все не показывает. Показывает каждый раз по разному. Скрипт подгружает всегда разные страницы, например 2, 3 и 8 может. Иногда только 2 и 3.. в чем может быть проблема?
    – Abmin
    19 дек 2016 в 12:34
  • вы поможете мне?
    – Abmin
    19 дек 2016 в 17:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.