Infinite Scroll for Prestashop

[ibndawood]

Infinite Scroll Implementation for Prestashop. Automatically append the next page of products (via AJAX) to your page when a user scrolls to the bottom.

This module is based on the infinite-scroll jQuery plugin by Paul Irish

Source Code : https://github.com/Prestastrap/infinite-scroll-prestashop

Demo : http://demo.prestastrap.com/mudhal/en/19-bags

 

Latest Stable Release : 1.1 infinitescroll.zip

 

Previous Releases : (Including this just to keep track of total downloads)

 

1.0 - infinitescroll.zip

Features

• Works with any Prestashop 1.5.x theme
• Fully customizable to adapt to your site and theme
• Requires no (hopefully) template hacking, only a knowledge of CSS selectors.
• Countless API endpoints to modify the behavior.
• Backwards compatible: Will not break RSS readers, mobile devices, or browsers with javascript.
• Activated in 'best-sales', 'category', 'manufacturer', 'new-products', 'search' and 'supplier' controllers.

Installation

• Login to your Prestashop site as an Administrator
• Navigate to Modules->Add a new module on top right
• Upload the module zip file and click on Upload this module.
• Search for "Infinite Scroll" from Modules List and Click "Install"
• Click "Configure" to access configuration

Working with Block Layered Module

 

Block layered module uses ajax to load new products into the page after filtering. We need to create a new instance of infinite scroll everytime a the page is being refreshed.

• You need to edit the file blocklayered.js of the block layered module.
• Search for the function reloadContent (line 327 of Prestashop v1.5.6.0)
• Scroll down until you find this piece of code
  

  if (result.pagination.search(/[^\s]/) >= 0) {
  if ($(result.pagination).find('ul.pagination').length){
          $('div#pagination').show();
          $('ul.pagination').each(function () {
              $(this).replaceWith($(result.pagination).find('ul.pagination'));
          });
  }

• Replace the above piece of code with this one :
  

  if (result.pagination.search(/[^\s]/) >= 0) {
  if ($(result.pagination).find('ul.pagination').length){
      $('div#pagination').show();
      $('ul.pagination').each(function () {
          $(this).replaceWith($(result.pagination).find('ul.pagination'));
      });
      var noOfPages = $(result.pagination).find('ul.pagination > li').length; //Write the login to find the no of pages in your theme
      infinite_scroll.maxPage = noOfPages - 2;
      var path = 'modules/blocklayered/blocklayered-ajax.php?'+data+params_plus+n+'&p=';
      infinite_scroll.path = [ path , ""] ;
      infinite_scroll.dataType = 'json';
      infinite_scroll.template = function(data){
          var productList = '<div>' + data.productList + '</div>';
          var ht = $(productList).find(infinite_scroll.contentSelector).html();
          return ht;
      }
      $( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll, function(newElements, data, url) { eval(infinite_scroll.callback); });
  }

• And Infinite scroll should work with block layered module

Changelog

1.1

• 2013 December 7 - Fixed bugs related to blocklayered and module controllers.

1.0

• 2013 November 27 - 1.0 release.

Edited December 10, 2013 by ibndawood (see edit history)

[nadie]

Interesting module.

 

Thanks.

[Logical IT]

hi ibndawood,

 

I like your mudhal PrestaShop theme - very impressive - I'll keep it in mind for my next PrestaShop project.

 

Also thanks for making the infinite scroll module available for download.

 

Chris.

[ibndawood]

Hello Chris,

 

Thank you for your feedback. Appreciate it

 

Cheers,

Ibrahim Ibn Dawood

[nev]

This is awesome!!:) Thank you!

[ibndawood]

@nev, I am glad you liked it

[zanpo]

Hi, I just installed the module on my site www.veeshop.ro but it doesn't work, the pagination is still the old one. I replaced the code on blocklayered.js, what elso should i do? This are the settings in my module, they automatically appeared here, i'm not sure if they apply to my theme, i don't know what to put in the box Callback:

 

 

Thanks

[ibndawood]

Hi,

 

Thanks for trying out Infinite Scroll. The settings are for default prestashop theme. I saw your theme and you should use this setting for next Selector : #pagination_next_bottom > a

 

Also choose Behaviour as default and debug as Disable (the red button).

 

This should work. Let me know if it doesn't.

Edited December 3, 2013 by ibndawood (see edit history)

[indus]

Does not install on 1.5.6.1. Would be great if it works though. Thanks for the module. It says installed, but i cant find it when i search for it.

[ibndawood]

Hi Indus,

 

Are u sure ? I had tested it on 1.5.6.1 as well and it does work. Let me know what is the issue you are facing and I can fix it.

[indus]

Hi

 

The issue is, it says module downloaded successfully, but i cannot find it when i search for the module. Tried searching with words scroll, infinite etc.

[ibndawood]

Hi,

 

Make sure you are look in "Total" categories.https://www.diigo.com/item/image/4h50p/i7wd

Edited December 3, 2013 by ibndawood (see edit history)

[indus]

Hi,

 

Make sure you are look in "Total" categories.https://www.diigo.com/item/image/4h50p/i7wd

 

Wow, found it now.  thanks. Will let you know how it works. Wonder if this is a bug with prestashop search function of BO.

[ibndawood]

Nope its not a bug but a functionality

[indus]

Nope its not a bug but a functionality

 

The functionality of not being able to find what you are looking for? Or did i miss something  there. I probably had some category option selected on the left which is why i could not find it.

 

Btw, in prestashop 1.5, once you install a module, it automatically takes you to the relevant module for installation.

 

I have some bugs in the layered navigation right now, so iam waiting for a fix from the devs, i will make your modifications later to the code and let you know.

 

Works fine in principle though.

Edited December 3, 2013 by indus (see edit history)

[vekia]

added this stuff to free modules list :-)

