1

Am using coolbaby theme in magento 1.8. Here am trying to add load more product, but i got error message in console

prototype.js:3574 Uncaught Syntax error, unrecognized expression: [object HTMLButtonElement]

i refer this link Reference Link

to add this code in app/design/frontend/coolbaby/default/template/catalog/product/list.phtml

Follwing my code:

list.phtml

<div style="text-align:center;">
   <button id="load-more-products" class="button btn-info">Load more products</button>
</div>
<script>
   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
                    if(!$(div).select('.next.i-next')[0]){
                        $('load-more-products').style.display = "none";
                    }
                }
            });
         }

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

         //Assigning click event to the button which triggers the "next" link
         $('load-more-products').observe('click', callbackFunc);

</script>
<script>
   //<![CDATA[
          //check if there are more products to be loaded or not
          if($$('.next.i-next')[0]){
              $('load-more-products').style.display = "none";
          }

          function testScroll(ev){
              if($$('.scroll-to-top')[0]){
                  console.log(window.pageYOffset);
                  if(window.pageYOffset>400){
                      $$('.scroll-to-top')[0].style.display = "block";
                  }
                  else{
                      $$('.scroll-to-top')[0].style.display = "none";
                  }
              }
          }
          window.onscroll = testScroll;
      //]]>
</script>

When i click Load more products button it showing error in console and product not loaded.

Note: Am tried Strategery / InfiniteScroll also its not working coolbaby theme.

How can i fix this error please help in this...!

0

Seems like $$ function can take only string parameter, but here

//hide button
$$(e.currentTarget).hide();

You pass html element. Possibly you want single $ instead:

$(e.currentTarget).hide();
  • Thanks to replay me actually here am pass two arguments. If am remove $ <button id="load-more-products" class="button btn-info">Load more products</button> will be hide in first click – Ramesh S May 3 '17 at 13:26
  • @RameshS, this depends on result in this condition: if($$('.next.i-next')[0]){ possibly you need fix your html markup – Grundy May 3 '17 at 13:44

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.