spree_frontend 4.1.8 → 4.2.0.rc1

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

@@ -20,48 +20,42 @@
   <div class="row">
     <div class="col-6">
 
-      <div class="homepage-taxon-box mb-3">
-        <%= link_to spree.nested_taxons_path('men') do %>
-          <img class="w-100 lazyload"
-            data-src="<%= asset_path('homepage/category_banner_upper.jpg') %>"
-            data-srcset="<%= image_source_set('homepage/category_banner_upper') %>"
-            alt="<%= Spree.t('homepage.men')%>" />
-
-          <div class="homepage-taxon-box-text">
-            <h3><%= Spree.t('homepage.men') %></h3>
-          </div>
-        <% end %>
-      </div>
+      <%= link_to spree.nested_taxons_path('men'), class: "homepage-taxon-box mb-3" do %>
+        <img class="w-100 lazyload"
+          data-src="<%= asset_path('homepage/category_banner_upper.jpg') %>"
+          data-srcset="<%= image_source_set('homepage/category_banner_upper') %>"
+          alt="<%= Spree.t('homepage.men')%>" />
+
+        <div class="homepage-taxon-box-text">
+          <h3><%= Spree.t('homepage.men') %></h3>
+        </div>
+      <% end %>
 
-      <div class="homepage-taxon-box">
-        <%= link_to spree.nested_taxons_path('sportswear') do %>
-          <img class="w-100 lazyload"
-            data-src="<%= asset_path('homepage/category_banner_lower.jpg') %>"
-            data-srcset="<%= image_source_set('homepage/category_banner_lower') %>"
-            alt="<%= Spree.t('homepage.sportswear')%>" />
+      <%= link_to spree.nested_taxons_path('sportswear'), class: "homepage-taxon-box" do %>
+        <img class="w-100 lazyload"
+          data-src="<%= asset_path('homepage/category_banner_lower.jpg') %>"
+          data-srcset="<%= image_source_set('homepage/category_banner_lower') %>"
+          alt="<%= Spree.t('homepage.sportswear')%>" />
 
-          <div class="homepage-taxon-box-text" role="img" aria-label="<%= Spree.t('homepage.sportswear') %>">
-            <h3><%= Spree.t('homepage.sportswear') %></h3>
-          </div>
-        <% end %>
-      </div>
+        <div class="homepage-taxon-box-text" role="img" aria-label="<%= Spree.t('homepage.sportswear') %>">
+          <h3><%= Spree.t('homepage.sportswear') %></h3>
+        </div>
+      <% end %>
 
     </div>
 
     <div class="col-6 d-flex flex-column">
 
-      <div class="homepage-taxon-box flex-grow-1">
-        <%= link_to spree.nested_taxons_path('women') do %>
-          <img class="w-100 lazyload"
-            data-src="<%= asset_path('homepage/big_category_banner.jpg') %>"
-            data-srcset="<%= image_source_set('homepage/big_category_banner') %>"
-            alt="<%= Spree.t('homepage.women')%>" />
+      <%= link_to spree.nested_taxons_path('women'), class: "homepage-taxon-box flex-grow-1" do %>
+        <img class="w-100 lazyload"
+          data-src="<%= asset_path('homepage/big_category_banner.jpg') %>"
+          data-srcset="<%= image_source_set('homepage/big_category_banner') %>"
+          alt="<%= Spree.t('homepage.women')%>" />
 
-          <div class="homepage-taxon-box-text">
-            <h3><%= Spree.t('homepage.women') %></h3>
-          </div>
-        <% end %>
-      </div>
+        <div class="homepage-taxon-box-text">
+          <h3><%= Spree.t('homepage.women') %></h3>
+        </div>
+      <% end %>
 
     </div>
   </div>
@@ -71,7 +65,7 @@
 
 <div class="homepage-fashion-trends-box mb-3">
   <div class="text-center">
-    <div class="homepage-fashion-trends-box-summer-text mb-1"><%= Spree.t('homepage.summer_2019') %></div>
+    <div class="homepage-fashion-trends-box-summer-text mb-1"><%= Spree.t('homepage.summer_2020') %></div>
     <div class="homepage-fashion-trends-box-fashion-trends-text mb-2"><%= Spree.t('homepage.fashion_trends') %></div>
     <div class="homepage-fashion-trends-box-description-text text-center mb-3">
       <%= Spree.t('homepage.fashion_trends_note') %>

data/app/views/spree/layouts/checkout.html.erb

@@ -20,7 +20,9 @@
       <%= yield :templates %>
     </div>
 
-    <%= render 'spree/shared/copyright' %>
+    <footer>
+      <%= render 'spree/shared/copyright' %>
+    </footer>
     <%= render 'spree/shared/translations' %>
   </body>
 </html>

data/app/views/spree/orders/_coupon_code.html.erb

