spree_frontend 4.0.8 → 4.1.0.rc1

data/app/views/spree/orders/edit.html.erb

@@ -1,64 +1,74 @@
 <% @body_id = 'cart' %>
 
-<div data-hook="cart_container" class="col-12">
-  <h1><%= Spree.t(:shopping_cart) %></h1>
+<div data-hook="cart_container" class="container shopping-cart">
+  <%= render 'spree/shared/breadcrumbs', current_page_name: Spree.t('cart_page.title') %>
+
+  <h1 class="text-uppercase shopping-cart-header"><%= Spree.t('cart_page.header') %></h1>
 
   <% if @order.line_items.empty? %>
-    <div data-hook="empty_cart">
-      <div class="alert alert-info"><%= Spree.t(:your_cart_is_empty) %></div>
-      <p>
-        <%= link_to Spree.t(:continue_shopping), products_path, class: 'btn btn-outline-secondary' %>
-      </p>
+    <div data-hook="empty_cart" class="shopping-cart-empty">
+      <div class="d-flex flex-column justify-content-between h-100">
+        <div class="d-flex flex-column align-items-center">
+          <%= icon(name: 'empty-cart',
+                   classes: 'shopping-cart-empty-image',
+                   width: 83,
+                   height: 83)  %>
+
+          <p class="text-center shopping-cart-empty-info"><%= Spree.t('cart_page.empty_info').html_safe %></p>
+        </div>
+        <%= link_to Spree.t(:continue_shopping), spree.products_path, class: 'btn btn-primary text-uppercase font-weight-bold shopping-cart-empty-continue-link' %>
+      </div>
     </div>
   <% else %>
     <div data-hook="outside_cart_form">
-      <%= form_for @order, url: update_cart_path, html: { id: 'update-cart' } do |order_form| %>
+      <%= form_for @order, url: spree.update_cart_path, html: { id: 'update-cart' } do |order_form| %>
         <div data-hook="inside_cart_form">
-
-          <div data-hook="cart_items" class="table-responsive">
+          <div data-hook="cart_items" class="shopping-cart-table">
             <%= render partial: 'form', locals: { order_form: order_form } %>
           </div>
 
-          <div class="row">
+          <div class="d-lg-flex flex-wrap justify-content-between">
+            <div class="text-uppercase d-none d-lg-block mt-3">
+              <%= link_to Spree.t(:continue_shopping), spree.products_path, class: 'shopping-cart-buttons-continue' %>
+            </div>
+
+            <div class="text-right shopping-cart-total d-none d-lg-block">
+              <div class="text-uppercase d-lg-inline-block shopping-cart-total-text"><%= Spree.t(:total) %></div>
+              <div class="d-lg-inline-block shopping-cart-total-amount"><%= order_form.object.display_total %></div>
+            </div>
+
             <% if Spree::Frontend::Config[:coupon_codes_enabled] %>
-              <div class='col-md-6 form-inline' data-hook='coupon_code'>
-                <%= order_form.label :coupon_code, class: 'mr-2' %>
-                <div class="input-group">
-                  <%= order_form.text_field :coupon_code, size: '30', class: 'form-control' %>
-                  <div class="input-group-append">
-                    <%= button_tag Spree.t(:coupon_code_apply), class: 'btn btn-outline-secondary' %>
-                  </div>
-                </div>
-              </div>
+              <%= render 'coupon_code',
+                promotion: @order.valid_coupon_promotions.first,
+                order_form: order_form,
+                classes: ''
+              %>
             <% end %>
 
-            <div class="links col-md-6 d-flex justify-content-end" data-hook="cart_buttons">
-              <div class="form-group">
-                <%= button_tag class: 'btn btn-primary', id: 'update-button' do %>
-                  <%= Spree.t(:update) %>
-                <% end %>
-                <%= button_tag class: 'btn btn-lg btn-success', id: 'checkout-link', name: 'checkout' do %>
-                  <%= Spree.t(:checkout) %>
-                <% end %>
-              </div>
+            <div class="text-right shopping-cart-total d-lg-none">
+              <div class="text-uppercase shopping-cart-total-text"><%= Spree.t(:total) %></div>
+              <div class="shopping-cart-total-amount"><%= order_form.object.display_total %></div>
+            </div>
+
+            <div class="d-flex flex-column text-center shopping-cart-buttons" data-hook="cart_buttons">
+              <%= link_to Spree.t('cart_page.checkout'), spree.checkout_path, class: 'btn btn-primary text-uppercase font-weight-bold cart-checkout-btn shopping-cart-buttons-checkout', id: 'checkout-link', method: :get %>
+              <span class="text-uppercase shopping-cart-buttons-or d-lg-none"><%= Spree.t(:or) %></span>
+              <%= link_to Spree.t(:continue_shopping), spree.products_path, class: 'btn btn-outline-primary text-uppercase font-weight-bold d-lg-none shopping-cart-buttons-continue' %>
             </div>
           </div>
         </div>
       <% end %>
     </div>
