spree_frontend 4.1.0 → 4.7.0

data/app/views/spree/products/_filters_desktop.html.erb

@@ -1,12 +1,69 @@
-<% cache base_cache_key + [available_option_types, permitted_params, @taxon&.id] do %>
+<% cache filters_cache_key('desktop') do %>
   <div id="plp-filters-accordion" class="d-none d-lg-block col-lg-3 pr-5 position-sticky h-100 plp-filters" data-hook="taxon_sidebar_navigation">
-    <% @available_option_types.each do |option_type| %>
-      <div class="w-100 card plp-filters-card">
-        <% ot_downcase_name = option_type.filter_param %>
-        <% option_type_name = ot_downcase_name.titleize %>
+    <%= clear_all_filters_link(permitted_params) if product_filters_present?(permitted_params) %>
+
+    <div class="plp-filters-scroller">
+      <% available_option_types.each do |option_type| %>
+        <div class="w-100 card plp-filters-card">
+          <% ot_filter_param = option_type.filter_param %>
+          <% option_type_name = ot_filter_param.titleize %>
+          <% collapsed = params[ot_filter_param].blank? %>
+
+          <button class="card-header <%= 'collapsed' if collapsed %> px-1 plp-filters-card-header" id="filters<%= ot_filter_param %>" data-toggle="collapse" data-target="#collapseFilter<%= ot_filter_param %>" aria-expanded="<%= !collapsed %>" aria-controls="collapseFilter<%= ot_filter_param %>" role="heading" aria-level="2">
+            <%= option_type.presentation %>
+            <%= icon(name: 'plus',
+                    classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--plus',
+                    width: 16,
+                    height: 16) %>
+            <%= icon(name: 'minus',
+                    classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--minus',
+                    width: 16,
+                    height: 16) %>
+          </button>
+          <div id="collapseFilter<%= ot_filter_param %>" class="collapse <%= 'show' unless collapsed %>" aria-labelledby="filters<%= ot_filter_param %>">
+            <div class="card-body px-0 pt-1">
+              <%= render 'spree/shared/option_values',
+                option_type: option_type,
+                permitted_params: permitted_params %>
+            </div>
+          </div>
+        </div>
+      <% end %>
 
-        <div class="card-header <%= 'collapsed' if params[ot_downcase_name].blank? %> px-1 plp-filters-card-header" id="filters<%= option_type_name %>" data-toggle="collapse" data-target="#collapseFilter<%= option_type_name %>" aria-expanded="false" aria-controls="collapseFilter<%= option_type_name %>" role="heading" aria-level="2">
-          <%= option_type.presentation %>
+      <% available_properties.each do |property| %>
+        <% if property.uniq_values.present? %>
+          <div class="w-100 card plp-filters-card">
+            <% property_name = property.name %>
+            <% collapsed = params.dig(:properties, property.filter_param).blank? %>
+            <button class="card-header <%= 'collapsed' if collapsed %> px-1 plp-filters-card-header" id="filters<%= property_name %>" data-toggle="collapse" data-target="#collapseFilter<%= property_name %>" aria-expanded="<%= !collapsed %>" aria-controls="collapseFilter<%= property_name %>" role="heading" aria-level="2">
+              <%= property.presentation %>
+              <%= icon(name: 'plus',
+                      classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--plus',
+                      width: 16,
+                      height: 16) %>
+              <%= icon(name: 'minus',
+                      classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--minus',
+                      width: 16,
+                      height: 16) %>
+            </button>
+            <div id="collapseFilter<%= property_name %>" class="collapse <%= 'show' unless collapsed %>" aria-labelledby="filters<%= property_name %>">
+              <div class="card-body px-0 pt-1">
+                <%= render 'spree/shared/properties',
+                  params_property_name: params[property_name],
+                  property: property,
+                  permitted_params: permitted_params,
+                  property_name: property_name
+                %>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+
+      <% price_collapsed = params[:price].blank? %>
+      <div class="w-100 card plp-filters-card">
+        <button class="card-header text-capitalize <%= 'collapsed' if price_collapsed %> px-1 plp-filters-card-header" id="filtersPrice" data-toggle="collapse" data-target="#collapseFilterPrice" aria-expanded="<% !price_collapsed %>" aria-controls="collapseFilterPrice" role="heading" aria-level="2">
+          <%= Spree.t('plp.price') %>
           <%= icon(name: 'plus',
                   classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--plus',
                   width: 16,
@@ -15,44 +72,27 @@
                   classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--minus',
                   width: 16,
                   height: 16) %>