@@ -1,7 +1,7 @@
 <% if promotion.nil? %>
   <div class='shopping-cart-coupon-code <%= classes %>' data-hook='coupon_code'>
     <div class="input-group">
-      <%= order_form.text_field :coupon_code, size: '30', class: 'form-control border-right-0', placeholder: Spree.t('cart_page.add_promo_code') %>
+      <%= order_form.text_field :coupon_code, size: '30', class: 'form-control border-right-0', placeholder: Spree.t('cart_page.add_promo_code'), aria: { label: Spree.t('cart_page.add_promo_code') } %>
       <div class="input-group-append">
         <%= button_tag '+', name: '', id: 'shopping-cart-coupon-code-button', class: 'btn border-left-0' %>
       </div>

data/app/views/spree/orders/_line_item.html.erb

@@ -6,7 +6,7 @@
       <%= link_to product_image(variant), variant.product %>
     </div>
     <div class="d-table-cell shopping-cart-item-description" data-hook="cart_item_description">
-      <h4 class="item-title"><%= link_to line_item.name, spree.product_path(variant.product) %></h4>
+      <h2 class="item-title"><%= link_to line_item.name, spree.product_path(variant.product) %></h2>
       <% if line_item.insufficient_stock? %>
         <span class="out-of-stock">
           <%= Spree.t(:out_of_stock) %>&nbsp;&nbsp;<br />

data/app/views/spree/orders/_line_item_data.html.erb

@@ -10,7 +10,7 @@
 <div class="shopping-cart-item-quantity <%= additional_classes %>" data-hook="cart_item_quantity">
   <div class="d-flex align-items-center">
     <%= button_tag '-', type: 'button', class: "border-right-0 shopping-cart-item-quantity-decrease-btn", data: { id: dom_id(line_item) } %>
-    <%= item_form.number_field :quantity, min: 0, class: "form-control text-center border-left-0 border-right-0 shopping-cart-item-quantity-input", size: 5, data: { id: dom_id(line_item) } %>
+    <%= item_form.number_field :quantity, min: 0, class: "form-control text-center border-left-0 border-right-0 shopping-cart-item-quantity-input", size: 5, data: { id: dom_id(line_item) }, aria: { label: Spree.t('cart_page.change_quantity') } %>
     <%= button_tag '+', type: 'button', class: "border-left-0 shopping-cart-item-quantity-increase-btn", data: { id: dom_id(line_item) } %>
   </div>
 </div>
@@ -22,7 +22,7 @@
 <% end %>
 
 <div class="shopping-cart-item-delete <%= additional_classes %>" data-hook="cart_item_delete">
