Rails Spree Kaminari无限滚动产品页面

本文介绍了Rails Spree Kaminari无限滚动产品页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我尝试使用本教程并观看了Ryan Bates的剧集并试图在我的在线商店实现无限滚动功能。

我不确定如何在我的index.js.erb文件中应用产品渲染，因为它在Spree中实现的完全不同。我也忘了提到我对Spree平台很陌生。

到目前为止，我所做的一切都是改变这些文件：

views / spree / products / index.html

 <％content_for：sidebar做％> 
< div data-hook =homepage_sidebar_navigation> 
<％ifproducts== @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？ ％GT; 
< 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％>

以下是部分观点/ spree / shared / _products.html.erb

$ b如果params.key？（：keywords）
paginated_products || = products
％>
<％if products.empty？％GT;
<％= 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？％GT;
< ul id =productsclass =inline product-listingdata-hook>
<％reset_cycle（'default'）％>
<％products.each do | product | ％GT;如果Spree :: Config [：show_zero_stock_products] ||，则
<％ product.has_stock？％GT;
< li id =product_<％= product.id％> class =columns three<％= cycle（alpha，secondary，，omega secondary，：name =>classes）％> data-hook =products_list_itemitemscope 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 sellingitemprop =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％>

assets / 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（获取更多产品......）
 $ .getScript（ url）
 $（窗口）.scroll（）

这里我只改变了根据Ryan的一些评论，'。ofxt_page'到'.next'。

我很确定这个问题与局部有关，因为它不会渲染直接的产品，但我不知道如何更改它，以便它的工作。

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

解决方案

看起来我没有渲染正确的部分

解决的内容我的问题是：

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

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

  $（'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％>

I've tried to use this tutorial Kaminari endless page and also watched Ryan Bates episode #114 Endless Page (revised) and tried to implement an infinite scrolling functionality to my online store.

I don't know for sure how to apply the products rendering in my index.js.erb file because it's quite different implemented in the Spree. I've also forgot to mention that I'm quite new to the Spree platform.

All I've been doing so far was changing these files:

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

Here is the partial 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 %>

assets/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()

Here I've changed only the '.next_page' to '.next' according to some comments from the Ryan's episode.

I'm pretty sure the problem is related to the partial, because it's not rendering the products directly, but I don't know how to change this so that it works.

Can anyone help me with this? Thank you.

解决方案

It looked like I wasn't rendering the right partials
The content that solved my problem was:

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

I've also created a new js partial for the products because that's where I was actually supposed to make the pagination.

$('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 %>

这篇关于Rails Spree Kaminari无限滚动产品页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！