[ibndawood]

The functionality of not being able to find what you are looking for? Or did i miss something  there. I probably had some category option selected on the left which is why i could not find it.

 

Btw, in prestashop 1.5, once you install a module, it automatically takes you to the relevant module for installation.

 

I have some bugs in the layered navigation right now, so iam waiting for a fix from the devs, i will make your modifications later to the code and let you know.

 

Works fine in principle though.

 

Yes probably you have selected some categories. Also the selected category is remember and it carries even if you logout and check back again. 

 

Sure try this and let me know how you like it  

 

All the best.

[ibndawood]

added this stuff to free modules list :-)

 

Thanks vekia I appreciate it !

[zanpo]

Hi,

 

Thanks for trying out Infinite Scroll. The settings are for default prestashop theme. I saw your theme and you should use this setting for next Selector : #pagination_next_bottom > a

 

Also choose Behaviour as default and debug as Disable (the red button).

 

This should work. Let me know if it doesn't.

 

 

Cool, works like a charm! it loads the products as it should, but when i filter them it messes all up

 

When I aplly a filter, it shows page 1, then page 6, and also it shows some products that are not from that filter

Edited December 4, 2013 by zanpo (see edit history)

[ibndawood]

Hello Everybody,

 

I have updated the code and readme.txt files. The code will fix bugs related to blocklayered and submitted via Github.

 

Let me know if you have any issues.

 

To update to the latest version:

 

• Just replace the infinitescroll.php file with the new one I have added.
• I have updated the code that needs to be added in blocklayered.js file

Thank you all for your feedback.

[indus]

Hi

 

So i no longer need to edit the blocklayered tpl file now? Is the fix added to the updated module?

[ibndawood]

You need to do 2 things :

 

* You need to edit the blocklayered.js file. I have updated the code that needs to be replaced. You can check it in the description.

*  Replace the infinitescroll.php with the new file in the zip or you can get the file from the github source.

[kurkastudio]

Great job, You are a genious. Thanks a lot! Instalation takes me less than 60 seconds. Everything is working great on PS 1.5.6.0

[suman.vats]

Awsome module Dude keep it up

 

Thanks

Suman

[HACKVTT]

Wow, it's so great my Bro.. No words to say (y)

[hemanaco]

Hello,

 

I have a small problem. Your module works perfectly but it loads all categorize.

For example, it loads page 1, 2, 3 and after others products in a other categorize.

 

could you see it on my site : www.lesmalicesdemagali.fr  click on "boucles d'oreilles" ...

 