-        </div>
-        <div id="collapseFilter<%= option_type_name %>" class="collapse <%= 'show' unless params[ot_downcase_name].blank? %>" aria-labelledby="filters<%= option_type_name %>">
+        </button>
+        <div id="collapseFilterPrice" class="collapse <%= 'show' unless price_collapsed %>" aria-labelledby="filtersPrice">
           <div class="card-body px-0 pt-1">
-            <%= render 'spree/shared/option_values',
-              params_ot_downcase_name: params[ot_downcase_name],
-              option_type: option_type,
-              permitted_params: permitted_params,
-              ot_downcase_name: ot_downcase_name
-            %>
-          </div>
-        </div>
-      </div>
-    <% end %>
+            <% price_filters.each do |price_range| %>
+              <%= price_filter_link(price_range, permitted_params) %>
+            <% end %>
 
-    <div class="w-100 card plp-filters-card">
-      <div class="card-header text-capitalize <%= 'collapsed' if params[:price].blank? %> px-1 plp-filters-card-header" id="filtersPrice" data-toggle="collapse" data-target="#collapseFilterPrice" aria-expanded="false" aria-controls="collapseFilterPrice" role="heading" aria-level="2">
-        <%= Spree.t('plp.price') %>
-        <%= icon(name: 'plus',
-                classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--plus',
-                width: 16,
-                height: 16) %>
-        <%= icon(name: 'minus',
-                classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--minus',
-                width: 16,
-                height: 16) %>
-      </div>
-      <div id="collapseFilterPrice" class="collapse <%= 'show' unless params[:price].blank? %>" aria-labelledby="filtersPrice">
-        <div class="card-body px-0 pt-1">
-          <% price_filter_values.each do |name| %>
-            <% price_param = params[:price] == name ? '' : name %>
-            <%= link_to permitted_params.merge({ price: price_param }), class: "d-block" do %>
-              <div class="d-inline-block py-1 px-2 m-1 text-uppercase plp-filters-card-item <%= 'plp-filters-card-item--selected' if params[:price] == name %>">
-                <%= name %>
+            <div id="filterPriceRangeDesktop" class="m-1">
+              <div class="d-inline-flex mb-2">
+                <%= min_price_filter_input class: 'w-50 p-2 mr-1' %>
+                <%= max_price_filter_input class: 'w-50 p-2' %>
               </div>
-            <% end %>
-          <% end %>
+
+              <%= link_to Spree.t('plp.done'), permitted_params, class: 'btn btn-primary spree-btn w-100', data: { params: permitted_params } %>
+            </div>
+          </div>
         </div>
       </div>
+      <% additional_filters_partials.each do |partial| %>
+        <%= render "spree/products/filters/#{partial}", permitted_params: permitted_params %>
+      <% end %>
     </div>
   </div>
 <% end %>

data/app/views/spree/products/_filters_mobile.html.erb

@@ -1,7 +1,7 @@
 <% is_visible = params[:menu_open] ? 'block' : 'none' %>
 
 <div id="filter-by-overlay" class="d-lg-none plp-overlay" style="display: <%= is_visible %>;">
-  <% cache base_cache_key + [available_option_types, permitted_params, @taxon&.id] do %>
+  <% cache filters_cache_key('mobile') do %>
     <div class="plp-scroll">
       <div class="container">
         <div class="plp-overlay-header">
@@ -11,18 +11,18 @@
       </div>
       <div id="filters-accordion">
         <% available_option_types.each do |option_type| %>
