Magento product list AJAX scroll v1.1

Last month I posted an article describing our free Magento extension: Magento product list AJAX scroll. It enables your customers to view more products at less effort, hence having a positive influence on conversion. After some positive reactions to this extension we decided to enhance it with a new functionality; a scroll to top button.

More and more customers find us to optimize their Magento hosting infrastructure. This enables them to serve thousands of products in categories at lightning speed (< 100ms serverside response time). And this was what inspired us to apply AJAX scrolling in the first place. It however, does have a downside, in these very large product listings... After five minutes of downwards scrolling, the user might find himself lost from the essential navigational features Magento offers...

So after some time this visitor might decide to actually use one of Magento's navigational features, like the header menu, the layered navigation or the quick search widget. 99% of the Magento design packages out there will place these features at the top of the page. By now your visitor will start panicking, kicking and screaming out of pure frustration. The way to the top seems to long... The visitors' index finger, completely worn out by scrolling down, will now fail. Leaving the visitor with no other option then to sue you...

Hit the button and fly back up
To solve this the problem, a scroll to top button will now magically appear in this all new version. It will do so in the right bottom corner of the screen, after the visitor does some scrolling. Clicking the scroll to top button will return the pages’ focus back on to the start of the page. It will add a nice easing animation effect to the mix, giving your shop a classy look and feel. Check out the demo here. When you’re done, you can download the drop-in extension for Magento here, should work for Magento 1.4, 1.5, 1.6 and 1.7, taking into account the conditions described in the previous article.

Magento Scroll to top

Magento Scroll to top

Reinventing the (scroll)wheel is pointless, so to make this button appear we included the UItoTop jQuery Plugin. This nice little plug-in was created by Matias Varone . Again, like the Ajax Infinite Scroll plugin, this one requires jQuery (which is included in the extension). So the same story described in the previous post applies.

The same 10 step basic installation and upgrade instruction apply. To summarize once more;
1. Download the zip, version 1.1 (DUH!)
2. Extract it’s contents to the root of your Magento installation. You can use FTP to do that. It’s the directory containing index.php [App] [Skin] [Media] among others
3. Log in to your Magento backend
4. Go to System -> Cache Management, select all options, and in the action dropdown select “Refresh”. Then click Submit.
5. Log out/in to your backend
6. Go to System -> Configuration -> Catalog and drop down the “Front-end” selection
7. The extension adds a new option here; “Use jQuery Infinite Ajax Scroll” and this new version adds the option “Use jQuery UItoTop”.
8. Set both “Use jQuery Infinite Ajax Scroll” and “Use jQuery UItoTop” to “Yes”
9. Click save config.
10. All done!

Gimme! Gimme!
Checkout the new version here.

Like this free extension?
Let us know, and like our Facebook page!