if you have a solution ... thanks !

[ibndawood]

Thank you everybody for your feedback.

 

@hemanaco, thank you for your inputs. Unfortunately I am not able to understand your website (sorry only English).  I am not sure what error you are facing. But I can see you have enabled Block Layered module. Can u please confirm that you had modified blocklayered.js file as I mentioned in the instruction?

 

Thank you again.

[hemanaco]

When i'm on a category, it loads page1, 2, 3 without problem but after it loads products from an other category reasonless.

 

I did the modification of the blocklayered but there's no change.

 

If you have an solution !

Edited December 18, 2013 by hemanaco (see edit history)

[3dstaff]

Thank you so mutch ibndawood, here prestashop 1.5.6 works really good, notice that if you have third-party themes, you have to look at the structure of your category page, sometimes the div names can be different, also the tag "<li>" can be "<div>" i noticed my "#content_sort_pagiBar" is "#pagination" and " product_list > li " is " product_list > div "
2 cents

[ibndawood]

Hello 3dstaff,

 

Thank you for your feedback. If you have a third-part theme, you can always configure it using the module

[3dstaff]

yes yes, i configured it on a third-party theme and work really fast and look very good!thank you

[fuskoz]

It's working perfectly on my Ps 1.5.6.0 Thank you a lot for this module.

My only concern is translating page 1,page 2, page 3 ....showing when scrolling down.
I couldn't find any "Page" word in the translation section matching this module or in the front office. can anyone help me?

[wrkalot]

I would actually like to remove the Page 2, Page 3, etc text and center the "loading" graphic but can seem to locate the correct files to edit.

[ibndawood]

Hello,

 

Please look for line 364 in jquery.infinitescroll.dev.js

 

you will find this code :

var pageTitle = '<h2 id="product-page-'+opts.state.currPage+'" class="infinite-scroll-page-title">Page '+opts.state.currPage+'</h2>';

You can remove it or add your own translation. You will have to compress this file and save it as a minified file.

[hemanaco]

No ideas for my problem ?

[ibndawood]

Hi Hemanaco,

 

Please give me sometime to get back to you. Thank you for your patience.

 

Thanks again,

Ibrahim

[hemanaco]

Ok Thanks ibndawood !

 

Merry Christmas

[flohen]

thank you ibndawood

ouawahou, top your module

i try to remose "page 1","pages 3,etc""

i see "var pageTitle = '<h2 id="product-page-'+opts.state.currPage+'" class="infinite-scroll-page-title">Page '+opts.state.currPage+'</h2>';" but "page 1 and page2, are alredy here

i try later

have you a solution for your module: i want to see only product than quantity are >0 ( dans gestion avancé des stock)

thank you so much

PS i see your theme and it s a goob job

I have a little probleme on my site

i can choise "grille or list" and when i go to the end of the pages  the button 'grille or list' was no here

have you a solution for this probleme

BYE

 

(i thing i try to use google translator.....)

Edited December 27, 2013 by flohen (see edit history)

[ggupta77]

I installed this module and its an awesome module but I am facing an issue.

 

When I am scrolling down to see more options, it is removing the product sorting combo box option.

Please look at this.

My site url is http://www.fonegallery.com

 

[kodali_sudhakar]

Hi,

 

We have downloaded the code and replaced the infinite scroll module. Bug still exists when i filter.

 

Can you please help us in solving this issue.

 

We are using product filter module not blocklayered.js

 

Your response is much appreciated to solve the issue.

 

Thanking you,

Sudhakar.

[jerou]

I tried on my beta website to implement this module but it doesn't work here is an example page on my beta website http://beta.jsfrance.com/index.php?id_category=3&controller=category

The theme is not the default theme and i can't find wich value to replace in the module configuration.

Could you please help me on that? Thanks

[ibndawood]

For everybody requesting support. I'd like to tell you that I am currently not at work and will be back next week. I will answer to all your questions when I am back. Thank you and have a wonderful new year.

[alex-juz]

Hello ibndawood, I want to thank you for the great module. I have a question - after unchecking/cancelling blocklayered module filter items, pages are not loading, I need to reload the page manually, after this infinite scroll work again. will be corrected this bug?

