spree_frontend 3.1.0 → 4.7.0

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

@@ -1,48 +1,51 @@
 <% @body_id = 'product-details' %>
 
+<div class="container">
+  <%= spree_breadcrumbs(@taxon, '', @product) %>
+</div>
+
 <% cache cache_key_for_product do %>
-  <div data-hook="product_show" class="row" itemscope itemtype="https://schema.org/Product">
-    <div class="col-md-4 col-sm-5" data-hook="product_left_part">
-      <div data-hook="product_left_part_wrap">
-        <div id="product-images" data-hook="product_images">
-          <div id="main-image" class="panel panel-default" data-hook>
-            <div class="panel-body text-center">
-              <%= render :partial => 'image' %>
-            </div>
-          </div>
-          <div id="thumbnails" data-hook>
-            <%= render :partial => 'thumbnails' %>
+  <div class="container pt-4 product-details">
+    <div class="row" data-hook="product_show">
+      <%= render partial: 'gallery' %>
+      <div class="col-12 col-md-5" data-hook="product_right_part">
+        <div id="product-description" data-hook="product_right_part_wrap">
+          <h1 class="mt-3 mt-md-0 text-center text-md-left product-details-title">
+            <%= @product.name %>
+          </h1>
+          <div id="cart-form" data-hook="cart_form">
+            <%= render 'cart_form', variant_change_identifier: 'productCarousel' %>
           </div>
         </div>
-
-        <div data-hook="product_properties">
-          <%= render :partial => 'properties' %>
-        </div>
-
-        <div data-hook="promotions">
-          <%= render :partial => 'promotions' %>
-        </div>
+      </div>
+    </div>
+    <div class="pb-4 pt-md-5 row" data-hook="product_description">
+      <div class="col-12 col-md-7 col-lg-6">
+        <%= render partial: 'description' %>
+      </div>
+      <div class="d-none d-lg-block col-lg-1"></div>
+      <div class="col-12 col-md-5" data-hook="product_properties">
+        <%= render partial: 'properties' %>
+      </div>
+      <div class="col-12" data-hook="promotions">
+        <%= render partial: 'promotions' %>
       </div>
     </div>
 
-    <div class="col-md-8 col-sm-7" data-hook="product_right_part">
-      <div data-hook="product_right_part_wrap">
-        <div id="product-description" data-hook="product_description">
-          <h1 class="product-title" itemprop="name"><%= @product.name %></h1>
+    <div id="no-product-available" class="no-product-available-dropdown">
+      <%= render partial: 'spree/shared/no_product_available' %>
+    </div>
 
-          <div class="well" itemprop="description" data-hook="description">
-            <%= product_description(@product) %>
-          </div>
+    <%= render partial: 'gallery_modal' %>
+  </div>
+  <div id="related-products"></div>
 
-          <div id="cart-form" data-hook="cart_form">
-            <%= render :partial => 'cart_form' %>
-          </div>
-        </div>
+  <%= products_structured_data([@product]) %>
 
-        <div id="taxon-crumbs" class=" five " data-hook="product_taxons">
-          <%= render :partial => 'taxons' %>
-        </div>
-      </div>
-    </div>
-  </div>
+  <%= render 'spree/shared/product_added_modal' %>
 <% end %>
+
+<div
+  data-related-products
+  data-related-products-id="<%= @product.slug %>"
+  data-related-products-enabled="<%= @product.respond_to?(:has_related_products?) %>" />

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

@@ -18,21 +18,11 @@
     </div>
     <div class="local">
       <span class="locality"><%= address.city %></span>
-      <span class="region"><%= address.state_text %></span>
+      <% if Spree::Config[:address_requires_state] %>
+        <span class="region"><%= address.state_text %></span>
+      <% end %>
       <span class="postal-code"><%= address.zipcode %></span>
       <div class="country-name"><%= address.country.try(:name) %></div>
     </div>
   </div>
