CODEWITHSUNDEEP
javascriptjquerybigcommercestencils
R.K.Bhardwaj
R.K.Bhardwaj

Reputation: 2192

Implement an endless/infinite scroll Bigcommerce Stencil Category list

I'd like to know how to implement endless scrolling on big commerce stencil Framework on category page because some reason it's not showing pagination at the bottom of the category page.

if it is possible with javascript then please suggest me how I can achieve this functionality with big commerce stencil framework

Here is my website http://silverforte.com/categories

  <main class="page-content" id="product-listing-container">
    {{#if category.products}}
        {{> components/category/product-listing}}
    {{else}}
        <p>{{lang 'categories.no_products'}}</p>
    {{/if}}
</main>

Thanks

Upvotes: 2

Views: 1118

Answers (1)

Alyss
Alyss

Reputation: 1866

You can definitely optimize this further, but this covers the basic idea.

Agnostic to BigCommerce, a lazy load AJAX request looks like this: 

$.ajax({
    url: "your url here",
    type: "Post",
    success: function(response){
        // handle your success callback here
        $("img.lazy").lazyload({ 
              effect : "fadeIn"
        });
    }
});

This doesn't work perfectly because you will need to load subsequent pages and page through the categories themselves. I'd set a variable based on the window.location.pathname or window.location.href and modify that string to increment the page number and use that as the ajax request URL.

Alternatively, you could have the JS find the next selector and use that to build the URL request.

Check out http://infiniteajaxscroll.com/ for better plugin to use with BC.

Upvotes: 2

Related Questions