Edited January 11, 2014 by alex-juz (see edit history)

[dbeezer99]

Okay I followed you direction to the "T" and its not working. I really really want this mod thank you for all your work! Ok here is screen shot of code I replaced as instructed: http://prntscr.com/2k8kvk

 

I didnt replace infinitescoll.php because you updated it dec. 2013 so i assume its already updated OR do i still need to do that? 

 

You can view my store at:  http://buynowwholesale.com/en/#&panel1-1

[dbeezer99]

Im guessing I need to make changes to the configuration. I use theme called Millennium and not sure what i should change..Thanks in advance for all your help!

[ibndawood]

Hello there everybody.

 

I am back form my holidays and ready to active in the forums again. Since most of the issues are with the block layered, I cannot really give a common solution because block layered is not part of the module code. But I am available on skype and I will take a look at your code and write a custom code fix for you. 

 

My skype name is ibrahimibndawood

 

Sorry once again for the delay.

[nev]

Hi ibndawood,

I have the same thing happening like zanpo.. When the products are filtered there are paginated without the infinite scroll.. I was wondering if you have any ideas what to do in this case?

Thanks a lot!!

[dbeezer99]

Ive sent you two messages on skype..i really need help..thx!

[dbeezer99]

Big two thumbs up to the coder of this module. Thanks you so much for taking the time to help me configure this! Youre awesome!

[ibndawood]

Big two thumbs up to the coder of this module. Thanks you so much for taking the time to help me configure this! Youre awesome!

 

Thank you Dale.

 

As with most of the posts here its a matter of configuration and a little customization. So any one having problem with this module please add me via skype and I'll do my best to set it up.

[alex-juz]

I want to thank ibndawood for helping to set up the module on the site www.parketmaister.ua. Now users can now choose products faster using Ajax-scroll!

[dbeezer99]

Well with the help of the developer i installed and configured this module but i had my backend set to view 1000 products per page and i thought this scroll option was working but i was able to scroll down through all my product because of this preference set by the way i changed it to 50 and the module is working. My question for the developer or anyone on this thread is this: what is the difference or benefit on using this scroll module? i ask because if i set up the preference to show 1000 products per page then the visitor can scroll down with out any waiting for the load bar so why use the module in the first place. there must be a benefit?

[grosseskino]

I would actually like to remove the Page 2, Page 3, etc text and center the "loading" graphic but can seem to locate the correct files to edit.

Quick and dirty solution:

 

edit your global.css (in your theme\css) and add the following line to the end of the file:

.infinite-scroll-page-title{
    display: none;
}

[grosseskino]

Very nice Module.

 

Only one little flaw:

 

Some of my utf-8 chars are encoded wrong:

i.e. the EURO letter becomes â¬

Any fix for this?

 

UPDATE

 

Quick fix for this:

Edit jquery.infinitescroll.dev.js
Search for " $.ajax({ " and replace with " $.ajax({ encoding:'UTF-8', "
Rename to jquery.infinitescroll.js

Edited January 29, 2014 by grosseskino (see edit history)

[dbeezer99]

okay i really like this module and it it helping as my category's get bigger. But the scroll function gets stuck . I checked to see if it was happening in a different browser and it is so I had to turn it off. Any clue on how to fix this. It was working fine until i recently had couple thousand products and new categories. Here is screen shot:

 

http://prntscr.com/2pbo0u

[badelakshmi]

Hi ibndawood,

 

I want to add one function in call back. How can i get the customer id from the cookie. for eg. `'{$cookie->id_lang}`.

 

Is that possible?

 

 

 

Thanks,

Laks..

[badelakshmi]

Hi ibndawood,

 

I want to add one function in call back. How can i get the customer id from the cookie. for eg. `'{$cookie->id_lang}`.

 

Is that possible?

 

 

 

Thanks,

Laks..

 

It's Resolved by using jquery live function. Thank you Ibndawood.

[patrmich]

Hi Ibndawood,

Thank you for your great module, that I am testing on a draft shop made with Prestashop 1.5.6