-  <% unless address.phone.blank? %>
-    <div class="tel">
-      <span class="type"><%= Spree.t(:phone) %></span>
-      <%= address.phone %>
-    </div>
-  <% end %>
-  <% unless address.alternative_phone.blank? %>
-    <div class="alternative-phone tel">
-      <span class="type"><%= Spree.t(:alternative_phone) %></span>
-      <%= address.alternative_phone %>
-    </div>
-  <% end %>
 </div>

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

@@ -0,0 +1,23 @@
+<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(:home), spree.root_path %>
+      </span>
+    </li>
+    <% if @taxon %>
+      <% @taxon.ancestors.where.not(parent_id: nil).each do |ancestor| %>
+        <li class="breadcrumb-item">
+          <%= ancestor.name %>
+        </li>
+      <% end %>
+      <li class="breadcrumb-item">
+        <%= @taxon.name %>
+      </li>
+    <% else %>
+      <li class="breadcrumb-item">
+        <%= current_page_name %>
+      </li>
+    <% end %>
+  </ol>
+</nav>

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

@@ -0,0 +1,93 @@
+<% 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 %>">
+          <div class="container">
+            <div class="row carousel-items-container">
+              <% sliced_items.each_with_index do |item, idx| %>
+                <div class="col-6">
+                  <%= render 'spree/shared/product', product: item, image_class: 'w-100' %>
+                </div>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+
+    </div>
+    <a
+      class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--previous"
+      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">
+        <%= icon(name: 'arrow-right',
+                classes: 'spree-icon-arrow spree-icon-arrow-left',
+                width: 20,
+                height: 20) %>
+      </span>
+      <span class="sr-only"><%= Spree.t(:previous) %></span>
+    </a>
+
+    <a
+      class="d-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--next"
+      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">
+        <%= icon(name: 'arrow-right',
+                classes: 'spree-icon-arrow spree-icon-arrow-right',
+                width: 20,
+                height: 20) %>
+      </span>
+      <span class="sr-only"><%= Spree.t(:next) %></span>
+    </a>
+  </div>
+
+  <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.parameterize %>-desktop"
+              role="button"
+              data-slide="prev">
+              <span class="d-flex justify-content-center align-items-center carousel-icon-control-rounded" aria-hidden="true">
+                <%= icon(name: 'arrow-right',
+                        classes: 'spree-icon-arrow spree-icon-arrow-left',
+                        width: 20,
+                        height: 20) %>
+              </span>
+              <span class="sr-only"><%= Spree.t(:previous) %></span>
+            </a>
+
+            <div class="row carousel-items-container">
+              <% sliced_items.each do |item| %>
+                <div class="col-3 carouselItem">
+                  <%= render 'spree/shared/product', product: item, image_class: 'w-100' %>
+                </div>
+              <% end %>
+            </div>
+
+            <a
+              class="d-md-flex position-absolute justify-content-center align-items-center carousel-icon-control carousel-icon-control--next"
+              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">
+                <%= icon(name: 'arrow-right',
+                        classes: 'spree-icon-arrow spree-icon-arrow-right',
+                        width: 20,
+                        height: 20) %>
+              </span>
+              <span class="sr-only"><%= Spree.t(:next) %></span>
+            </a>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,9 @@
+<%= link_to spree.cart_path,
+  class: "cart-icon cart-icon--visible-count #{local_assigns[:class]}",
+  'aria-label': Spree.t(:cart) do %>
+  <%= icon(name: 'cart',
+           width: size,
+           height: size) %>
+
+  <span class="font-weight-medium cart-icon-count"><%= item_count %></span>
+<% end %>

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

@@ -0,0 +1,29 @@
+<div id="spree-header">
+  <header id="header" class="d-flex align-items-center header-spree border-bottom">
+    <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>
+
+      </div>
+    </div>
+  </header>
+</div>

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

@@ -0,0 +1,9 @@
+<svg class="color-select" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
+  <g class="color-select-border" fill="none" fill-rule="evenodd">
+    <circle class="<%= 'color-select-border--selected' if selected %> plp-overlay-color-item" cx="16" cy="16" r="15" stroke-width="2" />
+    <g transform="translate(2 2)">
+      <circle cx="14" cy="14" fill="<%= color %>" fill-rule="evenodd" r="12" />
+      <circle cx="14" cy="14" r="13" stroke="#fff" stroke-width="2" />
+    </g>
+  </g>
+</svg>

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

