Opencart 2.x endless scrolling

Question

There is ajax loading of goods on the site, but it does not work correctly. About 200 goods are loaded only, not more. In the admin panel there are 30 products on the page.

Help make sure that all the goods are loaded.

Here is the code:

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++; } } }); } } });

Attach the HTML code of several pages so that readers can test your code using a live example .
I did not do anything yet, I wanted to ask here what should I do.
The @sanmai code found on the Internet, people there also wrote that it wasn’t correct, but the author would no longer update this code.
Tomorrow then I will install OpenCard and show it on a live example, otherwise I’m currently working on LAN.
Although you can download Opencart 2.1.0.1 (like mine) and add this code

O.Rysev O.Rysev 151 five · Accepted Answer · 2016-12-22T00:28:58

 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++"); }); } } }); } } });

Answer 2 · 2016-12-19T05:37:01

In the getNextProductPage function getNextProductPage you need to load the new list of pages into the pages array.

This operation is already being done in $(document).ready() , which means that it is only necessary to bring this logic into a separate function that will be called from two places.

This should be done because, by default, in OpenCart, the first page only shows links to several of the following pages:

Accordingly, when the page is loaded, the pages array is filled with links to these several pages, and the "infinite" scrolling stops when this list is exhausted.

If this list is updated from each of the next loaded page, then the scrolling will indeed be endless.

It is also possible that the creator of this script intentionally laid such a restriction, because the user once wants to reach the basement of the page. Think maybe you want it too!

I hide the pagination using display: none, so that users do not interfere with the PS they saw, that is, I could make all the pages in pagination, but now there are 8 pages on the first page in pagination, since there are 30 products per page , it turns out (8 * 30 = 240 products), but I don’t even show them all.
The script always loads different pages, for example 2, 3 and 8 can.

Opencart 2.x endless scrolling

2 answers 2

More articles: