spree_frontend 4.0.8 → 4.1.0.rc1

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

@@ -0,0 +1,33 @@
+<div class="modal fade" id="picturesModal" tabindex="-1" role="dialog" >
+  <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">
+        <button class="modal-close" type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&#x2715;</span>
+        </button>
+        <div class="d-flex justify-content-center align-items-center product-details-images h-100">
+          <% if @product_images.size > 1 %>
+            <div class="d-none d-sm-block product-details-thumbnails">
+              <%= render 'spree/shared/carousel/thumbnails',
+                          images: @product_images,
+                          group_id: 'main-product-modal-carousel',
+                          id: 'productModalThumbnailsCarousel',
+                          trigger_id: 'productCarousel',
+                          per_page: 4
+              %>
+            </div>
+          <% end %>
+          <div class="product-details-single">
+            <%= render 'spree/shared/carousel/single',
+                        images: @product_images,
+                        group_id: 'main-product-modal-carousel',
+                        id: 'productModalCarousel',
+                        trigger_id: 'productCarousel',
+                        zoomed: true
+            %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,14 @@
+<div class="container mt-lg-5">
+  <div class="text-center pt-lg-5">
+    <%= icon(name: 'search-no-results',
+             classes: 'plp-not-found-image mb-3',
+             width: 83,
+             height: 75) %>
+    <h6 class="plp-not-found-header mb-3 pb-sm-3 mt-sm-3 pt-sm-3 mt-lg-5 pt-lg-5 pb-lg-0"><%= Spree.t('plp.no_results_found') %></h6>
+    <p class="plp-not-found-text">
+      <%= Spree.t('plp.not_found_text1', keywords: params[:keywords]) %>
+      <br class="d-lg-none">
+      <%= Spree.t('plp.not_found_text2') %>
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+<%= render 'spree/products/filter_and_sort_mobile_buttons' %>
+<%= render 'spree/products/sort_desktop', permitted_params: permitted_params %>
+<div class="container d-md-flex">
+  <%= render 'spree/products/filters_desktop', permitted_params: permitted_params %>
+  <div class="text-lg-center col-md-12 col-lg-9">
+    <h6 class="plp-not-found-header pt-md-3 mb-3"><%= Spree.t('plp.no_results') %></h6>
+    <p class="plp-not-found-text pt-md-4">
+      <%= Spree.t('plp.not_found_filters1') %>
+      <br class="d-inline d-md-none d-lg-inline">
+      <%= Spree.t('plp.not_found_filters2') %>
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,32 @@
+<div class="product-variants-variant" data-option-type-id="<%= option_type[:id] %>">
+  <span class="d-block mb-2 text-center text-md-left text-uppercase product-variants-variant-title">
+    <%= option_type[:presentation] %>
+  </span>
+
+  <div class="d-flex flex-wrap justify-content-center justify-content-md-start">
+    <ol class="d-flex flex-wrap product-variants-variant-values">
+      <% option_type[:option_values].each do |option_value| %>
+        <li>
+          <%= radio_button_tag "variant_option_value_id_#{option_type[:id]}",
+            option_value[:id],
+            option_value[:is_default] && index == 0,
+            class: "product-variants-variant-values-radio",
+            data: {
+              "option-type-index" => index,
+              "presentation" => option_value[:presentation],
+              "variant-id" => option_value[:variant_id]
+            }
+          %>
+
+          <%= 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>
+          <% end %>
+        </li>
+      <% end %>
+    </ol>
+  </div>
+</div>

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

@@ -1,7 +1,8 @@
 <% url = spree.product_path(product, taxon_id: taxon.try(:id)) %>
+<% price = product.price_in(current_currency).amount %>
 <div id="product_<%= product.id %>" class="d-flex w-100 col-12 col-sm-6 col-lg-4 col-xl-3 product-list-item mb-4" data-hook="products_list_item">
   <div class="card w-100">
-    <% cache(taxon.present? ? [I18n.locale, current_currency, taxon, product] : cache_key_for_product(product)) do %>
+    <% cache(taxon.present? ? [I18n.locale, current_currency, taxon&.id, product] : cache_key_for_product(product)) do %>
       <div class="card-body text-center product-body">
         <%= link_to url, class: 'd-block text-center' do %>
           <%= small_image(product, class: "d-block mx-auto") %>
@@ -9,11 +10,10 @@
         <% end %>
       </div>
       <div class="card-footer text-center">
-        <span>
-          <span class="price selling lead">
-            <%= display_price(product) %>
-          </span>
+        <span class="price selling lead" content="<%= price.nil? 0 : price.to_d %>">
+          <%= display_price(product) %>
         </span>
+        <span content="<%= current_currency %>"></span>
       </div>
     <% end %>
   </div>

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

@@ -2,21 +2,28 @@
 
 <% if promotions.any? %>
   <div id="promotions">
-    <h3><%= Spree.t(:promotions) %></h3>
+    <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle"><%= Spree.t(:promotions) %></h3>
     <% promotions.each do |promotion| %>
