Am creating a button for Load More Product. I refer this link to create this Reference Link.

And am using coolbaby theme in my store. In coolbaby theme this code not working properly, but i tried in default rwd theme it's working.

Path: app/design/frontend/coolbaby/default/template/catalog/product/list.phtml

This is the code:

<button id="load-more-products" class="button btn-primary">Load more products</button>
        function sendLoadMoreProductsRequest(url) {
        new Ajax.Request(url, {
            onSuccess: function(response) {
                //Create dummy element
                var div = document.createElement('div');
                div.innerHTML = response.responseText;
                //refresh the page class element
                $$('.pages')[0].innerHTML = $(div).select('.pages')[0].innerHTML;
                //append the list to the existing product list
                $$('.category-products')[0].innerHTML += $(div).select('.category-products')[0].innerHTML;
                //check if there are more products to be loaded or not
                    $('load-more-products').style.display = "none";

    function callbackFunc(e) {
            var nextPageUrl = $$('.next.i-next')[0].readAttribute('href');
            //hide button

    //Assigning click event to the button which triggers the "next" link
    $('load-more-products').observe('click', callbackFunc);
        //check if there are more products to be loaded or not
            $('load-more-products').style.display = "none";
        function testScroll(ev){
                    $$('.scroll-to-top')[0].style.display = "block";
                    $$('.scroll-to-top')[0].style.display = "none";
        window.onscroll = testScroll;

Please any one help to fix this error. Or suggest me for load more product extension.

Note: Show load more button in list page, after click this button only load other products.

  • load more or infinite scroll extension ?? – Murtuza Zabuawala Apr 19 '17 at 9:43
  • infinite scroll extension – Ramesh S Apr 19 '17 at 9:44
  • i tried above code, it working in default rwd theme. But it does't working in coolbaby theme.@MurtuzaZabuawala – Ramesh S Apr 19 '17 at 9:46
  • check my answer. – Murtuza Zabuawala Apr 19 '17 at 9:50

NOTE : as user wants extension That's why I suggest this extension

please install this extension for infinite scroll, I have tested and use this extension in couple of site and this extension works very good


  • I tried this but in this extension shows Fatal error: Class 'Mage_ConfigurableSwatches_Helper_Mediafallback' not found in /home/mwinwm/public_html/includes/src/Etheme_Coolbabyconfig_Helper_ConfigurableSwatches_Mediafallback.php on line 8 in front end – Ramesh S Apr 19 '17 at 9:52
  • ok let me check the extension code – Murtuza Zabuawala Apr 19 '17 at 9:52
  • app/design/frontend/base/default/layout/strategery-infinitescroll.xml go to this file and comment this code <reference name="product_list.name.after"> <block type="core/template" name="product_list.infinitescroll" template="strategery/infinitescroll/swatches.phtml"/> </reference> – Murtuza Zabuawala Apr 19 '17 at 9:55
  • Is this right <!-- <reference name="product_list.name.after"> <block type="core/template" name="product_list.infinitescroll" template="strategery/infinitescroll/swatches.phtml"/> </reference>--> – Ramesh S Apr 19 '17 at 9:58
  • yes right................. – Murtuza Zabuawala Apr 19 '17 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.