spree_frontend 4.2.4 → 4.3.0.rc3

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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>

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

@@ -0,0 +1,32 @@
+<!-- Styles And Script In A View Partial
+  If this view partial is removed from the spree_application.html.erb layout file, the storefront
+  will instantly snap back to the original look and feel with no hangover CSS or JavaScript related
+  to this partial.
+
+  Please do not transfer styles and JavaScript found here
+  into the main stylesheets or JavaScript files.
+-->
+<style>
+  #getStartedBar {
+    background: #33ba6f;
+    color: white;
+    z-index: 10;
+  }
+
+  #getStartedBar svg {
+    vertical-align: text-top;
+  }
+</style>
+
+<div id="getStartedBar" class="d-flex justify-content-center align-items-center p-1">
+  <div class="row">
+    <div class="col-12 text-center">
+      <h5 class="m-0">
+        <span style="font-weight: 200;">Create your own Spree project</span> <a href="https://spreecommerce.org/contact/" class="btn btn-outline-light btn-sm m-2" style="font-size: 1em; font-weight:800;">Get Started
+             <%= icon(name: 'arrow-right-circle-fill',
+                      width: 22,
+                      height: 22) %></a>
+      </h5>
+    </div>
+  </div>
+</div>

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

@@ -4,7 +4,7 @@
 <%== meta_data_tags %>
 <%== meta_robots %>
 <%= canonical_tag(current_store.url) %>
-<%= favicon_link_tag 'favicon.ico' %>
+<%= favicon_link_tag(spree_favicon_path) %>
 <%= stylesheet_link_tag 'spree/frontend/all', media: 'screen', 'data-turbolinks-track': 'reload' %>
 <%= csrf_meta_tags %>
 <%= render 'spree/shared/paths' %>

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

@@ -1,9 +1,9 @@
 <%# leaving #spree-header div for legacy support  %>
-<% cache spree_nav_cache_key('header') do %>
-  <div id="spree-header" data-turbolinks-permanent>
+<% cache spree_menu_cache_key('header') do %>
+  <div id="spree-header">
     <header id="header" class="d-flex align-items-center header-spree border-bottom">
       <div class="container-fluid h-100 header-spree-fluid">