-    <div class="card mb-3 bg-light">
-      <div class="card-body p-1">
-        <h4><%= promotion.name %></h4>
-        <p><%= promotion.description %></p>
-        <% if promotion.products.any? %>
-          <ul>
-            <% promotion.products.each do |product| %>
-              <li><%= link_to product.name, product_path(product) %></li>
+      <div class="row">
+        <div class="col-12 col-md-7 col-lg-6 mb-3">
+          <div class="card">
+            <div class="card-body">
+              <h4><%= promotion.name %></h4>
+              <p><%= promotion.description %></p>
+              <% if promotion.products.any? %>
+                <span><%= Spree.t('pdp.products_included_in_promotion') %>:</span>
+              <% end %>
+            </div>
+            <% if promotion.products.any? %>
+              <div class="list-group list-group-flush">
+                <% promotion.products.each do |product| %>
+                  <%= link_to product.name, spree.product_path(product), class: 'list-group-item list-group-item-action' %>
+                <% end %>
+              </div>
             <% end %>
-          </ul>
-        <% end %>
+          </div>
+        </div>
       </div>
-    </div>  
     <% end %>
   </div>
 <% end %>

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

@@ -1,22 +1,11 @@
 <% unless @product_properties.blank? %>
-  <h3 class="product-section-title h4 mt-4">
-    <%= Spree.t('properties')%>
-  </h3>
-
-  <table id="product-properties" class="table table-striped" data-hook>
-    <tbody>
-      <% @product_properties.each do |product_property| %>
-        <% css_class = cycle('even', 'odd', name: "properties") %>
-        <tr class="<%= css_class %>">
-          <td>
-            <strong>
-              <%= product_property.property.presentation %>
-            </strong>
-          </td>
-          <td><%= product_property.value %></td>
-        </tr>
-      <% end %>
-      <% reset_cycle('properties') %>
-    </tbody>
-  </table>
+  <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>
+    <% end %>
+  </ul>
 <% end %>

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

@@ -0,0 +1,30 @@
+<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">
+    <%= 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',
+             width: 18,
+             height: 18) %>
+    <%= icon(name: 'arrow-right',
+             classes: 'spree-icon-arrow spree-icon-arrow-down ml-3 plp-sort-header-arrow--down',
+             width: 18,
+             height: 18) %>
+  </div>
+
+  <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] == 'default' || params[:sort_by].blank? %>">
+        <%= link_to Spree.t('plp.default'), url_for(permitted_params.merge(sort_by: 'default')) %>
+      </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')) %>
+      </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')) %>
+      </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')) %>
+      </li>
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,43 @@
+<div id="sort-by-overlay" class="plp-overlay" style="display: none;">
+  <div class="container">
+    <div class="plp-overlay-header">
+      <%= Spree.t('plp.sort_by') %>
+      <%= inline_svg_tag 'close.svg', id: 'sort-by-overlay-hide-button' %>
+    </div>
+  </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] == 'default' || params[:sort_by].blank? %>">
+      <a href="<%= url_for(permitted_params.merge(sort_by: 'default')) %>" >
+        <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')) %>" >
+        <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')) %>" >
+        <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')) %>" >
+        <div class="plp-empty-dot">
+          <div class="filled-dot"></div>
+        </div>
+        <%= Spree.t('plp.price_low_to_high') %>
+      </a>
+    </li>
+  </ul>
+</div>

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

@@ -1,3 +1,4 @@
+<!-- FIXME: Should be removed if not used? -->
 <% if @product.taxons.present? %>
   <h3 class="product-section-title"><%= Spree.t(:look_for_similar_items) %></h3>
   <ul class="list-group" id="similar_items_by_taxon" data-hook>

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

@@ -1,29 +1,45 @@
-<% if "spree/products" == params[:controller] && @taxon || @taxonomies.present? %>
-  <% content_for :sidebar do %>
-    <div data-hook="homepage_sidebar_navigation">
-      <% if "spree/products" == params[:controller] && @taxon %>
-        <%= render partial: 'spree/shared/filters' %>
-      <% else %>
-        <%= render partial: 'spree/shared/taxonomies' %>
-      <% end %>
-    </div>
-  <% end %>
-<% end %>
+<% permitted_params = params.permit(*filtering_params) %>
 
-<% if params[:keywords] %>
-  <div data-hook="search_results">
-    <% if @products.empty? %>
-      <h6 class="search-results-title"><%= Spree.t(:no_products_found) %></h6>
+<div data-hook="search_results">
+  <% if @products.empty? %>
+    <% if permitted_params[:keywords].present? && permitted_params.to_h.one? %>
+      <%= render 'spree/products/no_results' %>
     <% else %>
-      <%= render partial: 'spree/shared/products', locals: { products: @products, taxon: @taxon } %>
+      <%= render 'spree/products/no_results_with_filters', permitted_params: permitted_params %>
     <% end %>
