spree_frontend 4.1.10 → 4.2.0.rc2

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>

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

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

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

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

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

@@ -1,4 +1,4 @@
-<% cache [common_product_cache_keys, products&.maximum(:updated_at)&.to_i, id] do %>
+<% 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">
     <div class="carousel-inner">
       <% products.each_slice(2).with_index do |sliced_items, index| %>

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

@@ -5,5 +5,5 @@
            width: size,
            height: size) %>
 
-  <div class="font-weight-medium cart-icon-count"><%= item_count %></div>
+  <span class="font-weight-medium cart-icon-count"><%= item_count %></span>
 <% end %>

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

@@ -0,0 +1,25 @@
+<% if Spree::Config.show_store_currency_selector && stores.size > 1 %>
+  <li class="change-store">
+    <div class="dropdown navbar-right-dropdown">
+      <button id="stores-button" type="button" data-toggle="dropdown" class="navbar-right-dropdown-toggle" aria-label="<%= Spree.t('nav_bar.change_country')%>">
+        <%= icon(name: 'global',
+                classes: 'd-none d-xl-inline-block',
+                width: 41,
+                height: 36)  %>
+        <%= icon(name: 'arrow-down',
+                classes: 'd-inline-block d-xl-none',
+                width: 15,
+                height: 15)  %>
+      </button>
+
+      <div id="stores_list" class="dropdown-menu dropdown-menu-right text-right">
+        <% stores.each do |store| %>
+          <div class="pl-3 d-flex justify-content-between align-items-center <%= 'active' if store.id == current_store.id %>">
+            <span class="flag-icon flag-icon-<%= store_country_iso(store) %>"></span>
+            <%= link_to "#{store.default_country&.name} (#{store_currency_symbol(store)})", "//#{store.url}", class: 'dropdown-item text-uppercase' %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </li>
+<% end %>

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

@@ -1,6 +1,6 @@
 <div id="spree-header">
   <header id="header" class="d-flex align-items-center header-spree border-bottom">
-    <div class="container position-relative">
+    <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',
@@ -20,7 +20,7 @@
       </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(Spree::Config[:logo], method: :get) %>
+          <%= logo(nil, {method: :get}) %>
         </figure>
       </div>
     </div>

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

@@ -6,9 +6,9 @@
           <figure class="logo mx-auto mx-xl-0 pt-xl-2 pb-xl-1">
             <%= logo %>
           </figure>
-          <% if current_store.meta_description %>
+          <% if current_store.description %>
             <div class="d-none d-xl-block pt-xl-2 footer-spree-info">
-              <%= current_store.meta_description %>
+              <%= current_store.description %>
             </div>
           <% end %>
         </div>
@@ -32,13 +32,17 @@
           </div>
           <div class="d-flex flex-column align-items-center align-items-xl-start pb-3 flex-grow-2 footer-spree-contact-note">
             <div>
-              <%= current_store.name %>,
-              2382 Locust Ave<br/>
-              Long Beach, CA 90806, USA
+              <strong><%= current_store.name %></strong>
+              <br/>
+              <% if current_store.address %>
+                <%= current_store.address.html_safe %>
+              <% end %>
             </div>
-            <div>Call us now: 760-673-8590</div>
-            <% if current_store.mail_from_address %>
-              <div><%= Spree.t(:email) %>: <%= current_store.mail_from_address %></div>
+            <% if current_store.contact_phone&.present? %>
+              <div><%= Spree.t(:call_us_now) %><%= current_store.contact_phone %></div>
+            <% end %>
+            <% if current_store.contact_email&.present? %>
+              <div><%= Spree.t(:email) %>: <%= current_store.contact_email %></div>
             <% end %>
           </div>
         </div>

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

@@ -1,7 +1,8 @@
 <title><%= title %></title>
 <meta name="viewport" content="width=device-width, initial-scale=1" />
-<%== meta_image_data_tag %>
+<%== og_meta_data_tags %>
 <%== meta_data_tags %>
+<%== meta_robots %>
 <%= canonical_tag(current_store.url) %>
 <%= favicon_link_tag 'favicon.ico' %>
 <%= stylesheet_link_tag 'spree/frontend/all', media: 'screen', 'data-turbolinks-track': 'reload' %>

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

@@ -1,5 +1,6 @@
 <% if try_spree_current_user %>
   <%= link_to Spree.t('nav_bar.my_account'), spree.account_path, class: 'dropdown-item' if spree.respond_to?(:account_path) %>
+  <%= link_to Spree.t('nav_bar.admin_panel'), spree.admin_orders_path, class: 'dropdown-item text-uppercase' if try_spree_current_user.has_spree_role?(:admin) %>
   <%= link_to Spree.t('nav_bar.log_out'), spree_logout_path, class: 'dropdown-item', method: :get if defined?(spree_logout_path) %>
 <% else %>
   <%= link_to Spree.t('nav_bar.log_in'), spree_login_path, class: 'dropdown-item' if defined?(spree_login_path) %>

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

