spree_frontend 4.1.0 → 4.7.0

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

@@ -1,50 +1,74 @@
-<% if spree_navigation_data.any? %>
-  <ul class="nav h-100 main-nav-bar">
-    <% spree_navigation_data.each do |root| %>
-      <li class="navbar main-nav-bar-dropdown main-nav-bar-category">
-        <%= link_to root[:title], root[:url], class: "p-2 main-nav-bar-item main-nav-bar-category-button" %>
-        <% if root[:items].present? || root[:promo_banners].present? %>
-          <div class="w-100 shadow main-nav-bar-category-dropdown">
-            <div class="container p-0 d-flex justify-content-xl-around mx-auto">
-              <% if root[:items].present? %>
-                <div class="row">
-                  <div class="category-links">
-                    <% if root[:subtitle].present? %>
-                      <div class="category-links-header text-uppercase">
-                        <%= root[:subtitle] %>
-                      </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" %>
-                        </li>
-                      <% end %>
-                    </ul>
-                  </div>
-                <% end %>
-                <% if root[:promo_banners].present? %>
-                  <% root[:promo_banners].each do |promo_banner| %>
-                    <%= link_to promo_banner[:url] 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] %>
+<% 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_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>
-                      </div>
+                      <% end %>
+
+                      <!-- 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.cdn_image_url(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 %>
+                      <% end %>
+
                     <% end %>
-                  <% end %>
-                <% end %>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        <%end %>
-      </li>
-    <% end %>
-  </ul>
+
+             <% end %>
+          </li>
+
+      <% end %>
+    </ul>
+  </div>
 <% end %>

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

@@ -0,0 +1,37 @@
+<% if (defined?(should_render_store_chooser?) && should_render_store_chooser?) || (defined?(should_render_internationalization_dropdown?) && should_render_internationalization_dropdown?) %>
+  <% link_title = "#{Spree.t(:choose_currency)} / #{Spree.t('i18n.language')}" %>
+
+  <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
+    <span class="w-75"><%= link_title %></span>
+    <a class="w-25 text-right mobile-navigation-category-link" data-category="internationalization" href="#" aria-label="<%= link_title %>">
+      <%= icon(name: 'arrow-right',
+              classes: 'd-sm-none spree-icon-arrow spree-icon-arrow-right',
+              width: 16,
+              height: 16) %>
+      <%= icon(name: 'arrow-right',
+              classes: 'd-none d-sm-inline spree-icon-arrow spree-icon-arrow-right',
+              width: 14,
+              height: 27) %>
+    </a>
+
+    <ul class="list-unstyled position-absolute mobile-navigation-sublist" data-category="internationalization">
+      <li class="text-center font-weight-bold mobile-navigation-sublist-header">
+        <%= Spree.t(:internationalization) %>
+      </li>
+      <% if (defined?(should_render_store_chooser?) && should_render_store_chooser?) %>
+        <% stores.each do |store| %>
+          <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
+            <%= country_flag_icon(store_country_iso(store)) %>
+            <%= store_link(store, class: "dropdown-item text-uppercase d-flex #{'font-weight-bold' if current_store == store}") %>
+          </li>
+        <% end %>
+      <% else %>
+        <div class="mt-4 pt-4">
+          <%= render 'spree/shared/locale_dropdown' %>
+          <div class="dropdown-divider mt-4 pb-4"></div>
+          <%= render 'spree/shared/currency_dropdown' %>
+        </div>
+      <% end %>
+    </ul>
+  </li>
+<% end %>

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

@@ -1,73 +1,58 @@
-<% if spree_navigation_data.any? %>
-  <div class="position-fixed text-uppercase d-xl-none mobile-navigation">
-    <div class="d-flex align-items-center header-spree" data-hook>
-      <div class="container-fluid header-spree-fluid">
-        <div class="d-flex flex-nowrap align-items-center">
-          <div class="d-xl-none flex-grow-1">
-            <button id="mobile-navigation-back-button" aria-label="<%= Spree.t('nav_bar.go_to_previous_menu') %>">
-              <%= icon(name: 'arrow-right',
-                      classes: 'd-sm-none spree-icon-arrow spree-icon-arrow-left',
-                      width: 18,
-                      height: 18) %>
-              <%= icon(name: 'arrow-right',
-                      classes: 'd-none d-sm-inline spree-icon-arrow spree-icon-arrow-left',
-                      width: 17,
-                      height: 28) %>
-            </button>
-          </div>
-          <figure class="logo flex-grow-0 flex-xl-grow-1 order-xl-0 header-spree-fluid-logo" data-hook>
-            <%= logo %>
-          </figure>
-          <div id="top-nav-bar-mobile" class="text-right flex-grow-1 header-spree-fluid-secondary-navigation" data-hook>
-            <button id="mobile-navigation-close-button" aria-label="<%= Spree.t('nav_bar.close_menu') %>">
-              <%= icon(name: 'close',
-                      classes: 'd-sm-none',
-                      width: 17,
-                      height: 17) %>
-              <%= icon(name: 'close',
-                      classes: 'd-none d-sm-inline',
-                      width: 26,
-                      height: 26) %>
-            </button>
-          </div>
-        </div>
+<% 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') %>">
+        <%= icon(name: 'arrow-right',
+                classes: 'd-inline spree-icon-arrow spree-icon-arrow-left',
+                width: 26,
+                height: 26) %>
+      </button>
+      <div id="top-nav-bar-mobile" class="m-0 p-0 header-spree-fluid-secondary-navigation" data-hook>
+        <button id="mobile-navigation-close-button" aria-label="<%= Spree.t(:close) %>">
+          <%= icon(name: 'close',
+                  classes: 'd-inline',
+                  width: 26,
+                  height: 26) %>
+        </button>
       </div>
     </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' %>
-
-          <a class="w-25 text-right mobile-navigation-category-link" data-category="<%= root[:title].parameterize %>" href="#" aria-label="<%= Spree.t('go_to_category')%>">
-            <%= icon(name: 'arrow-right',
-                    classes: 'd-sm-none spree-icon-arrow spree-icon-arrow-right',
-                    width: 16,
-                    height: 16) %>
-            <%= icon(name: 'arrow-right',
-                    classes: 'd-none d-sm-inline spree-icon-arrow spree-icon-arrow-right',
-                    width: 14,
-                    height: 27) %>
-          </a>
+      <% 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 %>
 
-          <ul class="list-unstyled position-absolute mobile-navigation-sublist" data-category="<%= root[:title].parameterize %>">
-            <% if root[:items].present? %>
-              <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' %>
+          <% 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="<%= parent.name.parameterize %>">
+                <li class="text-center font-weight-bold mobile-navigation-sublist-header">
+                  <%= parent.name %>
                 </li>
-              <% end %>
-            <% else %>
-              <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
-                <%= link_to root[:title], root[:url], class: 'w-75' %>
-              </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 %>
-          </ul>
-        </li>
+          </li>
       <% end %>
     </ul>
-  </div>
 <% end %>

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

@@ -1,16 +1,11 @@
-<ul id="nav-bar" class="nav align-items-center d-flex justify-content-end navbar-right">
+<ul id="nav-bar" class="nav align-items-center d-flex flex-nowrap justify-content-end navbar-right" data-turbo-permanent data-turbo-permanent>
   <li>
     <div class="navbar-right-search-menu">
-      <button type="button" class="navbar-right-dropdown-toggle search-icons" aria-label="<%= Spree.t('nav_bar.show_search')%>">
+      <button type="button" class="navbar-right-dropdown-toggle search-icons" aria-label="<%= Spree.t('nav_bar.show_search') %>">
         <%= icon(name: 'magnifying-glass',
-                 classes: 'd-none d-xl-inline-block',
+                 classes: 'd-inline-block',
                  width: 36,
-                 height: 36)  %>
-
-        <%= icon(name: 'magnifying-glass',
-                 classes: 'd-xl-none',
-                 width: 24,
-                 height: 24)  %>
+                 height: 36) %>
       </button>
 
       <div id="search-dropdown" class="p-0 px-md-4 py-md-2 w-100 shadow navbar-right-search-menu-dropdown hide-on-esc">