1- When I scroll down on a product-list page, I cannot see any change in the url page name.
Is it normal ?
(when using another Infinite scroll module, an extension is added at the end of the url address, such as #/page-4)

2- Is your module fully SEO compatible ?

3- Is there a way to set the start of the loading of page 2, some pixels (in height) before reaching the bottom of page 1 ?

4- After the loading of all pages, at the top of the first page is displayed : Page 2, Page 3, Page 4,...
Is it possible to avoid such display ?

5- Where to translate the word "loading" ?

Once again, thank you very much in advance if you have time enough to reply.

Patrick

Edited February 17, 2014 by patrmich (see edit history)

[sm5k]

Hi ibndawood, would be great if you accept my skype add

 

Thx a lot in advance,

SM5K

[dbeezer99]

Me too..This coder is a good guy and he did take the time to help me get this working but it stopped working again for some reason. he is very busy teaching but its been weeks and i still havnt heard back from him. tried reaching via skype and email for weeks. Its a great module when it worked. 

[ibndawood]

Hi there everybody,

 

Yes I am away teaching classes and it will be over tomorrow. I will access skype on monday and will respond to everybody including this forum.

 

Thank you for your patience.

 

Cheers,

Ibrahim

[sm5k]

Hi Ibrahim,

 

thank you for that fast answer. Good Luck with your classes and enjoy the weekend.

Looking forward to your connect.

 

Greetz

SM5K

[dbeezer99]

Me too! Ill be available on Skype as well Monday morning! I know your busy so thank you for your time!

[sworld]

Thanks for the Super Module

 

Demo at http://stationeryworld.com/best-sales

[auther]

I tried on my beta website to implement this module but it doesn't work here is an example page on my beta website http://beta.jsfrance.com/index.php?id_category=3&controller=category

The theme is not the default theme and i can't find wich value to replace in the module configuration.

Could you please help me on that? Thanks

 

Same problem... help please...

[sm5k]

Hey Ibrahim,

 

thanx for that awsome and quite fast skype support. I honestly can mention your modules to everyone!

Greetz

SM5K

[skgupta]

 

Infinite Scroll Implementation for Prestashop. Automatically append the next page of products (via AJAX) to your page when a user scrolls to the bottom.

 

This module is based on the infinite-scroll jQuery plugin by Paul Irish

 

Source Code : https://github.com/Prestastrap/infinite-scroll-prestashop

 

Demo : http://demo.prestastrap.com/mudhal/en/19-bags

 

Latest Stable Release : 1.1 infinitescroll.zip

 

Previous Releases : (Including this just to keep track of total downloads)

 

1.0 - infinitescroll.zip

Features

• Works with any Prestashop 1.5.x theme
• Fully customizable to adapt to your site and theme
• Requires no (hopefully) template hacking, only a knowledge of CSS selectors.
• Countless API endpoints to modify the behavior.
• Backwards compatible: Will not break RSS readers, mobile devices, or browsers with javascript.
• Activated in 'best-sales', 'category', 'manufacturer', 'new-products', 'search' and 'supplier' controllers.

Installation

• Login to your Prestashop site as an Administrator
• Navigate to Modules->Add a new module on top right
• Upload the module zip file and click on Upload this module.
• Search for "Infinite Scroll" from Modules List and Click "Install"
• Click "Configure" to access configuration

Working with Block Layered Module

 

Block layered module uses ajax to load new products into the page after filtering. We need to create a new instance of infinite scroll everytime a the page is being refreshed.

• You need to edit the file blocklayered.js of the block layered module.
• Search for the function reloadContent (line 327 of Prestashop v1.5.6.0)
• Scroll down until you find this piece of code

  if (result.pagination.search(/[^\s]/) >= 0) {
  if ($(result.pagination).find('ul.pagination').length){
          $('div#pagination').show();
          $('ul.pagination').each(function () {
              $(this).replaceWith($(result.pagination).find('ul.pagination'));
          });
  }

• Replace the above piece of code with this one :

  if (result.pagination.search(/[^\s]/) >= 0) {
  if ($(result.pagination).find('ul.pagination').length){
      $('div#pagination').show();
      $('ul.pagination').each(function () {
          $(this).replaceWith($(result.pagination).find('ul.pagination'));
      });
      var noOfPages = $(result.pagination).find('ul.pagination > li').length; //Write the login to find the no of pages in your theme
      infinite_scroll.maxPage = noOfPages - 2;
      var path = 'modules/blocklayered/blocklayered-ajax.php?'+data+params_plus+n+'&p=';
      infinite_scroll.path = [ path , ""] ;
      infinite_scroll.dataType = 'json';
      infinite_scroll.template = function(data){
          var productList = '<div>' + data.productList + '</div>';
          var ht = $(productList).find(infinite_scroll.contentSelector).html();
          return ht;
      }
      $( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll, function(newElements, data, url) { eval(infinite_scroll.callback); });
  }

• And Infinite scroll should work with block layered module

Changelog

1.1

• 2013 December 7 - Fixed bugs related to blocklayered and module controllers.

1.0

• 2013 November 27 - 1.0 release.

 

Hi ibndawood,

Thanks for infinitescroll module.

It's great!!!

[auther]

Thanks Ibrahim for awesome and quick skype support. I recommend this modules to everyone!

 

My PS version: 1.5.4.1

 

Cheers,

Asif

[freemall]

Dear ibndawood,

 

is it works with prestashop 1.6.0.5 ?

 

thanks

[mushhadi1]

hi, I am using PrestaShop 1.6 with its default theme. Did you release the updated version of infinite scroll for prestashop 1.6x. It is really appriciated module

[mypreesta]

Hi,

 

 

I have tested it on my prestashop website and its not working. Here is the url http://www.3g-logic.in/16-casual-diamond-rings-

 

Could you please help me out so that i can make it working.

 

Regards

Javed

[Sashok]

PS 1.6 ?

 

thanks

[cagrie]

installed on 1.6, scroll works but images disappeared. strange.

 

nice though, thanks.

[gigig987]

Great module!
I wonder if there is a way not to append the h2.

<h2 id="product-page-4" class="infinite-scroll-page-title">Page 4</h2>

 

Because i set my products as a grid and this break the rows
many thanks

[icydrago]

Thank you for extension! Works good on 1.6.
But there is a small bug... The definition of <h2 id="product-page-2" class="infinite-scroll-page-title">Страница 2</h2> is written in JS file without using language variables. So if I need "Страница 2" instead of "Page 2", I need to edit JS file.
You may add JS variable definition in template of a hook.

Great module!
I wonder if there is a way not to append the h2.

<h2 id="product-page-4" class="infinite-scroll-page-title">Page 4</h2>

 

Because i set my products as a grid and this break the rows
many thanks

You may switch it off with css.

[icydrago]

Or edit JS file of the module (it is appended in js).

[gigig987]

yeah thanks. I commented that part in the JS it works fine.

[sparrowsitn]

Any solution with this module and layered navigation to work fine?

The problem is when use a filter in layered navigation and scroll down, products appear not belong to that category.

 

thanks

Edited June 5, 2014 by sparrowsitn (see edit history)

[gigig987]

Any solution with this module and layered navigation to work fine?

The problem is when use a filter in layered navigation and scroll down, products appear not belong to that category.

 

thanks

yeah i have the same issue. 

also how can i make this works in the search result page?

Edited June 9, 2014 by gigig987 (see edit history)

[Trip]

Ne1 has this working with the 1.6 standart theme?

Thx in advance, Trip

[ender666]

presta 1.6.0.6 not working at all. It doesnt show on category page  

[icydrago]

Prestashop 1.6.0.6 - works good!

[ender666]

Prestashop 1.6.0.6 - works good!

Did you change anything in infinitescroll setup?  On my default 1.6.0.6 theme after infinitescroll install it shows pagination as always and no infinite scroll.

[icydrago]

Did you change anything in infinitescroll setup?  On my default 1.6.0.6 theme after infinitescroll install it shows pagination as always and no infinite scroll.

 I didn't change sourse code of the module. 

You need to make a setup of the module according to your theme.

[nikhilrjput497]

hey i have installed infinite scroll, it works fine but when i clicked 'add to cart' on page-2 products it redirects me on checkout page, i think it should add product to the cart and should not redirect to the checkout page.. please help

 

thanks in advance