89 thoughts on “Magento product list AJAX scroll v1.1

  1. I installed the scroll 1.1 V
    First of all Awesome Job and thank you so much cause iw as looking for it for quite a long time.
    I have an issue that the Scroll to top animation doesnt appear on my site even when it’s enabled. Not sure if you came across or know the solution. Any help would be appreciated

      • Hmm you filled in your website in the reply :-). It appears the easing jQuery easing plug-in JS code cannot be parsed, probably because of the CSS/JS combiner. Could you try to turn that of and see if that makes a difference? If so, we’ll fix that :-).

        • uncombining CSS and Javascript didn’t fix the issue.
          One of my developers told me it’s the issue with jquery version. He says it’s not working with jQuery 1.7

  2. Great plugin, but I noticed once the extension is working, it will change the url of the listing page if you scroll down, which would break the refresh and go back one page functions of the browser, any solutions for this?

    • Hi Jude,

      Go back; instead of going to the “previous page”, the screen will jump up to the position of the first product of what would have been the previous page. Unit you reach page 1 and then it will go back to the page you visited before that. In a sense, that is the same thing that would happen without the extension :-).
      Refresh; If you refresh with an active bookmark (f.e. #p=5, it will reload all 5 pages and scroll down while doing so). Again in a sense the same thing that would happen normally, but indeed, it will reload ALL page visited so far.

      Check the demo to see what happens. If your browser does not act like I described, let me know! And we’ll see if we can fix it :-). The plug-in will disable itself for IE7 and lower (it will show the normal pagination links, like nothing happened).

      • Hi Pieter,

        Thank you for your fast reply. The go back seems fine, but sorry I’m still confused by the refresh function.
        In my case, my default category url is baseurl/category1.html, after I scrolled down, it’s changed to baseurl/page/1 or baseurl/page/2, unlike the demo site, it didn’t have the category url in it, so when I tried to refresh, I got a 404 error. Does it make any sense to you?
        Thanks

          • sorry it’s not on live yet…
            so if I manually input the url as baseurl/category1.html#/page/1, it will redirect me to baseurl/page/1, but I will get the right page, instead of the 404 error…

          • Hmm, a redirect like a 301 or 302? Seems like it doesn’t change the urls like it should (and it loads the entire url instead of an AJAX call). Did you customize the pager.phtml template? Or can’t follow my drift? In that case, if possible, I would need some login data to check that myself :-).

          • Hi Pieter,

            I think I’ve found the problem. So if the current category has a parent category(for example, url like baseurl/parentcategory/currentcategory.html/), the extension works fine; but if the current category has no parent category(url like baseurl/currentcategory.html), the error would occur.

  3. Finally, it was a conflict with my ajax filter extension, this plugin is totally great, thank you for your time, Pieter.

  4. Hi Pieter!

    First I would like to thank you for the great extension. I have tried to install some other free, but had never succeeded. The version “1.0” also was not working, but version 1.1 has worked in our store.

    The only thing that is not working is the “Scroll to Top”, which is already enabled in the admin but when checking in the Chrome Developer Tools, see that there is an error “Uncaught TypeError: Object [object Object] has no method ‘UItoTop ‘”. Could you help me solve this problem?

    • Hello Beto,

      Could you try and disable JS combining? I can see you have that enabled and it looks like Magento is combining the JS files in the wrong order. If you can’t follow let me know!

    • Hello Ashwin,

      The JS will not change Magento pagination. If the visitor does not use JS, the page will work as it would with the extension.
      Google bot does not use JS. The extension will have 0 effect on it.

      The extra products loaded in JS are not loaded as fragments. Your browser will actually request the entire page (like it would when clicking page 2), and take the product part out of the response. The article you mention is relevant if you load the data in fragments. This extension does not.

  5. Love the extension. It’s pretty fast on my site but nothing like your demo.

    Is there any way to disable the #/page/1 hash tag? It’s really unnecessary and quite ugly. I spent a lot of time crafting my URLS to be visually appealing with Capitals_and_Underscores.

    What do you guys charge per hour for optimization tuning? We just switched over to a server with varnish but I think we have pretty low cache hits.

  6. Hey Petter,

    I have installed this plugin in my local fresh magento installation it is working fine. We want to integrate with our site. But i am getting

    detailed error: TypeError: jQuery.ias is not a function
    error source line:
    [Break On This Error]

    jQuery.ias({

    From the source code of the page it seems that it is problem with JQuery version. I think it is the problem with JQuery version. We can not remove the older version, if we do so our existing code will break.

    It would be helpful if you give some input.

    http://www.demo.mouse-e.com/home-appliances.html?p=2

    Thanks in advance

    Mohsin

    • Hello Mohsin,

      jQuery is included 4 times.
      1. In L:24
      2. In L:50
      3. In L:52
      4. In L:63

      Please make sure it is only included once.

      Are you sure you can’t use 1.6.4 to replace your 1.4.2? What would break? jQuery is more or less backwards compatible most of the time.

      Cheerz.

        • Yes, the paths to the pager are not correct; the class of the bottom pager is “toolbar_bottom”. It’s defined as “toolbar” by default in the ias template. So change that in the template and it will hide your toolbar/pager (read the part about custom themes in the first post (about v1.0)).

          • Hi Pieter,

            Ajax loader working fine. I am facing issue like, if there are only say 3 product in the page, If i scroll down, it is loading say product again, it is repeating, What may be the issue, with the fresh installation it is working.

            Thanks in advance.
            Mohsin

  7. Hello,

    Very very thanks for provide extension….

    I have implement all thing as per given suggestion…

    but still its not working as per shown in demo…

    “Go to top ” is working fine…

    but loading next page is not working ….

    please help me….

    thanks & regards
    Praful

        • Hi Praful,

          Good looking site.

          When I check; http://www.prafful.com/sarees.html all the products are shown… There is no pagiation? In order to use AJAX pagiation, the normal Magento pagiation has to be active. You can fine-tune it in the backend; System -> Configuration – Catalog -> Frontend. The number of products has to be less then the total of the collection your are viewing, in order for AJAX scroll to work :-).

          • Hello,

            Sorry It was my mistake..
            I was set “Allow All Products per Page” to Yes.
            Now , I set all variable as per default configuration..

            But still ajax scroller not coming/working…

          • Hello,

            I resolved this issue…

            Bug: the class name “next” and “prev” were used in header block…so class name was conflicted …

            Now I renamed it. So AJAX Loader is working fine..

            Thank you very much!!!!

            Best Support!!!

    • Sure, but then you’ll have to change the JS.
      However; it would break the back button and bookmark support in browsers.

  8. Hello,

    Gr8 extension and a big thank you for sharing it for free, I have a question-

    Can the auto scroll be controlled by a click? so when someone clicks the bottom link then the extension loads more pages and not auto load them?

    Thanks for the help

  9. Hi,

    Thanks for your great module.i am having this error.can you please help me to fix it asap.

    Fatal error: Call to a member function addCss() on a non-object in /hsphere/local/home/c261306/we2solutions.com/store/app/code/local/JoomlArt/Jmtabs/Block/Core.php on line 70

    Thanks
    Duminda

  10. I have tried with both the versions of this module but I am not even able to see the Module in the configurations–>Advanced and also not able to see any option which you had told to see in Configuration–>catalog

    • Hello Abhimanyu.

      That can mean two things;
      – You extracted the ZIP in the wrong place.
      – The webserver (the user as which PHP executes) can not read the files.

      Please make sure that if you go to app/etc/modules/ you can see RapidCommerce_Ias.xml along with a lot of other (Mage_*.xml) files. If Magento can read that file allong with the one in app/code/local/RapidCommerce/Ias/etc/config.xml the module will ALWAYS show up in System -> Advanced.

  11. Hi Pieter,

    I downloaded this extension for one of my clients. Its working fine on catalogsearch page but since there are no categories on the website, all products are in default category and we are using amshopby extension to display the products. Can you please help how we can use ajaxscroll on shopby page? Urgent help would be appreciated.

    Thanks heaps,
    Rad

      • Hey Pieter,

        An update on my comment this morning. We are able to resolve the issue and yes, there was no issue with the extension, it was some other buggy code. Your extension is awesome. Thanks heaps to you.

  12. Hi Pieter,
    Thanks for your great module!
    I want to ask you something. Instead of load more products on scroll, can i have a load more products button trigger on click?

    Thanks,
    Aris

    • Hi Aris,

      No at this moment you cannot. But we received a few requests for this feature, so we will include it in the next release. Like our facebook page to stay up-dated for new free Magento extension releases :-).

  13. Hi Pieter,
    Our client wants to implement the ajax scroll to load 50 products in first go and then 10 with each page, is it possible with your extension. Please advice.
    Thanks heaps,
    Rad

    • Hello Rad,

      You do not need us for that.

      Make sure both 50 and 10 are allowed for “Results for page” in System -> Configuration -> Catalog -> Frontend.
      Set the default value to 50.

      Now edit your pager.phtml template. There is a loop in there that generates the page links (Page 1 / 2/ 3 etc) Implement an if, check if the “p” parameter is set (getParams function in the Request object returned from getRequest, google it). If it is set, and it does not equal 1, then you append &limit=10 to the link in the href. Now the first link wil be mysite.ext/mycat/?p=1 and the others will be mysite.ext/mycat/?p=X&limit =10.

      Result; the page wil show 50 results per default. When (AJAX) scrolling it will increment by 10 products.

  14. i followed all your 10steps and also Set both “Use jQuery Infinite Ajax Scroll” and “Use jQuery UItoTop” to “Yes”..still in my website its not showing scroll to top button on right corner of my website..

    plz reply its urgent

  15. Hi Pieter,

    Wonderful plugin, thanks!

    I’m looking to change the “Loading more products, please be patient” text during scrolling. When I change this in the template file, it breaks the page and the page goes blank. How should I go about it ?

    Thanks,
    Rupa

  16. Hi Peter….I have a problem! :(

    I installed the Ajax Scroller 1.1 component….selected Yes from the drop-down in the admin panel but the scroll doesn’t work on the frontend. I am using a custom theme created by me and i put the design elements in the custom theme folder, same for the skin elements.

    Can you help me? i don’t know what’s wrong :(

  17. Hi Pieter Im click hit ‘View All’ show all product but I scroll down There are products that are being duplicated in the list. Load Ajax scroll down prolem process, so help me
    Thank’s

  18. Hi,

    I have use user code on my magento site, but its not working, i found the model is also not load , and in the admin i also did not find any extra filed , could you help me
    Thanks
    Narendra

  19. Hi,

    Thing question was asked a few months back but with no answer.

    How do you change the “Loading more products” echo without it breaking the page?

    Thank you in advance.

    Will

  20. i used this extention its work fine on default magento but in my theme is not working fine and the products are duplicated and load more button are not come ….plz help me asap……

  21. Thank you very much for sharing this plug-in, it is a great idea, indeed! However, I am using GoMage Advanved Navigation on my site which has in-built infinite scrolling and back-to-top options. The extension works great and does not conflict with anything on my site. But I would love to try your plugin on my other sites where default navigation is used. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>