Jump to content
frankl

Load More and Lazy Loading for product_listing.php

Recommended Posts

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?


Let's make things easier for new osCommerce users http://forums.oscommerce.com/topic/402638-discussion-about-hard-coded-database-tables/?p=1718900  Getting there with osCommerce 2.4! :thumbsup:

Share this post


Link to post
Share on other sites

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


Get the latest Responsive osCommerce CE (community edition) here .

(Live   : OsC 2.2, php 5.4 & UTF-8  |  Local : Phoenix for future shop)

Share this post


Link to post
Share on other sites

@@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 by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

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


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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

@@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)


Let's make things easier for new osCommerce users http://forums.oscommerce.com/topic/402638-discussion-about-hard-coded-database-tables/?p=1718900  Getting there with osCommerce 2.4! :thumbsup:

Share this post


Link to post
Share on other sites

@@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!

Share this post


Link to post
Share on other sites

@@azpro

 

Do you have any links or information related to mobile users preferring lazy loading compared to 'show more' button for ecommerce sites?


Let's make things easier for new osCommerce users http://forums.oscommerce.com/topic/402638-discussion-about-hard-coded-database-tables/?p=1718900  Getting there with osCommerce 2.4! :thumbsup:

Share this post


Link to post
Share on other sites

@@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 by azpro

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×