Question

我尝试使用本教程Kaminari endless page，还观看了Ryan Bates剧集#114 Endless Page (revised)，并试图在我的在线商店实现无限滚动功能。

我不确定如何在我的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 %>

资产/ Javascript角/存储/ 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'。

我很确定这个问题与部分问题有关，因为它不会直接渲染产品，但我不知道如何更改它以使其有效。

任何人都可以帮我吗？谢谢。

Answer 1

看起来我没有渲染正确的部分解决我问题的内容是：

查看/礼包/产品/ index.js.erb的

<%= render 'spree/shared/products.js.erb' %>

我还为产品创建了一个新的js partial，因为那是我实际应该进行分页的地方。

查看/礼包/共享/ _products.js.erb

$('ul#products').append('<%= j render(:partial => 'spree/shared/product', :collection => @products) %>');

<% if @products.current_page < @products.total_pages %>

$('.pagination').replaceWith('<%= j paginate @products %>')
BWLD.can_scroll = true

<% else %>

$('.pagination').remove();

<% end %>

Answer 2

我为仍然在Solidus上寻找此答案的任何人找到了解决方案。

从此仓库中添加以下两个文件：https://github.com/gildardoperez/spree_infinite_scroll/tree/master/app/assets/javascripts/store

到供应商目录如下例所示：

vendor/assets/javascripts/spree/frontend/jquery.infinitescroll.js vendor/assets/javascripts/spree/frontend/spree_infinite_scroll.js

并确保检查您使用的是应用spree_infinite_scroll.js文件中的相同类。

重新加载服务器并加载http://localhost:3000/products并确保在app/config/initializers/spree.rb中指定每页要呈现的产品数量

Spree.config do |config|
  config.currency = "USD"
  ....
  config.products_per_page = 10
end

Rails Spree Kaminari无限滚动产品页面

2 个答案: