3

我尝试使用本教程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'。

我很确定问题与部分有关,因为它不是直接渲染产品,但我不知道如何更改它以使其正常工作。

谁能帮我这个?谢谢你。

4

2 回答 2

2

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

查看/狂欢/产品/index.js.erb

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

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

查看/狂欢/共享/_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 %>
于 2012-10-19T16:45:30.467 回答
0

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

从此 repo 添加这两个文件: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
于 2019-07-03T06:15:41.167 回答