-          <% option_type_name = option_type.presentation.titleize.gsub(' ', '') %>
+          <% option_type_name = option_type.filter_param %>
           <% ot_downcase_name = option_type_name.downcase %>
 
           <div class="card plp-overlay-card">
-            <div class="card-header text-uppercase <%= 'collapsed' if params[ot_downcase_name].blank? %> plp-overlay-card-header" data-toggle="collapse" data-target="#collapseFilterMobile<%= option_type_name %>" aria-expanded="true" aria-controls="collapseFilterMobile<%= option_type_name %>" role="heading" aria-level="3">
-              <%= option_type_name %>
+            <div class="card-header text-uppercase <%= 'collapsed' if params[ot_downcase_name].blank? %> plp-overlay-card-header" data-toggle="collapse" id="filtersMobile<%= option_type_name %>" data-target="#collapseFilterMobile<%= option_type_name %>" aria-expanded="true" aria-controls="collapseFilterMobile<%= option_type_name %>" role="heading" aria-level="3">
+              <%= option_type.presentation %>
               <%= icon(name: 'arrow-right',
                       classes: 'spree-icon-arrow spree-icon-arrow-right mt-1 float-right arrow plp-overlay-card-header-arrow',
                       width: 16,
                       height: 16) %>
             </div>
-            <div id="collapseFilterMobile<%= option_type_name %>" class="collapse <%= 'show' unless params[ot_downcase_name].blank? %>" aria-labelledby="collapseFilterMobile<%= option_type_name %>" data-parent="#filters-accordion">
+            <div id="collapseFilterMobile<%= option_type_name %>" class="collapse <%= 'show' unless params[ot_downcase_name].blank? %>" aria-labelledby="filtersMobile<%= option_type_name %>" data-parent="#filters-accordion">
               <div class="card-body pt-1">
                 <%= render 'spree/shared/option_values', params_ot_downcase_name: params[ot_downcase_name], option_type: option_type, permitted_params: permitted_params, ot_downcase_name: ot_downcase_name %>
               </div>
@@ -30,6 +30,32 @@
           </div>
         <% end %>
 
+        <% available_properties.each do |property| %>
+          <% if property.uniq_values.present? %>
+            <% property_name = property.name %>
+            <% collapsed = params.dig(:properties, property.filter_param).blank? %>
+            <div class="card plp-overlay-card">
+              <div class="card-header text-uppercase <%= 'collapsed' if collapsed %> plp-overlay-card-header" data-toggle="collapse" id="filtersMobile<%= property_name %>" data-target="#collapseFilterMobile<%= property_name %>" aria-expanded="true" aria-controls="collapseFilterMobile<%= property_name %>" role="heading" aria-level="3">
+                <%= property.presentation %>
+                <%= icon(name: 'arrow-right',
+                         classes: 'spree-icon-arrow spree-icon-arrow-right mt-1 float-right arrow plp-overlay-card-header-arrow',
+                         width: 16,
+                         height: 16) %>
+              </div>
+              <div id="collapseFilterMobile<%= property_name %>" class="collapse <%= 'show' unless collapsed %>" aria-labelledby="filtersMobile<%= property_name %>" data-parent="#filters-accordion">
+                <div class="card-body pt-1">
+                  <%= render 'spree/shared/properties',
+                             params_property_name: params[property_name],
+                             property: property,
+                             permitted_params: permitted_params,
+                             property_name: property_name
+                  %>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+
         <div class="card plp-overlay-card">
           <div class="card-header text-uppercase <%= 'collapsed' if params[:price].blank? %> plp-overlay-card-header" id="headingFour" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour" role="heading" aria-level="3">
             <%= Spree.t('plp.price') %>
@@ -40,23 +66,29 @@
           </div>
           <div id="collapseFour" class="collapse <%= 'show' unless params[:price].blank? %>" aria-labelledby="headingFour" data-parent="#filters-accordion">
             <div class="card-body pt-1">