@@ -0,0 +1,9 @@
+<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 <%= 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>
+</div>

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

@@ -0,0 +1,13 @@
+<% if defined?(should_render_currency_dropdown?) && should_render_currency_dropdown? %>
+  <%= form_tag spree.set_currency_path, method: :get, class: 'px-4 py-3 w-100 currency-select' do %>
+    <div class="form-group">
+      <label for="switch_to_currency" class="dropdown-header text-center">
+        <%= Spree.t(:choose_currency) %>
+      </label>
+      <%= select_tag(:switch_to_currency,
+        options_for_select(supported_currency_options, current_currency),
+        class: 'custom-select w-100') %>
+      <noscript><%= submit_tag %></noscript>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,25 @@
+<div class="mx-auto delete-address-popup">
+  <div class="d-flex delete-address-popup-icon js-delete-address-popup-close-button">
+    <%= inline_svg_tag "close.svg", class: "w-100 h-100" %>
+  </div>
+
+  <p class="delete-address-popup-header">
+    <%= Spree.t("address_action_popup.delete_title") %>
+  </p>
+
+  <p class='delete-address-popup-text'>
+    <%= Spree.t("address_action_popup.delete_text").html_safe %>
+  </p>
+
+  <div class="d-flex delete-address-popup-buttons">
+    <div class="btn bg-light-background text-primary border-2 border-primary text-uppercase font-weight-bold delete-address-popup-button js-delete-address-popup-close-button"><%= Spree.t(:cancel) %></div>
+    <a
+      id="delete-address-popup-confirm"
+      class="btn btn-primary text-uppercase font-weight-bold delete-address-popup-button"
+      data-method="delete"
+      rel="nofollow"
+      href="#">
+      <%= Spree.t("address_action_popup.delete_button") %>
+    </a>
+  </div>
+</div>

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

@@ -1,12 +1,10 @@
 <% if target && target.errors.any? %>
-  <div id="errorExplanation" class="alert alert-danger" data-hook>
-    <h3><%= Spree.t(:errors_prohibited_this_record_from_being_saved, :count => target.errors.count) %>:</h3>
-    <p><%= Spree.t(:there_were_problems_with_the_following_fields) %>:</p>
-     <ul>
+  <div id="errorExplanation" class="alert alert-danger d-flex justify-content-center mb-0" data-hook>
+     <ul class="mb-0 pl-0" style="list-style-type: none;">
        <% target.errors.full_messages.each do |msg| %>
          <li><%= msg %></li>
        <% end %>
      </ul>
-     <br/>
+     <br>
   </div>
 <% end %>

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