@@ -21,16 +16,11 @@
   <% if defined?(spree.account_link_path) %>
     <li>
       <div class="dropdown navbar-right-dropdown">
-        <button id="account-button" type="button" data-toggle="dropdown" class="navbar-right-dropdown-toggle" aria-label="<%= Spree.t('nav_bar.show_user_menu')%>">
+        <button id="account-button" type="button" data-toggle="dropdown" class="navbar-right-dropdown-toggle account-icon" aria-label="<%= Spree.t('nav_bar.show_user_menu') %>">
           <%= icon(name: 'person',
-                  classes: 'd-none d-xl-inline-block',
+                  classes: 'd-inline-block',
                   width: 41.4,
-                  height: 36)  %>
-
-          <%= icon(name: 'person',
-                  classes: 'd-xl-none',
-                  width: 27.6,
-                  height: 24)  %>
+                  height: 36) %>
         </button>
 
         <div id="link-to-account" class="dropdown-menu dropdown-menu-right text-right">
@@ -39,7 +29,7 @@
     </li>
   <% end %>
   <li id="link-to-cart">
-    <%= render 'spree/shared/cart', class: 'd-none d-xl-inline-block cart-icon--xl', size: 36, item_count: 0 %>
-    <%= render 'spree/shared/cart', class: 'd-xl-none', size: 24, item_count: 0 %>
+    <%= render 'spree/shared/cart', class: 'd-inline-block cart-icon', size: 36, item_count: 0 %>
   </li>
+  <%= render partial: 'spree/shared/internationalization_options' %>
 </ul>

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

@@ -1,5 +1,5 @@
 <div class="p-0 justify-content-around mx-auto no-product-available">
-  <div id= "no-product-available-close-button" class="d-flex no-product-available-icon">
+  <div id="no-product-available-close-button" class="d-flex no-product-available-icon">
     <%= inline_svg_tag "close.svg", class: "w-100 h-100" %>
   </div>
 

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

@@ -1,24 +1,5 @@
-<% cache base_cache_key + [ot_downcase_name, params_ot_downcase_name, permitted_params, @taxon&.id] do %>
-  <% selected_option_values = params_ot_downcase_name&.split(',')&.map(&:to_i) || [] %>
+<% cache option_type_cache_key(option_type) do %>
   <% option_type.option_values.each do |option_value| %>
-    <% id = option_value.id %>
-    <% name = option_value.name %>
-
-    <% option_value_param = (selected_option_values.include?(id) ? selected_option_values - [id] : selected_option_values + [id]).join(',') %>
-    <%= link_to permitted_params.merge(ot_downcase_name => option_value_param, menu_open: 1) do %>
-      <% if ot_downcase_name == 'color' %>
-
-        <span class="d-inline-block mb-1">
-                        <%= render partial: 'spree/shared/color_select', locals: {
-                          color: option_value.presentation,
-                          selected: selected_option_values.include?(id)
-                        } %>
-                      </span>
-      <% else %>
-        <div class="d-inline-block text-uppercase py-1 px-2 m-1 plp-overlay-card-item <%= 'plp-overlay-card-item--selected' if selected_option_values.include?(id) %>">
-          <%= name %>
-        </div>
-      <% end %>
-    <% end %>
+    <%= option_value_filter_link(option_value, permitted_params) %>
   <% end %>
 <% end %>