Split products by local/remote distributor: views and basic style

app/assets/stylesheets/store/openfoodweb.css.scss

@@ -34,6 +34,7 @@ nav#filters {
   }
 }
 
+
 /* Style the product source on the product details page in the
  * same manner as the product properties table above it.
  */
@@ -43,3 +44,57 @@ nav#filters {
 #product-properties td, #product-source td {
   width: 50%;
 }
+
+
+/* Apply Spree's ul#products style to ul.product-listing. When viewing products
+ * split by distributor, a separate product listing is displayed for local and
+ * remote products, so the #products id is removed to avoid its duplication.
+ */
+ul.product-listing {
+  &:after {
+    content: " ";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+  }
+
+  li {
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 20px;
+
+    a {
+      display: block;
+
+      &.info {
+        height: 35px;
+        margin-top: 5px;
+        font-size: $product_list_name_font_size;
+        color: $product_link_text_color;
+        border-bottom: 1px solid lighten($body_text_color, 60);
+        overflow: hidden;
+      }
+    }
+
+    .product-image {
+      border: 1px solid lighten($body_text_color, 60);
+      padding: 5px;
+      min-height: 110px;
+      background-color: $product_background_color;
+
+      &:hover {
+        border-color: $link_text_color;
+      }
+
+    }
+
+    .price {
+      color: $link_text_color;
+      font-size: $product_list_price_font_size;
+      padding-top: 5px;
+      display: block;
+    }
+  }
+}

app/overrides/split_products_by_distributor.rb

@@ -0,0 +1,4 @@
+Deface::Override.new(:virtual_path => "spree/home/index",
+                     :replace      => "[data-hook='homepage_products']",
+                     :partial      => "spree/shared/products_by_distributor",
+                     :name         => "products")

app/views/spree/shared/_products.html.erb

@@ -0,0 +1,31 @@
+<%
+  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 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") %>" 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 %>
+</ul>
+<% end %>
+
+<% if paginated_products.respond_to?(:num_pages)
+      params.delete(:search)
+      params.delete(:taxon)
+%><%= paginate paginated_products %><% end %>

app/views/spree/shared/_products_by_distributor.html.haml

@@ -0,0 +1,5 @@
+- if @products
+  #products= render 'spree/shared/products', :products => @products
+- else
+  #products-local= render 'spree/shared/products', :products => @products_local
+  #products-remote= render 'spree/shared/products', :products => @products_remote