我尝试使用本教程Kaminari 无尽页面,还观看了 Ryan Bates第 114 集 Endless Page(修订版),并尝试在我的在线商店中实现无限滚动功能。
我不确定如何在我的 index.js.erb 文件中应用产品渲染,因为它在 Spree 中实现的完全不同。我还忘了提到我对 Spree 平台还很陌生。
到目前为止,我所做的只是更改这些文件:
意见/狂欢/产品/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 %>
意见/狂欢/产品/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 %>
这是部分视图/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()
在这里,根据 Ryan 剧集的一些评论,我只将 '.next_page' 更改为 '.next'。
我很确定问题与部分有关,因为它不是直接渲染产品,但我不知道如何更改它以使其正常工作。
谁能帮我这个?谢谢你。