Spree infinite scroll not working

若如初见. 提交于 2019-12-12 03:26:20

问题


I have followed stackoverflow spree infinite scroll but still my infinite scroll is not working I am posting required files please help as I am new to spree platform

assets/javascripts/spree/frontend/xyz.coffee

jQuery ->

  if $('.pagination').length
    $(window).scroll ->
       url = $('.pagination .next').attr('href')
       if url && $(window).scrollTop() > $(document).height() - $(window).height() - $('#footer').height()
         $('.pagination').text("Fetching more products...")
         $.getScript(url)
       $(window).scroll()

views/spree/products/index.html.erb

<% if "spree/products" == params[:controller] && @taxon || !@taxonomies.empty? %>
  <% content_for :sidebar do %>
    <div data-hook="homepage_sidebar_navigation">
      <% if "spree/products" == params[:controller] && @taxon %>
        <%= render :partial => 'spree/shared/filters' %>
      <% else %>
        <%= render :partial => 'spree/shared/taxonomies' %>
      <% end %>
    </div>
  <% end %>
<% end %>

<% if params[:keywords] %>
  <div data-hook="search_results">
    <% if @products.empty? %>
      <h6 class="search-results-title"><%= Spree.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">
    <% cache(cache_key_for_products) do %>
      <%= render :partial => 'spree/shared/products', :locals => { :products => @products, :taxon => @taxon } %>
    <% end %>
  </div>
  </div>
<% end %>

views/spree/products/index.js.erb

    $("#home-products").append("<%= j render(:partial => 'spree/shared/products.js.erb', :locals => { :products => @products, :taxon => @taxon }) %>");
    <% if @products.next %>
       $('.pagination').replaceWith('<%= j paginate(@products) %>');
    <% else %>
       $('.pagination').remove();
    <% end %>

views/spree/shared/_products.html.erb

<%
  paginated_products = @searcher.retrieve_products if params.key?(:keywords)
  paginated_products ||= products
%>

<% content_for :head do %>
  <% if paginated_products.respond_to?(:num_pages) %>
    <%= rel_next_prev_link_tags paginated_products %>
  <% end %>
<% end %>

<div data-hook="products_search_results_heading">
  <% if products.empty? %>
    <div data-hook="products_search_results_heading_no_results_found">
      <%= Spree.t(:no_products_found) %>
    </div>
  <% elsif params.key?(:keywords) %>
    <div data-hook="products_search_results_heading_results_found">
      <h6 class="search-results-title"><%= Spree.t(:search_results, keywords: h(params[:keywords])) %></h6>
    </div>
  <% end %>
</div>

<% if products.any? %>
  <ul id="products" class="row" data-hook>
    <% products.each do |product| %>
        <% url = spree.product_url(product, taxon_id: @taxon.try(:id)) %>



      <li id="product_<%= product.id %>" class="col-sm-4" data-hook="products_list_item" itemscope itemtype="https://schema.org/Product" style="margin-bottom:25px;">

        <div class="product product5">
          <% cache(@taxon.present? ? [I18n.locale, current_currency, @taxon, product] : [I18n.locale, current_currency, product]) do %>
            <div class="product-top" style="background-color:#59b0c4;">
                <figure class="product-image-container" style="width:270px;height:340px;">


                                              <%= link_to small_image(product, itemprop: "image",class: "product-image"), url, itemprop: 'url' %><br/>
                                               <a href="<%=url%>" title="<%=product.name%>">
                                              <%= small_image(product,class: "product-image-hover") %> 
                                             <img src="<%=asset_path 'sec.png'%>" alt="<%=product.name%>" class="product-image-hover" style="opacity:0.6;"> </a> 
                </figure>
            </div>

            <div class="product-price-container text-left">
                <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
                <span class="product-price price selling lead" itemprop="price"><%= display_price(product) %></span>
              </span>
            </div>
            <h3 class="product-name text-left">
              <%= link_to truncate(product.name, length: 50), url, class: 'info', itemprop: "name", title: product.name %>
            </h3>


            <div class="product-action-container clearfix">
                                                    <a href="<%=url%>" title="Add to Cart" class="product-add-btn">
                                                        <span class="add-btn-text">Add to Cart</span>
                                                        <span class="product-btn product-cart">Cart</span>
                                                    </a>
                                                    <div class="product-action-inner">
                                                                                               <% if spree_current_user %>
                     <%= form_for Spree::WishedProduct.new , class: "aaa" do |f| %>
                          <%= f.hidden_field :variant_id, value: product.id %>
                          <%= f.hidden_field :quantity %>
                          <button id="kika" style="margin-left:-35px;background-color:#fbfaf4;box-shadow:none;" type="submit" title="add to wishlist" class="product-btn product-favorite">Add To Wishlist</button>
                      <%end%>
                    <%else%>
                      <a href="/login" title="add to wishlist" class="product-btn product-favorite">Add To Wishlist</a>  
                    <% end %>

                    <% if spree_current_user %>
                                        <a style="margin-top:-36px;" href="<%=product.images.first.attachment.url(:large)%>" data-lightbox="<%=product.name%>product<%=product.id%>" data-title="<%=product.name.upcase+" - "+display_price(product)%>" title="Quick View" class="product-btn product-compare">Quick View</a>

                                        <%else%>
                                        <a href="<%=product.images.first.attachment.url(:large)%>" data-lightbox="<%=product.name%>product<%=product.id%>" data-title="<%=product.name.upcase+" - "+display_price(product)%>" title="Quick View" class="product-btn product-compare">Quick View</a>
                                        <%end%>
                                                    </div><!-- End .product-action-right -->
                                                </div><!-- End .product-action-container -->

          <% end %>
        </div>

      </li>




    <% end %>
    <% reset_cycle("classes") %>
  </ul>
<% end %>


<% if paginated_products.respond_to?(:num_pages) %>
  <%= paginate paginated_products %>
<% end %>

views/spree/shared/_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 %>

I apologize if my code is not clean or if I have posted unnecessary code

来源:https://stackoverflow.com/questions/36565306/spree-infinite-scroll-not-working

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!