-
-    <div id="empty-cart" class="mt-4" data-hook>
-      <%= form_tag empty_cart_path, method: :put do %>
-        <p id="clear_cart_link" data-hook>
-          <%= submit_tag Spree.t(:empty_cart), class: 'btn btn-outline-secondary' %>
-          <%= Spree.t(:or) %>
-          <%= link_to Spree.t(:continue_shopping), products_path, class: 'continue' %>
-        </p>
-      <% end %>
-    </div>
   <% end %>
 </div>
 
 <script>
-  Spree.current_order_token = "<%= @order.token %>"
+  window.addEventListener('DOMContentLoaded', function() {
+    Spree.current_order_token = "<%= @order.token %>"
+    <% if flash.any? %>
+      document.getElementById('overlay').classList.add('shown');
+      document.getElementById('no-product-available').classList.add('shown');
+      window.scrollTo(0, 0);
+    <% end %>
+  })
 </script>

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

@@ -1,22 +1,88 @@
-<fieldset id="order_summary" data-hook>
-  <h1><%= accurate_title %></h1>
-
+<div class='order-show container d-flex flex-column align-items-center flex-lg-wrap flex-lg-row justify-content-center' id="order_summary" data-hook>
   <% if order_just_completed?(@order) %>
-    <p><strong><%= Spree.t(:thank_you_for_your_order) %></strong></p>
+    <%= icon(name: 'check-mark-circle',
+             classes: 'd-block d-lg-none mx-auto order-show-check-mark',
+             width: 56,
+             height: 56) %>
+    <%= icon(name: 'check-mark-circle',
+             classes: 'd-none d-lg-block mx-auto order-show-check-mark',
+             width: 102,
+             height: 102) %>
+    <h5 class="w-100 text-center"><%= Spree.t(:order_success) %></h5>
+    <p class="order-show-explain w-100 text-center"><%= Spree.t(:order_success_explain) %></p>
   <% end %>
 
-  <div id="order" data-hook>
-    <%= render partial: 'spree/shared/order_details', locals: { order: @order } %>
-
-    <br class="clear" />
-
-    <p data-hook="links">
-      <%= link_to Spree.t(:back_to_store), spree.root_path, class: "button" %>
-      <% unless order_just_completed?(@order) %>
-        <% if try_spree_current_user && respond_to?(:account_path) %>
-          <%= link_to Spree.t(:my_account), account_path, class: "button" %>
+  <p class="order-show-number text-uppercase w-100 text-center">
+    <%= accurate_title %> / <%= @order.completed_at.to_date.to_s(:long) %>
+  </p>
+  <dl class="w-100 d-lg-flex justify-content-lg-between">
+    <div>
+      <dt class="text-uppercase text-center text-lg-left"><%= Spree.t(:shipping_address) %></dt>
+      <dd class="text-center text-lg-left">
+        <%= render 'spree/shared/address', address: @order.ship_address %>
+      </dd>
+    </div>
+    <div>
+      <dt class="text-uppercase text-center text-lg-left"><%= Spree.t(:billing_address) %></dt>
+      <dd class="text-center text-lg-left">
+        <%= render 'spree/shared/address', address: @order.bill_address %>
+      </dd>
+    </div>
+    <div>
+      <dt class="text-uppercase text-center text-lg-left"><%= Spree.t(:shipping) %></dt>
+      <dd class="text-center text-lg-left"><%= @order.shipments.first.shipping_method.name %></dd>
+    </div>
+    <div>
+      <dt class="text-uppercase text-center text-lg-left"><%= Spree.t(:payment) %></dt>
+      <dd class="text-center text-lg-left">
+        <%= render collection: @order.payments.valid, partial: 'spree/shared/payment' %>
+      </dd>
+    </div>
+  </dl>
+  <hr class="w-100 mt-0 mb-4 d-sm-none" />
+  <div class="order-show-line-items d-flex flex-column align-items-center">
+    <% @order.line_items.each do |item| %>
+      <div class="order-show-line-items-line-item d-flex w-100">
+        <% if item.variant.images.length == 0 %>
+          <%= link_to product_image(item.product), item.product %>
+        <% else %>
+          <%= link_to image_tag(main_app.url_for(item.variant.images.first.url(:product))), item.product %>
         <% end %>
-      <% end %>
-    </p>
+        <div class="order-show-line-items-line-item-desc w-100">
+          <span class="order-show-line-items-line-item-desc-name">
+            <%= item.name %>
+          </span>
+          <span class="order-show-line-items-line-item-desc-subtitle text-break text-uppercase">
+            <ul class="list-unstyled mb-0">
+              <% item.variant.option_values.sort { |ov| ov.option_type.position }.each do |ov| %>
+                <li><%= "#{ov.option_type.presentation}: #{ov.name.titleize}" %></li>
+              <% end %>
+            </ul>
+          </span>
+          <div class="order-show-line-items-line-item-desc-price">
+            <div class="order-show-line-items-line-item-desc-price-attr-name d-inline d-lg-block">
+              <span><%= Spree.t(:price) %></span>
+            </div>
+            <span class="font-weight-bold"><%= item.single_money.to_html %></span>
+          </div>
+          <div class="order-show-line-items-line-item-desc-quantity">
+            <div class="order-show-line-items-line-item-desc-quantity-attr-name d-inline d-lg-block">
+              <span><%= Spree.t(:quantity) %></span>
+            </div>
+            <span class="order-show-line-items-line-item-desc-quantity-val d-lg-block"><%= item.quantity %></span>
+          </div>
+          <div class="order-show-line-items-line-item-desc-total">
+            <div class="order-show-line-items-line-item-desc-total-attr-name d-inline d-lg-block">
+              <span><%= Spree.t(:total) %></span>
+            </div>
+            <span class="font-weight-bold d-lg-block"><%= item.display_total.to_s %></span>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  </div>
+  <hr class="w-100 mt-4 mb-0 d-sm-none" />
+  <div id="checkout-summary" class="w-100" data-hook="checkout_summary_box">
+    <%= render partial: 'spree/checkout/summary', locals: { order: @order } %>
   </div>
-</fieldset>
+</div>

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

@@ -1,84 +1,80 @@
-<%= form_for :order, html: { id: 'add-to-cart-form' } do |f| %>
-  <div class="row" id="inside-product-cart-form" data-hook="inside_product_cart_form" itemprop="offers" itemscope itemtype="https://schema.org/Offer">
-    <% if @product.variants_and_option_values(current_currency).any? %>
-      <div id="product-variants" class="col-lg-6 mt-4">
-        <h3 class="product-section-title"><%= Spree.t(:variants) %></h3>
-        <ul class="list-group">
-          <% @product.variants_and_option_values(current_currency).each_with_index do |variant, index| %>
-            <li class="list-group-item <%= "active" if index == 0 %>">
-              <div class="form-check">
-                <%= radio_button_tag "variant_id", variant.id, index == 0,
-                    'data-price' => variant.price_in(current_currency).money,
-                    'data-in-stock' => variant.can_supply?,
-                    'data-backordered' => variant.backordered?,
-                    class: 'form-check-input'
-                %>
-                <%= label_tag "variant_id_#{ variant.id }", class: "form-check-label" do %>
-                  <span class="variant-description">
-                    <%= variant.options_text %>
-                  </span>
-                  <% if variant_price variant %>
-                    <span class="price diff"><%= variant_price variant %></span>
-                  <% end %>
-                  <% unless variant.can_supply? %>
-                    <span class="out-of-stock"><%= Spree.t(:out_of_stock) %></span>
-                  <% end %>
-                <% end %>
-              </div>
-            </li>
-          <% end%>
-        </ul>
+<template class="availability-template availability-template-not-available-in-currency">
+  <%= render 'cart_form_availability_templates', type: 'not-available-in-currency' %>
+</template>
+
+<template class="availability-template availability-template-in-stock">
+  <%= render 'cart_form_availability_templates', type: 'in-stock' %>
+</template>
+
+<template class="availability-template availability-template-backorderable">
+  <%= render 'cart_form_availability_templates', type: 'backorderable' %>
+</template>
+
+<template class="availability-template availability-template-out-of-stock">
+  <%= render 'cart_form_availability_templates', type: 'out-of-stock' %>
+</template>
+
+<% is_product_available_in_currency = product_available_in_currency?(@product) %>
+<% default_variant = default_variant(@variants) %>
+
+<%= form_for :order, html: {
+    id: 'add-to-cart-form',
+    class: 'add-to-cart-form',
+    'data-product-summary': @product_summary.to_json,
+    'data-variants': product_variants_matrix(is_product_available_in_currency),
+    'data-variant-change-trigger-identifier': variant_change_identifier
+  } do |f| %>
+  <div id="inside-product-cart-form" data-hook="inside_product_cart_form">
+    <% if is_product_available_in_currency %>
+      <div id="product-price" class="mb-2 text-center text-md-left add-to-cart-form-price" data-hook="product_price">
+        <span class="price selling" content="<%= @product.price_in(current_currency).amount.to_d %>">
+          <%= display_price(default_variant) %>
+        </span>
+        <span content="<%= current_currency %>"></span>
       </div>
-    <% else %>
-      <%= hidden_field_tag "variant_id", @product.master.id %>
     <% end %>
 
-    <% if @product.price_in(current_currency) && !@product.price.nil? %>
-      <div data-hook="product_price" class="col-lg-5 mt-4">
-        <div id="product-price">
-          <h3 class="product-section-title"><%= Spree.t(:price) %></h3>
-          <div>
-            <span class="lead price selling" itemprop="price" content="<%= @product.price_in(current_currency).amount.to_d %>">
-              <%= display_price(@product) %>
-            </span>
-            <span itemprop="priceCurrency" content="<%= current_currency %>"></span>
-          </div>
+    <div class="text-center text-md-left add-to-cart-form-general-availability text-uppercase">
+      <%= Spree.t(:availability) %>:
+      <% if !is_product_available_in_currency %>
+        <%= render 'cart_form_availability_templates', type: 'not-available-in-currency' %>
+      <% elsif default_variant.in_stock? %>
+        <%= render 'cart_form_availability_templates', type: 'in-stock' %>
+      <% elsif default_variant.backorderable? %>
+        <%= render 'cart_form_availability_templates', type: 'backorderable' %>
+      <% else %>
+        <%= render 'cart_form_availability_templates', type: 'out-of-stock' %>
+      <% end %>
+    </div>
 
-          <% if @product.master.can_supply? %>
-            <link itemprop="availability" href="https://schema.org/InStock" />
-          <% elsif @product.variants.empty? %>
-            <span class="out-of-stock d-block mt-2">
-              <%= Spree.t(:out_of_stock) %>
-            </span>
-          <% end %>
-          <% if @product.backordered? %>
-            <div class="alert alert-warning" id="cart-backordered-info">
-              <%= Spree.t(:backordered_info) %>
-            </div>
-          <% end %>
+    <% if @product.variants_and_option_values(current_currency).any? %>
+      <hr>
+      <ul id="product-variants" class="product-variants">
+        <% used_variants_options(@variants).each_with_index do |option_type, index| %>
+          <li>
+            <% if option_type[:name] == "color" %>
+              <%= render "color_option_type", option_type: option_type, index: index %>
+            <% else %>
+              <%= render "option_type", option_type: option_type, index: index %>
+            <% end %>
+          </li>
+        <% end %>
+      </ul>
+    <% end %>
+
+    <% if is_product_available_in_currency && @product.can_supply? %>
+      <%= hidden_field_tag "variant_id", default_variant.id %>
+
+      <hr>
+      <div>
+        <div class="mb-5 mt-4">
+          <%= render 'spree/shared/quantity_select', input_name: :quantity %>
         </div>
 
-        <% if @product.can_supply? %>
-          <div class="add-to-cart mt-2">
-            <div class="input-group">
-              <%= number_field_tag :quantity, 1, class: 'title form-control', min: 1 %>
-              <div class="input-group-append">
-                <%= button_tag class: 'btn btn-success', id: 'add-to-cart-button', type: :submit, disabled: true do %>
-                  <%= Spree.t(:add_to_cart) %>
-                <% end %>
-              </div>
-            </div>
-          </div>
+        <%= button_tag class: 'btn btn-primary w-100 text-uppercase font-weight-bold add-to-cart-button', id: 'add-to-cart-button', type: :submit, disabled: true do %>
+          <%= Spree.t(:add_to_cart) %>
         <% end %>
       </div>
-    <% else %>
-      <div id="product-price">
-        <div>
-          <span class="price selling" itemprop="price">
-            <%= Spree.t('product_not_available_in_this_currency') %>
-          </span>
-        </div>
-      </div>
     <% end %>
   </div>
 <% end %>

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

@@ -0,0 +1,10 @@
+<% case type %>
+<% when "not-available-in-currency" %>
+  <span class="add-to-cart-form-general-availability-value add-to-cart-form-general-availability-value--danger"><%= Spree.t(:product_not_available_in_this_currency) %></span>
+<% when "in-stock" %>
+  <span class="add-to-cart-form-general-availability-value"><%= Spree.t(:in_stock) %></span>
+<% when "backorderable" %>
+  <span class="add-to-cart-form-general-availability-value add-to-cart-form-general-availability-value--warning"><%= Spree.t(:backordered_info) %></span>
+<% when "out-of-stock" %>
+  <span class="add-to-cart-form-general-availability-value add-to-cart-form-general-availability-value--danger"><%= Spree.t(:out_of_stock) %></span>
+<% end %>

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

@@ -0,0 +1,36 @@
+<div class="product-variants-variant product-variants-variant--color" 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],
+              "is-color" => true
+            }
+          %>
+
+          <%= label_tag "variant_option_value_id_#{option_type[:id]}_#{option_value[:id]}",
+            class: "m-1 m-sm-2 m-md-1 color-select-label",
+            tabindex: 0,
+            "aria-label" => option_value[:presentation] do %>
+
+            <%= render partial: "spree/shared/color_select", locals: {
+              color: option_value[:presentation],
+              selected: false
+            } %>
+          <% end %>
+        </li>
+      <% end %>
+    </ol>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+<h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle"><%= Spree.t(:description) %></h3>
+<div id="product-description-short" class="m-0 text-break product-description" data-hook="description">
+  <%= sanitize product_description(@product).truncate(450) %>
+</div>
+
+<div id="product-description-long" class="m-0 text-break product-description d-none" data-hook="description">
+  <%= sanitize product_description(@product) %>
+</div>
+
+<% if product_description(@product).length > 450 %>
+  <span id="product-description-arrow" class="d-flex justify-content-center align-items-center mt-3 mx-auto product-description-arrow" aria-hidden="true">
+    <%= icon(name: 'arrow-right',
+             classes: 'spree-icon-arrow spree-icon-arrow-down',
+             width: 20,
+             height: 20) %>
+  </span>
+<% end %>

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

