無限/無限のスクロールを実装するBigcommerceステンシルカテゴリリスト

Question

カテゴリページの下部にページングが表示されない理由があるため、カテゴリページの大型商取引ステンシルフレームワークでエンドレススクロールを実装する方法を知りたいと思います。

それはJavaScriptを使用して可能であるならば、私は大きな商業ステンシルフレームワークここで

でこの機能を実現することができますどのように私を提案してくださいすることは私のウェブサイト 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> 

おかげ

Answer 1

あなたは間違いなくできていますこれをさらに最適化しますが、これは基本的な考え方を網羅しています。

遅延読み込み、BigCommerceに不可知論AJAX要求は、次のようになります

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

あなたがカテゴリそのものを通じて後続のページとページをロードする必要がありますので、これは完璧に動作しません。 window.location.pathnameまたはwindow.location.hrefに基づいて変数を設定し、その文字列を変更してページ番号を増やし、それをajaxリクエストURLとして使用します。

また、JSに次のセレクタを見つけて、それを使用してURLリクエストを構築することもできます。

より良いプラグインをBCで使用するには、http://infiniteajaxscroll.com/をご覧ください。