-  <%= link_to '#', class: 'delete', id: "delete_#{dom_id(line_item)}", data: { turbolinks: false } do %>
+  <%= link_to '#', class: 'delete', id: "delete_#{dom_id(line_item)}", data: { turbolinks: false }, aria: { label: Spree.t('cart_page.remove_from_cart') } do %>
     <%= icon(name: 'garbage',
              classes: 'shopping-cart-item-delete-icon',
              width: 18.9,

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

@@ -13,7 +13,7 @@
   <% end %>
 
   <p class="order-show-number text-uppercase w-100 text-center">
-    <%= accurate_title %> / <%= @order.completed_at.to_date.to_s(:long) %>
+    <%= accurate_title %> / <%= pretty_date(@order.completed_at) %>
   </p>
   <dl class="w-100 d-lg-flex justify-content-lg-between">
     <div>

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

@@ -16,6 +16,7 @@
 
 <% is_product_available_in_currency = product_available_in_currency? %>
 <% default_variant = default_variant(@variants, @product) %>
+<% should_display_compare_at_price = default_variant.compare_at_price.present? && default_variant.compare_at_price > default_variant.price %>
 
 <%= form_for :order, html: {
     id: 'add-to-cart-form',
@@ -27,6 +28,11 @@
   <div id="inside-product-cart-form" data-hook="inside_product_cart_form">
     <% if is_product_available_in_currency %>
       <div id="product-price" class="mb-2 text-center text-md-left add-to-cart-form-price" data-hook="product_price">
+        <span class="compare-at-price">
+          <% if should_display_compare_at_price %>
+            <span class="mr-3"><%= display_compare_at_price(default_variant) %></span>
+          <% end %>
+        </span>
         <span class="price selling" content="<%= @product_price.to_d %>">
           <%= display_price(default_variant) %>
         </span>
@@ -52,7 +58,7 @@
       <ul id="product-variants" class="product-variants">
         <% used_variants_options(@variants, @product).each_with_index do |option_type, index| %>
           <li>
-            <% if option_type[:name] == "color" %>
+            <% if Spree::OptionType.color&.name == option_type[:name] %>
               <%= render "color_option_type", option_type: option_type, index: index %>
             <% else %>
               <%= render "option_type", option_type: option_type, index: index %>
@@ -67,7 +73,7 @@
 
       <hr>
       <div>
-        <div class="mb-5 mt-4">
+        <div class="mb-5 mt-4 text-center text-md-left">
           <%= render 'spree/shared/quantity_select', input_name: :quantity %>
         </div>
 

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

@@ -7,22 +7,23 @@
     <ol class="d-flex flex-wrap product-variants-variant-values">
       <% option_type[:option_values].each do |option_value| %>
         <li>
-          <%= radio_button_tag "variant_option_value_id_#{option_type[:id]}",
-            option_value[:id],
-            option_value[:is_default] && index == 0,
-            class: "product-variants-variant-values-radio",
-            data: {
-              "option-type-index" => index,
-              "presentation" => option_value[:presentation],
-              "variant-id" => option_value[:variant_id],
-              "is-color" => true
-            }
-          %>
-
           <%= label_tag "variant_option_value_id_#{option_type[:id]}_#{option_value[:id]}",
             class: "m-1 m-sm-2 m-md-1 color-select-label",
-            tabindex: 0,
-            "aria-label" => option_value[:presentation] do %>
+            title: option_value[:name],
+            data: { toggle: "tooltip", placement: "bottom" } do %>
+
+            <%= radio_button_tag "variant_option_value_id_#{option_type[:id]}",
+              option_value[:id],
+              option_value[:is_default] && index == 0,
+              class: "product-variants-variant-values-radio",
+              aria: { label: option_value[:name] },
+              data: {
+                "option-type-index" => index,
+                "presentation" => option_value[:presentation],
+                "variant-id" => option_value[:variant_id],
+                "is-color" => true
+              }
+            %>
 
             <%= render partial: "spree/shared/color_select", locals: {
               color: option_value[:presentation],

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

@@ -1,10 +1,18 @@
 <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle"><%= Spree.t(:description) %></h3>
 <div id="product-description-short" class="m-0 text-break product-description" data-hook="description">
-  <%= sanitize product_description(@product).truncate(450) %>
+  <% if Spree::Config[:show_raw_product_description] %>
+    <%= raw product_description(@product).truncate(450) %>
+  <% else %>
+    <%= sanitize product_description(@product).truncate(450) %>
+  <% end %>
 </div>
 
 <div id="product-description-long" class="m-0 text-break product-description d-none" data-hook="description">
-  <%= sanitize product_description(@product) %>
+  <% if Spree::Config[:show_raw_product_description] %>
+    <%= raw product_description(@product) %>
+  <% else %>
+    <%= sanitize product_description(@product) %>
+  <% end %>
 </div>
 
 <% if product_description(@product).length > 450 %>

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

@@ -1,12 +1,39 @@
 <% cache base_cache_key + [available_option_types_cache_key, filtering_params_cache_key, @taxon&.id] 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 %>
+    <div class="plp-filters-scroller">
+      <% @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 %>
+          <% collapsed = params[ot_downcase_name].blank? %>
 
-        <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 %>
+          <button class="card-header <%= 'collapsed' if collapsed %> px-1 plp-filters-card-header" id="filters<%= option_type_name %>" data-toggle="collapse" data-target="#collapseFilter<%= option_type_name %>" aria-expanded="<%= !collapsed %>" aria-controls="collapseFilter<%= option_type_name %>" 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<%= option_type_name %>" class="collapse <%= 'show' unless collapsed %>" aria-labelledby="filters<%= option_type_name %>">
+            <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_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,45 +42,20 @@
                   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 %>
-
-    <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>
+            <% 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>
+              <% end %>
             <% end %>
-          <% end %>
+          </div>
         </div>
       </div>
-
       <% additional_filters_partials.each do |partial| %>
         <%= render "spree/products/filters/#{partial}", permitted_params: permitted_params %>
       <% end %>

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

@@ -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">
+            <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_name %>
               <%= 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>
@@ -42,7 +42,7 @@
             <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 %>
+                <%= link_to permitted_params.merge(price: price_param, menu_open: 1), data: { params: permitted_params.merge(price: price_param, menu_open: 1), filter_name: 'price' } 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>
@@ -60,7 +60,7 @@
   <% end %>
 
   <div class="container position-absolute text-center 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' %>
+    <%= 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', data: { params: permitted_params.select { |key, value| key == "sort_by"} } %>
+    <%= link_to Spree.t('plp.done'), permitted_params, class: 'btn btn-primary spree-btn w-100 done-btn', data: { params: permitted_params } %>
   </div>
 </div>

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

@@ -3,7 +3,7 @@
     <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 position-absolute" 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',

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

@@ -20,7 +20,6 @@
 
           <%= 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/_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,21 +9,21 @@
              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')) %>
+        <%= 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')) %>
+        <%= 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')) %>
+        <%= 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>