@@ -0,0 +1,16 @@
+<div class="container-fluid plp-filter-and-sort-horizontal-border d-lg-none mb-3">
+  <div class="row">
+    <div id="filter-by-overlay-show-button" class="col-6 plp-filter-and-sort-vertical-border">
+      <div class="plp-filter-and-sort-buttons">
+        <%= Spree.t('plp.filter_by') %>
+        <%= inline_svg_tag 'arrow-right.svg', class: "plp-icon" %>
+      </div>
+    </div>
+    <div id="sort-by-overlay-show-button" class="col-6">
+      <div class="plp-filter-and-sort-buttons">
+        <%= Spree.t("plp.#{ params[:sort_by].blank? ? 'sort_by': params[:sort_by].gsub('-', '_') }") %>
+        <%= inline_svg_tag 'arrow-right.svg', class: "plp-icon" %>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,58 @@
+<% cache base_cache_key + [available_option_types, permitted_params, @taxon] do %>
+  <div id="plp-filters-accordion" class="d-none d-lg-block col-lg-3 pr-5 position-sticky h-100 plp-filters" data-hook="taxon_sidebar_navigation">
+    <% @available_option_types.each do |option_type| %>
+      <div class="w-100 py-2 card plp-filters-card">
+        <% ot_downcase_name = option_type.filter_param %>
+        <% option_type_name = ot_downcase_name.titleize %>
+
+        <div class="card-header <%= 'collapsed' if params[ot_downcase_name].blank? %> px-1 plp-filters-card-header" id="filters<%= option_type_name %>" data-toggle="collapse" data-target="#collapseFilter<%= option_type_name %>" aria-expanded="false" aria-controls="collapseFilter<%= option_type_name %>" role="heading" aria-level="2">
+          <%= option_type.presentation %>
+          <%= icon(name: 'plus',
+                  classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--plus',
+                  width: 16,
+                  height: 16) %>
+          <%= icon(name: 'minus',
+                  classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--minus',
+                  width: 16,
+                  height: 16) %>
+        </div>
+        <div id="collapseFilter<%= option_type_name %>" class="collapse <%= 'show' unless params[ot_downcase_name].blank? %>" aria-labelledby="filters<%= option_type_name %>">
+          <div class="card-body px-0 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>
+        </div>
+      </div>
+    <% end %>
+
+    <div class="w-100 py-2 card plp-filters-card">
+      <div class="card-header <%= 'collapsed' if params[:price].blank? %> px-1 plp-filters-card-header" id="filtersPrice" data-toggle="collapse" data-target="#collapseFilterPrice" aria-expanded="false" aria-controls="collapseFilterPrice" role="heading" aria-level="2">
+        <%= Spree.t('plp.price') %>
+        <%= icon(name: 'plus',
+                classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--plus',
+                width: 16,
+                height: 16) %>
+        <%= icon(name: 'minus',
+                classes: 'mt-1 float-right arrow plp-filters-card-header-arrow--minus',
+                width: 16,
+                height: 16) %>
+      </div>
+      <div id="collapseFilterPrice" class="collapse <%= 'show' unless params[:price].blank? %>" aria-labelledby="filtersPrice">
+        <div class="card-body px-0 pt-1">
+          <% price_filter_values.each do |name| %>
+            <% price_param = params[:price] == name ? '' : name %>
+            <%= link_to permitted_params.merge({ price: price_param }), class: "d-block" do %>
+              <div class="d-inline-block py-1 px-2 m-1 text-uppercase plp-filters-card-item <%= 'plp-filters-card-item--selected' if params[:price] == name %>">
+                <%= name %>
+              </div>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,62 @@
+<% is_visible = params[:menu_open] ? 'block' : 'none' %>
+
+<% cache base_cache_key + [available_option_types, permitted_params, @taxon, is_visible] do %>
+  <div id="filter-by-overlay" class="d-lg-none plp-overlay" style="display: <%= is_visible %>;">
+    <div class="plp-scroll">
+      <div class="container">
+        <div class="plp-overlay-header">
+          <%= Spree.t('plp.filter_by') %>
+          <%= inline_svg_tag 'close.svg', id: 'filter-by-overlay-hide-button' %>
+        </div>
+      </div>
+      <div id="filters-accordion">
+        <% available_option_types.each do |option_type| %>
+          <% option_type_name = option_type.presentation.titleize.gsub(' ', '') %>
+          <% 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">
+              <%= 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 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>
+            </div>
+          </div>
+        <% end %>
+
+        <div class="card plp-overlay-card">
+          <div class="card-header <%= 'collapsed' if params[:price].blank? %> plp-overlay-card-header" id="headingFour" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour" role="heading" aria-level="3">
+            <%= Spree.t('plp.price') %>
+            <%= 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="collapseFour" class="collapse <%= 'show' unless params[:price].blank? %>" aria-labelledby="headingFour" data-parent="#filters-accordion">
+            <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 %>
+                  <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>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="container position-absolute text-center mb-2 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' %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,31 @@
+<div class="col-12 col-md-7 col-lg-7" data-hook="product_left_part">
+  <div
+    class="w-100 d-flex align-self-start justify-content-between product-details-images"
+    data-hook="product_left_part_wrap"
+  >
+    <% if @product_images.size > 1 %>
+      <div class="d-none d-md-block product-details-thumbnails" data-hook="product_thumbnails">
+        <%= render 'spree/shared/carousel/thumbnails',
+                  images: @product_images,
+                  group_id: 'main-product-carousel',
+                  id: 'productThumbnailsCarousel',
+                  trigger_id: 'productCarousel',
+                  per_page: 5
+        %>
+      </div>
+    <% end %>
+    <div class="product-details-single" data-hook="product_images">
+      <% if @product_images.size == 1 %>
+        <%= plp_and_carousel_image(@product) %>
+      <% else %>
+        <%= render 'spree/shared/carousel/single',
+                  images: @product_images,
+                  group_id: 'main-product-carousel',
+                  id: 'productCarousel',
+                  trigger_id: 'productCarousel',
+                  zoomed: false
+        %>
+      <% end %>
+    </div>
+  </div>
+</div>