-  </div>
-<% else %>
-  <div data-hook="homepage_products">
-    <% cache(cache_key_for_products) do %>
-      <%= render partial: 'spree/shared/products', locals: { products: @products, taxon: @taxon } %>
+  <% else %>
+    <% if params[:keywords] %>
+      <div class="container d-md-flex pt-md-5">
+        <div class="plp-results-text text-uppercase mx-md-auto py-md-5">
+          <%= "#{@products.total_count} #{Spree.t('plp.results_for')} '#{params[:keywords].upcase}'" %>
+        </div>
+      </div>
+    <% elsif not @taxon %>
+      <div id="no-taxon-banner">
+        <div class="container">
+          <%= lazy_image(
+            src: asset_path('homepage/products.jpg'),
+            alt: 'products-banner',
+            width: 1110,
+            height: 300,
+            class: 'w-100 d-none d-md-block'
+          ) %>
+        </div>
+      </div>
     <% end %>
-  </div>
-<% end %>
 
-<%= products_structured_data(@products) %>
+    <%= render 'spree/products/filter_and_sort_mobile_buttons' %>
+    <%= render 'spree/products/sort_desktop', permitted_params: permitted_params %>
+    <div class="container mb-3 d-md-flex">
+      <%= render 'spree/products/filters_desktop', permitted_params: permitted_params %>
+      <%= render 'spree/shared/products', products: @products %>
+    </div>
+  <% end %>
+</div>
+
+<%= render 'spree/products/filters_mobile', permitted_params: permitted_params %>
+<%= render 'spree/products/sort_mobile', permitted_params: permitted_params %>
+
+<% cache cache_key_for_products(@products, 'json-ld') do %>
+  <%= products_structured_data(@products) %>
+<% end %>

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

@@ -0,0 +1,8 @@
+<% if related_products.any? %>
+  <div id="related-products">
+    <div class="product-details-related">
+      <p class="font-weight-bold text-center text-uppercase product-details-carousel-text"><%= Spree.t('pdp.you_may_also_like') %></p>
+      <%= render 'spree/shared/carousel_4_products', id: 'related-products-carousel', products: @related_products %>
+    </div>
+  </div>
+<% end %>

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

@@ -1,50 +1,52 @@
 <% @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">
-    <div class="col-lg-4 col-md-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="card  " data-hook>
-            <div class="card-body text-center">
-              <%= product_image(@product) %>
-            </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-lg-8 col-md-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 mt-2"><%= @product.name %></h1>
+    <div id="no-product-available" class="no-product-available-dropdown">
+      <%= render partial: 'spree/shared/no_product_available' %>
+    </div>
 
-          <div data-hook="description">
-            <%= sanitize product_description(@product) %>
-          </div>
+    <%= render partial: 'gallery_modal' %>
+  </div>
+  <div id="related-products" />
 
-          <div id="cart-form" data-hook="cart_form">
-            <%= render partial: 'cart_form' %>
-          </div>
-        </div>
+  <%= products_structured_data([@product]) %>
 
-        <div id="taxon-crumbs" class="mt-4" data-hook="product_taxons">
-          <%= render partial: 'taxons' %>
-        </div>
-      </div>
-    </div>
-  </div>
+  <%= render 'spree/shared/product_added_modal' %>
 <% end %>
 
-<%= products_structured_data([@product]) %>
+<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

@@ -25,16 +25,4 @@
       <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">
+  <ol class="breadcrumb">
+    <li class="breadcrumb-item">
+      <span>
+        <%= link_to Spree.t('plp.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,99 @@
+<% cache [common_product_cache_keys, products&.maximum(:updated_at)&.to_i, id] 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| %>
+        <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 %>-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 %>-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 %>-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"
+              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">
+                  <%= 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 %>-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,11 @@
+<% item_count = simple_current_order&.item_count || 0 %>
+
+<%= link_to spree.cart_path,
+  class: "cart-icon #{'cart-icon--visible-count' if item_count > 0} #{local_assigns[:class]}",
+  'aria-label': Spree.t(:cart) do %>
+  <%= icon(name: 'bag',
+           width: size,
+           height: size) %>
+
+  <div class="font-weight-medium cart-icon-count"><%= item_count %></div>
+<% end %>

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

@@ -0,0 +1,19 @@
+<div id="spree-header">
+  <header id="header" class="d-flex align-items-center header-spree border-bottom">
+    <div class="container position-relative">
+      <div class="position-absolute checkout-header-link">
+        <%= icon(name: 'arrow-right',
+                classes: 'spree-icon-arrow spree-icon-arrow-left',
+                width: 7,
+                height: 14) %>
+        <%= link_to Spree.t('checkout_page.back_to_cart'), spree.cart_path, class: "d-none d-sm-inline text-uppercase", method: :get %>
+        <%= link_to Spree.t('back'), spree.cart_path, class: "d-sm-none text-uppercase", method: :get %>
+      </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">
+        <%= logo(Spree::Config[:logo], method: :get) %>
+        </figure>
+      </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 fill="none" fill-rule="evenodd">
+    <circle class="color-select-border <%= 'color-select-border--selected' if selected %>" 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>