RubyGems - spree_frontend - Versions diffs - 4.2.5 → 4.3.0 - Mend

spree_frontend 4.2.5 → 4.3.0

Files changed (159) hide show

data/app/views/spree/layouts/spree_application.html.erb CHANGED Viewed

@@ -8,12 +8,13 @@
     <%= render partial: 'spree/shared/head' %>
   </head>
   <body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body">
+    <%= render partial: 'spree/shared/get_started' %>
     <%= render partial: 'spree/shared/header' %>
     <div id="overlay" class="overlay hide-on-esc"></div>
     <div data-hook>
-      <main id="content" data-hook>
-        <%= flash_messages %>
+      <%= flash_messages %>
+      <main class="col-12" id="content" data-hook>
         <%= yield %>
       </main>

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

@@ -1,25 +1,22 @@
 <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">
-  <% 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">
-  <% if Spree::Config[:show_raw_product_description] %>
+<% if Spree::Config[:show_raw_product_description] || product_wysiwyg_editor_enabled? %>
+  <div id="product-description-long" class="m-0 text-break product-description" data-hook="description">
     <%= raw product_description(@product) %>
-  <% else %>
+  </div>
+<% else %>
+  <div id="product-description-short" class="m-0 text-break product-description" data-hook="short-description">
+      <%= sanitize product_description(@product).truncate(450) %>
+  </div>
+  <div id="product-description-long" class="m-0 text-break product-description d-none" data-hook="description">
     <%= sanitize product_description(@product) %>
+  </div>
+  <% if product_description(@product).length > 450 %>
+    <span id="product-description-arrow" class="d-flex justify-content-center align-items-center mt-3 mx-auto product-description-arrow" aria-hidden="true">
+      <%= icon(name: 'arrow-right',
+               classes: 'spree-icon-arrow spree-icon-arrow-down',
+               width: 20,
+               height: 20) %>
+    </span>
   <% end %>
-</div>
-<% if product_description(@product).length > 450 %>
-  <span id="product-description-arrow" class="d-flex justify-content-center align-items-center mt-3 mx-auto product-description-arrow" aria-hidden="true">
-    <%= icon(name: 'arrow-right',
-             classes: 'spree-icon-arrow spree-icon-arrow-down',
-             width: 20,
-             height: 20) %>
-  </span>
 <% end %>

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

@@ -1,11 +1,13 @@
-<% cache base_cache_key + [available_option_types_cache_key, filtering_params_cache_key, @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">
+    <%= clear_all_filters_link(permitted_params) if product_filters_present?(permitted_params) %>
     <div class="plp-filters-scroller">
-      <% @available_option_types.each do |option_type| %>
+      <% 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? %>
+          <% 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<%= 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 %>
@@ -21,14 +23,43 @@
           <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 %>
+                permitted_params: permitted_params %>
             </div>
           </div>
         </div>
       <% end %>
+      <% 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.titleize %>
+              <%= 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">
@@ -44,14 +75,18 @@
         </button>
         <div id="collapseFilterPrice" class="collapse <%= 'show' unless price_collapsed %>" 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>
-              <% end %>
+            <% price_filters.each do |price_range| %>
+              <%= price_filter_link(price_range, permitted_params) %>
             <% end %>
+            <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>
+              <%= link_to Spree.t('plp.done'), permitted_params, class: 'btn btn-primary spree-btn w-100', data: { params: permitted_params } %>
+            </div>
           </div>
         </div>
       </div>

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

@@ -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_cache_key, filtering_params_cache_key, @taxon&.id] do %>
+  <% cache filters_cache_key('mobile') do %>
     <div class="plp-scroll">
       <div class="container">
         <div class="plp-overlay-header">
@@ -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_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<%= 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,14 +66,16 @@
           </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), 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>
-                <% 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>
@@ -60,7 +88,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', 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 } %>
+    <%= 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/_sort_desktop.html.erb CHANGED Viewed

@@ -10,21 +10,27 @@
              width: 18,
              height: 18) %>
   </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)), 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 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')), 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>
+    </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 CHANGED Viewed

@@ -15,6 +15,22 @@
         <%= Spree.t('plp.default') %>
       </a>
     </li>
+    <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">

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

@@ -1,4 +1,4 @@
-<% permitted_params = params.permit(*filtering_params) %>
+<% permitted_params = permitted_products_params %>
 <% products_empty = @products.empty? %>
 <div data-hook="search_results">