@@ -0,0 +1,9 @@
+<% if flash.any? %>
+  <div id="flash">
+    <% flash.each do |key, value| %>
+      <p>
+        <%= value %>
+      </p>
+    <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,85 @@
+<% 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">
+          <figure class="logo mx-auto mx-xl-0 pt-xl-2 pb-xl-1">
+            <%= logo %>
+          </figure>
+          <% if current_store.description %>
+            <div class="d-none d-xl-block pt-xl-2 footer-spree-info">
+              <%= current_store.description %>
+            </div>
+          <% end %>
+        </div>
+        <div class="d-block flex-nowrap py-2 order-xl-last col-xl-3 offset-xl-1">
+          <% unless current_store.facebook.blank? && current_store.twitter.blank? && current_store.instagram.blank? %>
+            <div class="d-none d-xl-block pt-4 pb-3 pl-2 footer-spree-label">
+              <%= Spree.t(:follow_us) %>
+            </div>
+          <% end %>
+          <div class="d-flex d-xl-block justify-content-center mx-auto">
+            <div class="d-flex">
+              <%= spree_social_link('facebook') %>
+              <%= spree_social_link('twitter') %>
+              <%= spree_social_link('instagram') %>
+            </div>
+          </div>
+        </div>
+        <div class="py-xl-2 col-xl-3 offset-xl-1">
+          <div class="d-none d-xl-block pt-4 pb-3 footer-spree-label">
+            <%= Spree.t(:contact_us) %>
+          </div>
+          <div class="d-flex flex-column align-items-center align-items-xl-start pb-3 flex-grow-2 footer-spree-contact-note">
+            <div>
+              <strong><%= current_store.name %></strong>
+              <br>
+              <% if current_store.address %>
+                <%= current_store.address.html_safe %>
+              <% end %>
+            </div>
+            <% if current_store.contact_phone&.present? %>
+              <div><%= Spree.t(:call_us_now) %><%= current_store.contact_phone %></div>
+            <% end %>
+            <% if current_store.customer_support_email&.present? %>
+              <div><%= Spree.t(:email) %>: <%= current_store.customer_support_email %></div>
+            <% end %>
+          </div>
+        </div>
+      </div>
+      <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">
+                <% 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 mb-5">
+            <div class="footer-spree-label">
+              <%= Spree.t('nav_bar.my_account') %>
+            </div>
+            <div class="pt-2">
+              <%= link_to Spree.t(:my_orders).upcase, spree.account_path(anchor: "account-my-orders") %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <%= render 'spree/shared/copyright' %>
+  </footer>
+<% end %>

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

@@ -1,14 +1,14 @@
-<meta charset="utf-8">
 <title><%= title %></title>
-<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
-<meta content="width=device-width, initial-scale=1.0, maximum-scale=1" name="viewport">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<%== 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' %>
+<%= favicon_link_tag(spree_favicon_path) %>
+<%= stylesheet_link_tag 'spree/frontend/all', media: 'screen', data: { turbo_track: 'reload' } %>
 <%= csrf_meta_tags %>
-<%= javascript_include_tag 'spree/frontend/all' %>
-<!--[if lt IE 9]>
-  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6/html5shiv.min.js"></script>
-<![endif]-->
+<%= render 'spree/shared/paths' %>
+<%= render 'spree/shared/locale_and_currency' %>
+<%= javascript_include_tag "application", defer: true, data: { turbo_track: 'reload' } %>
+<%= javascript_include_tag 'spree/frontend/all', defer: true, data: { turbo_track: 'reload' } %>
 <%= yield :head %>

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

@@ -1,15 +1,28 @@
-<div id="spree-header">
-  <header id="header" data-hook>
-    <div class="container">
-      <div class="row">
-        <figure id="logo" class="col-md-4 col-sm-3" data-hook>
-          <%= logo %>
-        </figure>
-        <%= render :partial => 'spree/shared/nav_bar' %>
+<%# leaving #spree-header div for legacy support  %>
+<% 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 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',
+                      width: 18.5,
+                      height: 16) %>
+            </button>
+          </div>
+          <figure class="logo flex-grow-0 flex-xl-grow-1 order-xl-0 header-spree-fluid-logo m-0">
+            <%= logo %>
+          </figure>
+          <div id="main-nav-bar" class="flex-grow-0 d-none d-xl-block h-100 header-spree-fluid-primary-navigation">
+            <%= render partial: 'spree/shared/main_nav_bar' %>
+          </div>
+          <div id="top-nav-bar" class="flex-grow-1 header-spree-fluid-secondary-navigation">
+            <%= render partial: 'spree/shared/nav_bar' %>
+          </div>
+          <%= render partial: 'spree/shared/mobile_navigation' %>
+        </div>
       </div>
-    </div>
-  </header>
-  <div class="container">
-    <%= render :partial => 'spree/shared/main_nav_bar' if store_menu? %>
+    </header>
   </div>
-</div>
+<% end %>

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

