Rails Spree Kaminari無限滾動產品頁面

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 %> 

下面是部分視圖/禮包/共享/ _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 %> 

資產/ Java腳本/存儲/ 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」到「接下來」。

我敢肯定，這個問題與部分問題有關，因爲它不是直接渲染產品，但我不知道如何改變它以使其工作。

任何人都可以幫助我嗎？謝謝。

Answer 1

它看起來就像我沒有渲染正確的諧音
這解決了我的問題的內容爲：

視圖/大禮包/產品/ 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 %>