data/app/views/spree/shared/_carousel_4_products.html.erb CHANGED Viewed

@@ -1,5 +1,5 @@
-<% cache [common_product_cache_keys, products&.maximum(:updated_at)&.to_i, id, products&.ids&.join(',')] do %>
-  <div id="<%= id %>-mobile" class="carousel slide d-md-none homepage-carousel" data-interval="false">
+<% cache [common_product_cache_keys, products&.except(:group, :order)&.maximum(:updated_at)&.to_i, id, products&.ids&.join(',')] do %>
+  <div id="<%= id.parameterize %>-mobile" class="carousel slide d-md-none homepage-carousel" data-interval="false">
     <div class="carousel-inner">
       <% products.each_slice(2).with_index do |sliced_items, index| %>
         <div class="carousel-item <%= 'active' if index == 0 %>">
@@ -18,7 +18,7 @@
     </div>
     <a
       class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--previous"
-      href="#<%= id %>-mobile"
+      href="#<%= id.parameterize %>-mobile"
       role="button"
       data-slide="prev">
       <span class="d-flex justify-content-center align-items-center carousel-icon-control-rounded" aria-hidden="true">
@@ -32,7 +32,7 @@
     <a
       class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--next"
-      href="#<%= id %>-mobile"
+      href="#<%= id.parameterize %>-mobile"
       role="button"
       data-slide="next">
       <span class="d-flex justify-content-center align-items-center carousel-icon-control-rounded" aria-hidden="true">
@@ -45,14 +45,14 @@
     </a>
   </div>
-  <div id="<%= id %>-desktop" class="carousel slide d-none d-md-block homepage-carousel" data-interval="false">
+  <div id="<%= id.parameterize %>-desktop" class="carousel slide d-none d-md-block homepage-carousel" data-interval="false">
     <div class="carousel-inner carousel-inner-width">
       <% products.each_slice(4).with_index do |sliced_items, index| %>
         <div class="carousel-item <%= 'active' if index == 0 %>">
           <div class="container position-relative">
             <a
               class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--previous"
-              href="#<%= id %>-desktop"
+              href="#<%= id.parameterize %>-desktop"
               role="button"
               data-slide="prev">
               <span class="d-flex justify-content-center align-items-center carousel-icon-control-rounded" aria-hidden="true">
@@ -66,7 +66,7 @@
             <div class="row carousel-items-container">
               <% sliced_items.each do |item| %>
-                <div class="col-3">
+                <div class="col-3 carouselItem">
                   <%= render 'spree/shared/product', product: item, image_class: 'w-100' %>
                 </div>
               <% end %>
@@ -74,7 +74,7 @@
             <a
               class="d-md-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--next"
-              href="#<%= id %>-desktop"
+              href="#<%= id.parameterize %>-desktop"
               role="button"
               data-slide="next">
               <span class="d-flex justify-content-center align-items-center carousel-icon-control-rounded" aria-hidden="true">

data/app/views/spree/shared/_checkout_header.html.erb CHANGED Viewed

@@ -1,27 +1,28 @@
 <div id="spree-header">
   <header id="header" class="d-flex align-items-center header-spree border-bottom">
-    <div class="container position-relative" role="navigation" aria-label="<%= Spree.t('checkout_page.main_navigation') %>">
-      <div class="position-absolute checkout-header-link">
-        <%= link_to spree.cart_path, class: "d-none d-sm-inline text-uppercase", method: :get do %>
-          <%= icon(name: 'arrow-right',
-                   classes: 'spree-icon-arrow spree-icon-arrow-left',
-                   width: 7,
-                   height: 14) %>
-          <span class="checkout-header-link-text"><%= Spree.t('checkout_page.back_to_cart') %></span>
-        <% end %>
+    <div class="container" role="navigation" aria-label="<%= Spree.t('checkout_page.main_navigation') %>">
+      <div class="row">
+        <div class="col d-flex align-items-center truncate pr-0">
+          <%= link_to spree.cart_path, class: "text-uppercase truncate checkout-header-link-text", method: :get do %>
+            <%= icon(name: 'arrow-right',
+                     classes: 'spree-icon-arrow spree-icon-arrow-left',
+                     width: 14,
+                     height: 14) %>
+            <%= Spree.t('checkout_page.back_to_cart') %>
+          <% end %>
+        </div>
+        <div class="col-auto d-flex align-items-center justify-content-end justify-content-md-center">
+          <figure class="logo header-spree-fluid-logo m-0 p-0">
+            <%= logo(nil, {method: :get}) %>
+          </figure>
+        </div>
+        <div class="col-0 col-md">
+          <!-- spacer -->
+        </div>
-        <%= link_to spree.cart_path, class: "d-sm-none text-uppercase", method: :get do %>
-          <%= icon(name: 'arrow-right',
-                   classes: 'spree-icon-arrow spree-icon-arrow-left',
-                   width: 7,
-                   height: 14) %>
-          <span class="checkout-header-link-text"><%= Spree.t('back') %></span>
-        <% end %>
-      </div>
-      <div class="d-flex flex-nowrap align-items-center justify-content-center">
-        <figure class="logo flex-grow-0 flex-xl-grow-0 order-xl-0 header-spree-fluid-logo m-0">
-          <%= logo(nil, {method: :get}) %>
-        </figure>
       </div>
     </div>
   </header>