-              <% price_filter_values.each do |name| %>
-                <% price_param = params[:price] == name ? '' : name %>
-                <%= link_to permitted_params.merge(price: price_param, menu_open: 1) do %>
-                  <div class="d-inline-block py-1 px-2 m-1 text-uppercase plp-overlay-card-item <%= 'plp-overlay-card-item--selected' if params[:price] == name %>">
-                    <%= name %>
-                  </div>
-                <% end %>
+              <% price_filters.each do |price_range| %>
+                <%= price_filter_link(price_range, permitted_params) %>
               <% end %>
+
+              <div id="filterPriceRangeMobile" class="m-1">
+                <div class="d-inline-flex">
+                  <%= min_price_filter_input class: 'w-50 p-2 mr-1' %>
+                  <%= max_price_filter_input class: 'w-50 p-2' %>
+                </div>
+              </div>
             </div>
           </div>
         </div>
+
+        <% additional_filters_partials.each do |partial| %>
+          <%= render "spree/products/filters/mobile/#{partial}", permitted_params: permitted_params %>
+        <% end %>
       </div>
     </div>
   <% end %>
 
-  <div class="container position-absolute text-center mb-2 plp-overlay-buttons pt-3">
-    <%= link_to Spree.t('plp.clear_all'), permitted_params.select { |key, value| key == "sort_by"}, class: 'btn spree-btn btn-outline-primary w-100 mb-4' %>
-    <%= link_to Spree.t('plp.done'), permitted_params, class: 'btn btn-primary spree-btn w-100' %>
+  <div class="container position-absolute text-center plp-overlay-buttons pt-3">
+    <%= clear_all_filters_link(permitted_params) %>
+    <%= link_to Spree.t('plp.done'), permitted_params, id: 'filterProductsButtonMobile', class: 'btn btn-primary spree-btn w-100 done-btn', data: { params: permitted_params } %>
   </div>
 </div>

data/app/views/spree/products/_gallery.html.erb

@@ -2,16 +2,15 @@
   <% if @product_images.size > 0 %>
     <div
       class="w-100 d-flex align-self-start justify-content-between product-details-images"
-      data-hook="product_left_part_wrap"
-    >
+      data-hook="product_left_part_wrap">
+
       <div class="d-none d-md-block product-details-thumbnails" data-hook="product_thumbnails">
         <%= render 'spree/shared/carousel/thumbnails',
                   images: @product_images,
                   group_id: 'main-product-carousel',
                   id: 'productThumbnailsCarousel',
                   trigger_id: 'productCarousel',
-                  per_page: 5
-        %>
+                  per_page: 5 %>
       </div>
       <div class="product-details-single" data-hook="product_images">
         <%= render 'spree/shared/carousel/single',
@@ -19,8 +18,7 @@
                   group_id: 'main-product-carousel',
                   id: 'productCarousel',
                   trigger_id: 'productCarousel',
-                  zoomed: false
-        %>
+                  zoomed: false %>
       </div>
     </div>
   <% end %>

data/app/views/spree/products/_gallery_modal.html.erb

@@ -1,9 +1,9 @@
 <% if @product_images.size > 0 %>
-  <div class="modal fade" id="picturesModal" tabindex="-1" role="dialog" >
+  <div class="modal fade" id="picturesModal" tabindex="-1" role="dialog">
     <div class="modal-dialog--zoom modal-dialog mw-100 vh-100 mt-0 mb-0" role="document">
       <div class="modal-content h-100">
         <div class="modal-body h-100">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <button type="button" class="close position-absolute mr-3" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">
               <%= icon(name: 'close',
                        classes: 'd-block d-lg-none',
@@ -23,8 +23,7 @@
                             group_id: 'main-product-modal-carousel',
                             id: 'productModalThumbnailsCarousel',
                             trigger_id: 'productCarousel',
-                            per_page: 4
-                %>
+                            per_page: 4 %>
               </div>
             <% end %>
             <div class="product-details-single">
@@ -33,8 +32,7 @@
                           group_id: 'main-product-modal-carousel',
                           id: 'productModalCarousel',
                           trigger_id: 'productCarousel',
-                          zoomed: true
-              %>
+                          zoomed: true %>
             </div>
           </div>
         </div>

data/app/views/spree/products/_option_type.html.erb

@@ -15,12 +15,10 @@
               "option-type-index" => index,
               "presentation" => option_value[:presentation],
               "variant-id" => option_value[:variant_id]
-            }
-          %>
+            } %>
 
           <%= label_tag "variant_option_value_id_#{option_type[:id]}_#{option_value[:id]}",
             class: "m-1 select-label",
