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 that you have read and understand our privacy policy and code of conduct.

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