data/app/views/spree/shared/_copyright.html.erb CHANGED Viewed

@@ -1,17 +1,8 @@
 <div class="border-top footer-spree-copyright">
   <div class="container">
     <div class="d-flex flex-column flex-lg-row align-items-center justify-content-center py-3 footer-spree-copyright-content">
-      <div>Designed and developed by</div>
-      <div class="mb-1 mb-lg-0">
-        <%= link_to 'https://sparksolutions.co/', target: :blank, 'aria-label': 'Go to Spark Solutions', rel: :follow do %>
-          <%= image_tag 'spark-logo@3x.png', class: 'footer-spree-copyright-logo-spark mx-2', alt: 'Spree Commerce & Ruby on Rails developers', title: 'Spree Commerce & Ruby on Rails developers' %>
-        <% end %>
-      </div>
-      <div class="d-none d-lg-inline-block mr-2">|</div>
       <div>
-        © <%= Time.current.year %>
-        <%= link_to current_store.name, "https://#{current_store.url}" %>.
-        <%= Spree.t(:all_rights_reserved) %>.
+        Designed and developed by <%= link_to 'Spark Solutions', 'https://sparksolutions.co/', target: :_blank, 'aria-label': 'Go to Spark Solutions', rel: :follow %> | © <%= Time.current.year %> <%= link_to current_store.name, current_store.formatted_url %>. <%= Spree.t(:all_rights_reserved) %>.
       </div>
     </div>
   </div>

data/app/views/spree/shared/_footer.html.erb CHANGED Viewed

@@ -1,5 +1,5 @@
-<% cache spree_nav_cache_key('footer') do %>
-  <footer id="footer" class="pt-2 mx-auto border-top footer-spree" data-turbolinks-permanent>
+<% cache spree_menu_cache_key('footer') do %>
+  <footer id="footer" class="pt-2 mx-auto border-top footer-spree">
     <div class="container">
       <div class="row d-xl-flex justify-content-xl-around pb-xl-5">
         <div class="d-flex d-xl-block flex-xl-grow-0 col-xl-4">
@@ -47,23 +47,29 @@
           </div>
         </div>
       </div>
-      <div class="row d-none d-xl-flex border-top py-5 text-uppercase footer-spree-menu-links">
-        <% if spree_navigation_data.any? %>
-          <% spree_navigation_data.first(3).each do |root| %>
-            <div class="col-3">
+      <div class="row d-none d-xl-flex border-top pt-5 text-uppercase footer-spree-menu-links">
+        <% if spree_menu('footer').present? %>
+          <% spree_menu('footer').children.each do |parent| %>
+            <div class="col-3 mb-5">
               <div class="footer-spree-label">
-                <%= link_to root[:title], root[:url] %>
-              </div>
-              <% if  root[:items].present? %>
-                <% root[:items].each do |item| %>
-                  <div class="pt-2"><%= link_to item[:title], item[:url] %></div>
+                <% if parent.container? %>
+                  <%= parent.name %>
+                <% else %>
+                  <%= spree_nav_link_tag(parent) %>
                 <% end %>
+              </div>
+              <% parent.children.each do |child| %>
+                <div class="pt-2">
+                  <%= spree_nav_link_tag(child) %>
+                </div>
               <% end %>
             </div>
           <% end %>
         <% end %>
         <% if spree.respond_to?(:account_path) %>
-          <div class="col-3">
+          <div class="col-3 mb-5">
             <div class="footer-spree-label">
               <%= Spree.t('nav_bar.my_account') %>
             </div>