-            tabindex: 0,
             "aria-label" => option_value[:presentation] do %>
 
             <span><%= option_value[:presentation] %></span>

data/app/views/spree/products/_product.html.erb

@@ -10,7 +10,7 @@
         <% end %>
       </div>
       <div class="card-footer text-center">
-        <span class="price selling lead" content="<%= price.nil? 0 : price.to_d %>">
+        <span class="price selling lead" content="<%= price.nil? ? 0 : price.to_d %>">
           <%= display_price(product) %>
         </span>
         <span content="<%= current_currency %>"></span>

data/app/views/spree/products/_properties.html.erb

@@ -2,10 +2,12 @@
   <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle"><%= Spree.t(:details) %></h3>
   <ul id="product-properties" class="m-0 list-unstyled product-properies" data-hook>
     <% @product_properties.each do |product_property| %>
-      <li>
-        <span class="font-weight-bold text-break"><%= product_property.property.presentation %>:</span>
-        <span class="text-break"><%= product_property.value %></span>
-      </li>
+      <% if product_property.show_property? %>
+        <li>
+          <span class="font-weight-bold text-break"><%= product_property.property.presentation %>:</span>
+          <span class="text-break"><%= product_property.value %></span>
+        </li>
+      <% end %>
     <% end %>
   </ul>
 <% end %>

data/app/views/spree/products/_sort_desktop.html.erb

@@ -1,5 +1,5 @@
 <div class="container dropdown d-none d-lg-flex justify-content-end mt-5 pr-4 pb-3 plp-sort">
-  <div data-toggle="dropdown" class="plp-sort-header">
+  <a data-toggle="dropdown" class="plp-sort-header" href="#" role="button" aria-haspopup="true" aria-expanded="false">
     <%= Spree.t("plp.#{ params[:sort_by].blank? ? 'sort_by': params[:sort_by].gsub('-', '_') }") %>
     <%= icon(name: 'arrow-right',
              classes: 'spree-icon-arrow spree-icon-arrow-up ml-3 plp-sort-header-arrow--up',
@@ -9,22 +9,28 @@
              classes: 'spree-icon-arrow spree-icon-arrow-down ml-3 plp-sort-header-arrow--down',
              width: 18,
              height: 18) %>
-  </div>
-
+  </a>
   <div class="dropdown-menu text-right plp-sort-dropdown">
     <ul class="pt-1 plp-sort-dropdown-ul">
       <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by].blank? %>">
-        <%= link_to Spree.t('plp.default'), url_for(permitted_params.merge(sort_by: nil)) %>
+        <%= link_to Spree.t('plp.default'), url_for(permitted_params.merge(sort_by: nil)), class: 'dropdown-item' %>
       </li>
-      <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'newest-first' %>">
-        <%= link_to Spree.t('plp.newest_first'), url_for(permitted_params.merge(sort_by: 'newest-first')) %>
+      <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'name-a-z' %>">
+        <%= link_to Spree.t('plp.name_a_z'), url_for(permitted_params.merge(sort_by: 'name-a-z')), class: 'dropdown-item' %>
       </li>
