このチュートリアルのカミナリエンドレスページを使用してみました。また、ライアンベイツのエピソード＃114エンドレスページ（改訂版）を見て、オンラインストアに無限スクロール機能を実装しようとしました。
Spreeで実装されているものとはまったく異なるため、index.js.erbファイルでレンダリングされている製品を適用する方法がわかりません。また、Spreeプラットフォームを初めて使用することも忘れてしまいました。
これまで私が行ってきたのは、これらのファイルを変更することだけでした。
views / spree / products / index.html
<% content_for :sidebar do %>
<div data-hook="homepage_sidebar_navigation">
<% if "products" == @current_controller && @taxon %>
<%= render :partial => 'spree/shared/filters' %>
<% else %>
<%= render :partial => 'spree/shared/taxonomies' %>
<% end %>
</div>
<% end %>
<% if params[:keywords] %>
<div data-hook="search_results">
<% if @products.empty? %>
<h6 class="search-results-title"><%= t(:no_products_found) %></h6>
<% else %>
<%= render :partial => 'spree/shared/products', :locals => { :products => @products, :taxon => @taxon } %>
<% end %>
</div>
<% else %>
<div id="home-products">
<div data-hook="homepage_products">
<%= render :partial => 'spree/shared/products', :locals => { :products => @products, :taxon => @taxon } %>
</div>
</div>
<% end %>
views / spree / products / index.js.erb
$("#home-products").append('<%= j render(:partial => 'spree/shared/products', :locals => { :products => @products, :taxon => @taxon }) %>');
<% if @products.next %>
$('.pagination').replaceWith('<%= j paginate(@products) %>');
<% else %>
$('.pagination').remove();
<% end %>
これが部分的なviews/spree / shared/_products.html.erbです
<%
paginated_products = @searcher.retrieve_products if params.key?(:keywords)
paginated_products ||= products
%>
<% if products.empty? %>
<%= t(:no_products_found) %>
<% elsif params.key?(:keywords) %>
<h6 class="search-results-title"><%= t(:search_results, :keywords => h(params[:keywords])) %></h6>
<% end %>
<% if products.any? %>
<ul id="products" class="inline product-listing" data-hook>
<% reset_cycle('default') %>
<% products.each do |product| %>
<% if Spree::Config[:show_zero_stock_products] || product.has_stock? %>
<li id="product_<%= product.id %>" class="columns three <%= cycle("alpha", "secondary", "", "omega secondary", :name => "classes") %>" data-hook="products_list_item" itemscope itemtype="http://schema.org/Product">
<div class="product-image">
<%= link_to small_image(product, :itemprop => "image"), product, :itemprop => 'url' %>
</div>
<%= link_to truncate(product.name, :length => 50), product, :class => 'info', :itemprop => "name", :title => product.name %>
<span class="price selling" itemprop="price"><%= number_to_currency product.price %></span>
</li>
<% end %>
<% end %>
<% reset_cycle("classes") %>
</ul>
<% end %>
<% if paginated_products.respond_to?(:num_pages) %>
<%= paginate paginated_products %>
<% end %>
アセット/javascripts/store/products.js.coffee
jQuery ->
if $('.pagination').length
$(window).scroll ->
url = $('.pagination .next').attr('href')
if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
$('.pagination').text("Fetching more products...")
$.getScript(url)
$(window).scroll()
ここでは、ライアンのエピソードからのコメントに従って、「。next_page」のみを「.next」に変更しました。
製品を直接レンダリングしていないため、問題はパーシャルに関連していると確信していますが、これを変更して機能させる方法がわかりません。
誰かがこれを手伝ってくれますか？ありがとうございました。