frankl Posted February 13, 2017 Share Posted February 13, 2017 I would like to implement a Load More button and Lazy Loading to replace pagination on the product listings. According to this article it is much more convenient for mobile users (a growing user base not just for e-commerce but for the web in general) when they are going through a list of products so I'd like to give it a try and do an A/B test. What it involves is displaying the first 12 (or whatever number, can be 12, 20, 50, 100) products onto the page, then using a Load More button which queries an ajax file to grab the next x number of products, and then to save on bandwith only loading images as the user scrolls via lazy loading. My problem is, how to get the same identical $listing_sql variable into both the product_listing.php module AND the ajax file. Any suggestions? Quote osCommerce user since 2003! Link to comment Share on other sites More sharing options...
bonbec Posted February 13, 2017 Share Posted February 13, 2017 Hello frankl, I see an addon width lazyload and others jquery scripts (but i don't try it). Perhaps it could help you ? http://addons.oscommerce.com/info/9109 Quote with OsC 2.2 since 2006 ... Link to comment Share on other sites More sharing options...
burt Posted February 13, 2017 Share Posted February 13, 2017 (edited) @@frankl here's one part of the puzzle; http://addons.oscommerce.com/info/9455 Maybe not, this one is not a "load more", it's a refresh Edited February 13, 2017 by burt Quote Link to comment Share on other sites More sharing options...
♥bruyndoncx Posted February 13, 2017 Share Posted February 13, 2017 i see a lot of jqueru, and made me wonder if there is something developed specifically for bootstrap found this https://gist.github.com/andrewburgess/5858439 Quote KEEP CALM AND CARRY ON I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support). So if you are still here ? What are you waiting for ?! Find the most frequent unique errors to fix: grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt Link to comment Share on other sites More sharing options...
MrPhil Posted February 13, 2017 Share Posted February 13, 2017 When a site does lazy loading to bring more data onto a page, is there a practical upper limit, where you really want to paginate at that point? I'm thinking of newspaper "letters" commentary where after a while, the page gets so huge that it's slow to scroll and even the browser can start acting funny. How about automatic loading of additional material while the visitor is browsing the previous load, as opposed to waiting for the visitor to OK additional loading? What are the practical implications of lazy loading? Quote Link to comment Share on other sites More sharing options...
frankl Posted February 14, 2017 Author Share Posted February 14, 2017 @@bonbec @@burt @@bruyndoncx Thank you all, very helpful. Basic load more implemented, test page is here https://www.inkhouse.com.au/advanced_search_result3.php?keywords=250 Problems: Grid/List setting won't stick, only loads list view even if grid is selected. Don't want to show 'Load More' button if no more results to load. No idea (never done this before) how to implement history.pushState so that the back button takes you back to the page with all the items previously loaded. SEO implications of this (keeping this to just the advanced search results would probably be best) burt 1 Quote osCommerce user since 2003! Link to comment Share on other sites More sharing options...
bonbec Posted February 14, 2017 Share Posted February 14, 2017 @@frankl, Great work ! This is very promising. PS : I just find a similar addon here (for Osc 2.3) : http://addons.oscommerce.com/info/9551 Quote with OsC 2.2 since 2006 ... Link to comment Share on other sites More sharing options...
azpro Posted February 14, 2017 Share Posted February 14, 2017 @@frankl Especially mobile users like lazy loading ... but really do not like the button. You can use the viewport / scrolling to load more products. Just a thought! I am sure I have seen several jquery / bootstrap solutions in the past .. can't find them now. Like to see your final result! Quote Link to comment Share on other sites More sharing options...
frankl Posted February 14, 2017 Author Share Posted February 14, 2017 @@azpro Do you have any links or information related to mobile users preferring lazy loading compared to 'show more' button for ecommerce sites? Quote osCommerce user since 2003! Link to comment Share on other sites More sharing options...
azpro Posted February 14, 2017 Share Posted February 14, 2017 (edited) @@frankl The hint was based on just a personal preference ... But off course there is a lot to think of. I have categories with almost 1000 products so this can be tricky. But the principle of Lazy loading is IMHO good. Found this article - seems interesting - and is stating in favour of your approach: However, our usability test sessions found “Load more” buttons combined with lazy-loading to be a superior implementation, resulting in a more seamless user experience. And about infinite scrolling: We found that infinite scrolling can be downright harmful to usability — in particular, for search results and on mobile. However, it’s not black and white, because the performance of each method varies according to the context of the page. Here is the link: https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/ Cheers! Arjan Edited February 14, 2017 by azpro Quote Link to comment Share on other sites More sharing options...
frankl Posted February 15, 2017 Author Share Posted February 15, 2017 @@azpro That's the article I linked in my original post ;) Quote osCommerce user since 2003! Link to comment Share on other sites More sharing options...
discxpress Posted March 7, 2017 Share Posted March 7, 2017 @@frankl Please check your PM Thanks Quote Link to comment Share on other sites More sharing options...
rudolfl Posted July 29, 2017 Share Posted July 29, 2017 Here is some info on SEO aspect: https://www.quicksprout.com/2014/05/21/how-to-create-an-seo-friendly-infinite-scrolling-page/ Rudolf Quote Link to comment Share on other sites More sharing options...
radhavallabh Posted June 18, 2022 Share Posted June 18, 2022 On 2/14/2017 at 8:04 AM, frankl said: @@bonbec @@burt @@bruyndoncx Thank you all, very helpful. Basic load more implemented, test page is here https://www.inkhouse.com.au/advanced_search_result3.php?keywords=250 Problems: Grid/List setting won't stick, only loads list view even if grid is selected. Don't want to show 'Load More' button if no more results to load. No idea (never done this before) how to implement history.pushState so that the back button takes you back to the page with all the items previously loaded. SEO implications of this (keeping this to just the advanced search results would probably be best) Hi dear; Please....Is this available as a addon seems to work wonderfully.... and really wish to add it to my shop... Thank you in advance; Very Warm Regds./ radhavallabh Quote Link to comment Share on other sites More sharing options...
New 
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.