-      <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'price-high-to-low' %>">
-        <%= link_to Spree.t('plp.price_high_to_low'), url_for(permitted_params.merge(sort_by: 'price-high-to-low')) %>
-      </li>
-      <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'price-low-to-high' %>">
-        <%= link_to Spree.t('plp.price_low_to_high'), url_for(permitted_params.merge(sort_by: 'price-low-to-high')) %>
-      </li>
-    </ul>
-  </div>
+    </li>
+    <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'name-z-a' %>">
+      <%= link_to Spree.t('plp.name_z_a'), url_for(permitted_params.merge(sort_by: 'name-z-a')), class: 'dropdown-item' %>
+    </li>
+    <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'newest-first' %>">
+      <%= link_to Spree.t('plp.newest_first'), url_for(permitted_params.merge(sort_by: 'newest-first')), class: 'dropdown-item' %>
+    </li>
+    <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'price-high-to-low' %>">
+      <%= link_to Spree.t('plp.price_high_to_low'), url_for(permitted_params.merge(sort_by: 'price-high-to-low')), class: 'dropdown-item' %>
+    </li>
+    <li class="p-3 plp-sort-dropdown-ul-li<%= '--active' if params[:sort_by] == 'price-low-to-high' %>">
+      <%= link_to Spree.t('plp.price_low_to_high'), url_for(permitted_params.merge(sort_by: 'price-low-to-high')), class: 'dropdown-item' %>
+    </li>
+  </ul>
+</div>
 </div>

data/app/views/spree/products/_sort_mobile.html.erb

@@ -7,32 +7,48 @@
   </div>
   <div class="plp-overlay-header-border"></div>
   <ul class="pt-1 plp-overlay-ul">
-    <li class="p-3 plp-overlay-ul-li<%= '--active' if params[:sort_by].blank? %>">
-      <a href="<%= url_for(permitted_params.merge(sort_by: nil)) %>" >
+    <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by].blank? %>">
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: nil)) %>">
         <div class="plp-empty-dot">
           <div class="filled-dot"></div>
         </div>
         <%= Spree.t('plp.default') %>
       </a>
     </li>
-    <li class="p-3 plp-overlay-ul-li<%= '--active' if params[:sort_by] == 'newest-first' %>">
-      <a href="<%= url_for(permitted_params.merge(sort_by: 'newest-first')) %>" >
+    <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'name-a-z' %>">
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'name-a-z')) %>">
+        <div class="plp-empty-dot">
+          <div class="filled-dot"></div>
+        </div>
+        <%= Spree.t('plp.name_a_z') %>
+      </a>
+    </li>
+    <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'name-z-a' %>">
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'name-z-a')) %>">
+        <div class="plp-empty-dot">
+          <div class="filled-dot"></div>
+        </div>
+        <%= Spree.t('plp.name_z_a') %>
+      </a>
+    </li>
+    <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'newest-first' %>">
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'newest-first')) %>">
         <div class="plp-empty-dot">
           <div class="filled-dot"></div>
         </div>
         <%= Spree.t('plp.newest_first') %>
       </a>
     </li>
-    <li class="p-3 plp-overlay-ul-li<%= '--active' if params[:sort_by] == 'price-high-to-low' %>">
-      <a href="<%= url_for(permitted_params.merge(sort_by: 'price-high-to-low')) %>" >
+    <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'price-high-to-low' %>">
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'price-high-to-low')) %>">
         <div class="plp-empty-dot">
           <div class="filled-dot"></div>
         </div>
         <%= Spree.t('plp.price_high_to_low') %>
       </a>
     </li>
-    <li class="p-3 plp-overlay-ul-li<%= '--active' if params[:sort_by] == 'price-low-to-high' %>">
-      <a href="<%= url_for(permitted_params.merge(sort_by: 'price-low-to-high')) %>" >
+    <li class="plp-overlay-ul-li <%= 'plp-overlay-ul-li--active' if params[:sort_by] == 'price-low-to-high' %>">
+      <a class="p-3 d-block" href="<%= url_for(permitted_params.merge(sort_by: 'price-low-to-high')) %>">
         <div class="plp-empty-dot">
           <div class="filled-dot"></div>
         </div>

data/app/views/spree/products/_thumbnails.html.erb

@@ -3,7 +3,7 @@
   <ul id="product-thumbnails" class="thumbnails d-flex w-100 pl-0 my-4" data-hook>
     <% @product.images.each do |i| %>
       <li class='tmb-all mr-2 tmb-<%= i.viewable.id %>'>