@@ -1,5 +1,4 @@
 <% item_count = simple_current_order&.item_count || 0 %>
 <% cache [base_cache_key, 'cart-indicator', item_count] do %>
-  <%= render 'spree/shared/cart', class: 'd-none d-xl-inline-block cart-icon--xl', size: 36, item_count: item_count %>
-  <%= render 'spree/shared/cart', class: 'd-xl-none', size: 24, item_count: item_count %>
+  <%= render 'spree/shared/cart', class: 'd-inline-block cart-icon', size: 36, item_count: item_count %>
 <% end %>

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

@@ -4,12 +4,12 @@
     <div id="password-credentials" class="mb-4">
       <div class="form-group mb-4">
         <p class="form-group checkout-content-inner-field">
-          <%= f.email_field :email, class: 'spree-flat-input', placeholder: Spree.t(:email), autofocus: true %>
+          <%= f.email_field :email, class: 'spree-flat-input', placeholder: Spree.t(:email), value: params.dig(:spree_user, :email) %>
         </p>
       </div>
       <div class="form-group mb-4">
         <p class="form-group checkout-content-inner-field">
-          <%= f.password_field :password, class: 'spree-flat-input', placeholder: Spree.t(:password), autofocus: true %>
+          <%= f.password_field :password, class: 'spree-flat-input', placeholder: Spree.t(:password) %>
         </p>
       </div>
     </div>
@@ -17,7 +17,7 @@
     <% if Spree::Frontend::Config[:remember_me_enabled] %>
       <div class="spree-checkbox-container mt-4 mt-sm-5 mt-lg-4 spree-mb-medium">
         <div class="spree-checkbox">
-          <%= f.check_box :remember_me, tabindex: 3 %>
+          <%= f.check_box :remember_me %>
           <%= f.label :remember_me, '' %>
         </div>
 
@@ -25,7 +25,7 @@
       </div>
     <% end %>
 
-    <%= f.submit Spree.t(:log_in), class: 'btn btn-primary btn-block spree-btn mt-2', tabindex: 4 %>
+    <%= f.submit Spree.t(:log_in), class: 'btn btn-primary btn-block spree-btn mt-2' %>
   <% end %>
 
   <% if spree.respond_to?(:recover_password_path) %>

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

@@ -1,50 +1,56 @@
 <% 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="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">
-                  <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>
+                  <% if root[:items].present? %>
+                    <div class="category-links">
+                      <% if root[:subtitle].present? %>
+                        <div class="category-links-header text-uppercase">
+                          <%= root[:subtitle] %>
+                        </div>
                       <% 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] %>
+                      <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>
+                        <% 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>
-                      </div>
+                      <% end %>
                     <% end %>
                   <% end %>
-                <% end %>
+                </div>
               </div>
             </div>
-          </div>
-        <%end %>
-      </li>
-    <% end %>
-  </ul>
+          <%end %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
 <% end %>

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

@@ -0,0 +1,30 @@
+<% if stores.size > 1 %>
+  <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
+    <span class="w-75"><%= Spree.t('nav_bar.change_country')%></span>
+    <a class="w-25 text-right mobile-navigation-category-link" data-category="countries" href="#" aria-label="<%= Spree.t('nav_bar.change_country')%>">
+      <%= 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="countries">
+      <li class="text-center font-weight-bold mobile-navigation-sublist-header">
+        <%= Spree.t('nav_bar.change_country')%>
+      </li>
+      <% stores.each do |store| %>
+        <li class="d-flex justify-content-between align-items-center mobile-navigation-list-item">
+          <span class="flag-icon flag-icon-<%= store_country_iso(store) %>"></span>
+          <%= link_to "//#{store.url}", class: 'dropdown-item text-uppercase d-flex' do %>
+            <span><%= store.default_country&.name %></span>
+            <span class="text-right w-100"><%= store_currency_symbol(store) %></span>
+          <% end %>
+        </li>
+    <% end %>
+    </ul>
+  </li>
+<% end %>

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

@@ -1,36 +1,22 @@
 <% 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>
+  <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>
+      <figure class="logo header-spree-fluid-logo" data-hook>
+        <%= logo %>
+      </figure>
+      <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('nav_bar.close_menu') %>">
+          <%= icon(name: 'close',
+                  classes: 'd-inline',
+                  width: 26,
+                  height: 26) %>
+        </button>
       </div>
     </div>
 
@@ -38,20 +24,14 @@
       <% 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>
-
-          <ul class="list-unstyled position-absolute mobile-navigation-sublist" data-category="<%= root[:title].parameterize %>">
-            <% if root[:items].present? %>
+          <% 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')%>">
+              <%= 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>
@@ -60,14 +40,11 @@
                   <%= link_to item[:title], item[:url], class: 'w-75' %>
                 </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>
-            <% end %>
-          </ul>
+            </ul>
+          <% end %>
         </li>
       <% end %>
+      <%= render partial: 'spree/shared/mobile_change_store' %>
     </ul>
   </div>
 <% end %>