@@ -0,0 +1,31 @@
+<% if (defined?(should_render_store_chooser?) && should_render_store_chooser?) || (defined?(should_render_internationalization_dropdown?) && should_render_internationalization_dropdown?) %>
+  <li class="d-none d-xl-block internationalization-options">
+    <div class="dropdown navbar-right-dropdown">
+      <button id="internationalization-button-desktop" type="button" data-toggle="dropdown" class="navbar-right-dropdown-toggle" aria-label="<%= Spree.t(:internationalization) %>">
+        <%= 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="internationalization-options-desktop" class="dropdown-menu dropdown-menu-right text-left">
+        <% if (defined?(should_render_store_chooser?) && should_render_store_chooser?) %>
+          <% stores.each do |store| %>
+            <div class="pl-3 d-flex justify-content-between align-items-center stores-list">
+              <%= country_flag_icon(store_country_iso(store)) %>
+              <%= store_link(store, class: "dropdown-item text-uppercase #{'font-weight-bold' if current_store == store}") %>
+            </div>
+          <% end %>
+        <% else %>
+          <%= render 'spree/shared/locale_dropdown' %>
+          <div class="dropdown-divider"></div>
+          <%= render 'spree/shared/currency_dropdown' %>
+        <% end %>
+      </div>
+    </div>
+  </li>
+<% end %>

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

@@ -0,0 +1,34 @@
+<div class="checkout-confirm-order-details-line-items-line-item w-100 d-table-row">
+  <div class="checkout-confirm-order-details-line-items-line-item-name d-table-cell align-middle py-3 py-sm-4">
+    <div class="d-flex align-items-lg-center">
+      <%= link_to product_image(line_item.variant), spree.product_path(line_item.product) %>
+      <div class="d-flex flex-column mt-2 mt-lg-0">
+        <div><%= link_to line_item.name, spree.product_path(line_item.product) %></div>
+        <ul class="checkout-confirm-order-details-line-items-line-item-name-options text-uppercase list-unstyled mb-0">
+          <% line_item.variant.option_values.sort { |ov| ov.option_type.position }.each do |ov| %>
+          <li>
+            <% # TODO: rework option values so options_text method can be used here %>
+            <%= "#{ov.option_type.presentation}: #{ov.presentation}" %>
+          </li>
+        <% end %>
+        </ul>
+        <div class="d-lg-none">
+          <div class="font-weight-bold"><%= line_item.single_money.to_html %></div>
+        </div>
+        <div class="d-lg-none">
+          <span><%= Spree.t(:quantity) %>:</span>
+          <span class="font-weight-bold"><%= line_item.quantity %></span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="checkout-confirm-order-details-line-items-line-item-price d-none d-lg-table-cell align-middle py-4">
+    <div><%= line_item.single_money.to_html %></div>
+  </div>
+  <div class="checkout-confirm-order-details-line-items-line-item-quantity d-none d-lg-table-cell align-middle py-4">
+    <span class="checkout-confirm-order-details-line-items-line-item-quantity-val d-lg-block"><%= line_item.quantity %></span>
+  </div>
+  <div class="checkout-confirm-order-details-line-items-line-item-total d-none d-lg-table-cell align-middle py-4">
+    <div><%= line_item.display_total.to_s %></div>
+  </div>
+</div>

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

@@ -0,0 +1,10 @@
+<% if try_spree_current_user %>
+  <%= link_to Spree.t(:my_account).upcase, spree.account_path, class: 'dropdown-item' if spree.respond_to?(:account_path) %>
+  <% if spree.respond_to?(:admin_orders_path) %>
+    <%= link_to Spree.t('nav_bar.admin_panel'), spree.admin_orders_path(locale: nil), class: 'dropdown-item text-uppercase' if try_spree_current_user.has_spree_role?(:admin) %>
+  <% end %>
+  <%= link_to Spree.t(:logout).upcase, spree_logout_path, class: 'dropdown-item', method: :get if defined?(spree_logout_path) %>
+<% else %>
+  <%= link_to Spree.t(:login).upcase, spree_login_path, class: 'dropdown-item' if defined?(spree_login_path) %>
+  <%= link_to Spree.t(:sign_up).upcase, spree_signup_path, class: 'dropdown-item' if defined?(spree_signup_path) %>
+<% end %>

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

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