-        <div class="d-flex flex-nowrap align-items-center h-100">
+        <div class="d-flex flex-nowrap align-items-center h-100 px-2">
           <div class="d-xl-none flex-grow-1 header-spree-fluid-mobile-menu-toggler">
             <button class="navbar-toggler border-0 px-0 d-flex" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-label="<%= Spree.t('nav_bar.show_menu') %>">
               <%= icon(name: 'burger',

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

@@ -1,55 +1,73 @@
-<% if spree_navigation_data.any? %>
+<% if spree_menu.present? %>
   <div class="h-100" role="navigation" aria-label="<%= Spree.t('nav_bar.desktop') %>">
     <ul class="nav h-100 main-nav-bar">
-      <% spree_navigation_data.each do |root| %>
-        <li class="p-0 nav-item main-nav-bar-category">
-          <% has_dropdown = root[:items].present? || root[:promo_banners].present? %>
-          <% dropdown_toggle_class = has_dropdown ? "dropdown-toggle" : "" %>
-          <% data_attr = has_dropdown ? { toggle: "dropdown" } : {} %>
-          <% aria_attr = has_dropdown ? { haspopup: true, expanded: false } : {} %>
-          <%= link_to root[:title], root[:url], class: "nav-link main-nav-bar-item main-nav-bar-category-button #{dropdown_toggle_class}",  data: data_attr, aria: aria_attr %>
-          <% if has_dropdown %>
-            <div class="dropdown-menu w-100 shadow main-nav-bar-category-dropdown">
-              <div class="container p-0 d-flex justify-content-xl-around mx-auto">
-                <div class="row">
-                  <% if root[:items].present? %>
-                    <div class="category-links">
-                      <% if root[:subtitle].present? %>
-                        <div class="category-links-header text-uppercase">
-                          <%= root[:subtitle] %>
+      <% spree_menu.children.each do |parent| %>
+          <li class="p-0 nav-item main-nav-bar-category">
+            <% has_dropdown = parent.children.present? %>
+            <% dropdown_toggle_class = has_dropdown ? "dropdown-toggle" : "" %>
+            <% data_attr = has_dropdown ? { toggle: "dropdown" } : {} %>
+            <% aria_attr = has_dropdown ? { haspopup: true, expanded: false } : {} %>
+            <% if parent.container? %>
+              <%= content_tag :span, parent.name, class: "nav-link main-nav-bar-item main-nav-bar-category-button #{dropdown_toggle_class}", data: data_attr, aria: aria_attr %>
+            <% else %>
+               <%= spree_nav_link_tag(parent, { class: "nav-link main-nav-bar-item main-nav-bar-category-button #{dropdown_toggle_class}", data: data_attr, aria: aria_attr }) %>
+            <% end %>
+
+             <% if has_dropdown %>
+              <div class="dropdown-menu w-100 shadow main-nav-bar-category-dropdown">
+                <div class="container p-0 d-flex justify-content-xl-around mx-auto">
+                  <div class="row px-5">
+                    <% parent.children.each do |child| %>
+
+                      <!-- Categories -->
+                      <% if child.container? && child.code?('category') %>
+                        <div class="category-links my-4 mx-2">
+                          <div class="category-links-header text-uppercase">
+                            <%= child.name %>
+                          </div>
+                          <% if child.children.present? %>
+                            <ul class="pl-0">
+                              <% child.children.each do |category_link| %>
+                                <li>
+                                  <%= spree_nav_link_tag(category_link, { class: "text-uppercase main-nav-bar-category-links dropdown-item truncate" }) %>
+                                </li>
+                              <% end %>
+                            </ul>
+                          <% end %>
                         </div>
                       <% end %>
-                      <ul class="pl-0">
-                        <% root[:items].each do |item| %>
-                          <li>
-                            <%= link_to item[:title], item[:url], class: "text-uppercase main-nav-bar-category-links dropdown-item" %>
-                          </li>
+
+                      <!-- Promos -->
+                      <% if child.container? && child.code?('promo') %>
+                        <% if child.children.present? %>
+                          <% child.children.each do |promo_banner| %>
+                            <%= spree_nav_link_tag(promo_banner, { class: "dropdown-item" }) do %>
+                              <div class="category-image text-center my-4 mx-3">
+                                <% if promo_banner.icon.present? %>
+                                  <%= image_tag main_app.url_for(promo_banner.icon.attachment), alt: promo_banner.icon.alt ,title: promo_banner.subtitle %>
+                                <% end %>
+                                <div class="category-box">
+                                  <div class="category-box-small-text">
+                                    <%= promo_banner.subtitle %>
+                                  </div>
+                                  <div class="category-box-big-text">
+                                    <%= promo_banner.name %>
+                                  </div>
+                                </div>
+                              </div>
+                            <% end %>
+                          <% end %>
                         <% end %>
-                      </ul>
-                    </div>
-                  <% end %>
-                  <% if root[:promo_banners].present? %>
-                    <% root[:promo_banners].each do |promo_banner| %>
-                      <%= link_to promo_banner[:url], class: "dropdown-item" do %>
-                        <div class="category-image text-center mx-3">
-                          <%= main_nav_image(promo_banner[:image], promo_banner[:title]) %>
-                          <div class="category-box">
-                            <div class="category-box-small-text">
-                              <%= promo_banner[:subtitle] %>
-                            </div>
-                            <div class="category-box-big-text">
-                              <%= promo_banner[:title] %>
-                            </div>
-                          </div>
-                        </div>
                       <% end %>
+
                     <% end %>
-                  <% end %>
+                  </div>
                 </div>
               </div>
-            </div>
-          <% end %>
-        </li>
+
+             <% end %>
+          </li>
+
       <% end %>
     </ul>
   </div>

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

@@ -1,4 +1,4 @@
-<% if spree_navigation_data.any? %>
+<% if spree_menu.present? %>
   <div class="position-fixed text-uppercase d-xl-none mobile-navigation" role="navigation" aria-label="<%= Spree.t('nav_bar.mobile') %>">
     <div class="container d-flex align-items-center justify-content-between header-spree" data-hook>
       <button class="m-0 p-0" id="mobile-navigation-back-button" aria-label="<%= Spree.t('nav_bar.go_to_previous_menu') %>">
@@ -18,30 +18,41 @@
     </div>
 
     <ul class="list-unstyled position-relative h-100 mobile-navigation-list">
-      <% spree_navigation_data.each do |root| %>
-        <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
-          <%= link_to root[:title], root[:url], class: 'w-75' %>
-          <% if root[:items].present? %>
-            <a class="w-25 text-right mobile-navigation-category-link" data-category="<%= root[:title].parameterize %>" href="#" aria-label="<%= Spree.t('go_to_category') %>">
+      <% spree_menu.children.each do |parent| %>
+          <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
+          <% if parent.container? %>
+            <%= content_tag :span, parent.name %>
+          <% else %>
+            <%= spree_nav_link_tag(parent, {class: 'w-75'}) %>
+          <% end %>
+
+          <% if parent.children.present? %>
+            <a class="w-25 text-right mobile-navigation-category-link" data-category="<%= parent.name.parameterize %>" href="#" aria-label="<%= Spree.t('go_to_category') %>">
               <%= icon(name: 'arrow-right',
                        classes: 'd-inline spree-icon-arrow spree-icon-arrow-right',
                        width: 14,
                        height: 27) %>
             </a>
-            <ul class="list-unstyled position-absolute mobile-navigation-sublist" data-category="<%= root[:title].parameterize %>">
-              <li class="text-center font-weight-bold mobile-navigation-sublist-header">
-                <%= root[:title] %>
-              </li>
-              <% root[:items].each do |item| %>
-                <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
-                  <%= link_to item[:title], item[:url], class: 'w-75' %>
+              <ul class="list-unstyled position-absolute mobile-navigation-sublist" data-category="<%= parent.name.parameterize %>">
+                <li class="text-center font-weight-bold mobile-navigation-sublist-header">
+                  <%= parent.name %>
                 </li>
-              <% end %>
-            </ul>
-          <% end %>
-        </li>
+
+                <% parent.children.each do |child| %>
+                  <% if child.container? && child.code?('category') %>
+                  <li class="text-muted mt-2"><%= child.name %></li>
+                    <% if child.children.present? %>
+                      <% child.children.each do |category_link| %>
+                        <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
+                          <%= spree_nav_link_tag(category_link, {class: 'w-75'}) %>
+                        </li>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              </ul>
+            <% end %>
+          </li>
       <% end %>
-      <%= render partial: 'spree/shared/mobile_internationalization_options' %>
     </ul>
-  </div>
 <% end %>