Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Load More and Lazy Loading for product_listing.php


frankl

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?

osCommerce user since 2003! :thumbsup:

Link to comment
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

Link to comment
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?

Link to comment
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)

osCommerce user since 2003! :thumbsup:

Link to comment
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!

Link to comment
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
Link to comment
Share on other sites

  • 3 weeks later...
  • 4 months later...
  • 4 years later...
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...