-        <%= link_to(image_tag(main_app.url_for(i.url(:mini)), class: "img-thumbnail d-inline-block"), main_app.url_for(i.url(:product))) %>
+        <%= link_to(image_tag(main_app.cdn_image_url(i.url(:mini)), class: "img-thumbnail d-inline-block"), main_app.cdn_image_url(i.url(:product))) %>
       </li>
     <% end %>
 
@@ -11,7 +11,7 @@
       <% @product.variant_images.each do |i| %>
         <% next if @product.images.include?(i) %>
         <li class='vtmb mr-2 tmb-<%= i.viewable.id %>'>
-          <%= link_to(image_tag(main_app.url_for(i.url(:mini)), class: "img-thumbnail"), main_app.url_for(i.url(:product))) %>
+          <%= link_to(image_tag(main_app.cdn_image_url(i.url(:mini)), class: "img-thumbnail"), main_app.cdn_image_url(i.url(:product))) %>
         </li>
       <% end %>
     <% end %>

data/app/views/spree/products/index.html.erb

@@ -1,7 +1,8 @@
-<% permitted_params = params.permit(*filtering_params) %>
+<% permitted_params = permitted_products_params %>
+<% products_empty = @products.empty? %>
 
 <div data-hook="search_results">
-  <% if @products.empty? %>
+  <% if products_empty %>
     <% if permitted_params[:keywords].present? && permitted_params.to_h.one? %>
       <%= render 'spree/products/no_results' %>
     <% else %>
@@ -40,6 +41,8 @@
 <%= render 'spree/products/filters_mobile', permitted_params: permitted_params %>
 <%= render 'spree/products/sort_mobile', permitted_params: permitted_params %>
 
-<% cache cache_key_for_products(@products, 'json-ld') do %>
-  <%= products_structured_data(@products) %>
+<% unless products_empty %>
+  <% cache cache_key_for_products(@products, 'json-ld') do %>
+    <%= products_structured_data(@products) %>
+  <% end %>
 <% end %>

data/app/views/spree/products/related.html.erb

@@ -1,8 +1,14 @@
-<% if related_products.any? %>
+<% if product_relation_types.any? %>
   <div id="related-products">
-    <div class="product-details-related">
-      <p class="font-weight-bold text-center text-uppercase product-details-carousel-text"><%= Spree.t('pdp.you_may_also_like') %></p>
-      <%= render 'spree/shared/carousel_4_products', id: 'related-products-carousel', products: @related_products %>
-    </div>
+    <% product_relation_types.each do |relation_type| %>
+      <% products = product_relations_by_type(relation_type) %>
+
+      <% if products.any? %>
+        <div class="product-details-related" id="product-details-related-<%= relation_type.id %>">
+          <p class="font-weight-bold text-center text-uppercase product-details-carousel-text"><%= relation_type.name %></p>
+          <%= render 'spree/shared/carousel_4_products', id: "related-products-carousel-#{relation_type.id}", products: products %>
+        </div>
+      <% end %>
+    <% end %>
   </div>
 <% end %>

data/app/views/spree/products/show.html.erb

@@ -38,7 +38,7 @@
 
     <%= render partial: 'gallery_modal' %>
   </div>
-  <div id="related-products" />
+  <div id="related-products"></div>
 
   <%= products_structured_data([@product]) %>
 
@@ -48,5 +48,4 @@
 <div
   data-related-products
   data-related-products-id="<%= @product.slug %>"
-  data-related-products-enabled="<%= @product.respond_to?(:has_related_products?) %>"
-/>
+  data-related-products-enabled="<%= @product.respond_to?(:has_related_products?) %>" />

data/app/views/spree/shared/_breadcrumbs.html.erb

@@ -1,8 +1,8 @@
-<nav id="breadcrumbs" class="col-12 mt-1 mt-sm-3 mt-lg-4">
+<nav id="breadcrumbs" class="col-12 mt-1 mt-sm-3 mt-lg-4" aria-label="breadcrumbs">
   <ol class="breadcrumb">
     <li class="breadcrumb-item">
       <span>
-        <%= link_to Spree.t('plp.home'), spree.root_path %>
+        <%= link_to Spree.t(:home), spree.root_path %>
       </span>
     </li>
     <% if @taxon %>