spree_frontend 3.1.0 → 4.7.0

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

@@ -6,12 +6,12 @@
 <tbody id="cart_adjustments" data-hook>
   <% if @order.line_item_adjustments.exists? %>
     <% @order.line_item_adjustments.promotion.eligible.group_by(&:label).each do |label, adjustments| %>
-      <%= render "spree/orders/adjustment_row", :label => label, :adjustments => adjustments, :type => Spree.t(:promotion) %>
+      <%= render "spree/orders/adjustment_row", label: label, adjustments: adjustments, type: Spree.t(:promotion) %>
     <% end %>
   <% end %>
 
   <% @order.all_adjustments.tax.eligible.group_by(&:label).each do |label, adjustments| %>
-    <%= render "spree/orders/adjustment_row", :label => label, :adjustments => adjustments, :type => Spree.t(:tax) %>
+    <%= render "spree/orders/adjustment_row", label: label, adjustments: adjustments, type: Spree.t(:tax) %>
   <% end %>
 
   <% @order.shipments.each do |shipment| %>
@@ -24,6 +24,6 @@
   <% end %>
 
   <% @order.adjustments.eligible.group_by(&:label).each do |label, adjustments| %>
-    <%= render "spree/orders/adjustment_row", :label => label, :adjustments => adjustments, :type => Spree.t(:adjustment) %>
+    <%= render "spree/orders/adjustment_row", label: label, adjustments: adjustments, type: Spree.t(:adjustment) %>
   <% end %>
 </tbody>

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

@@ -0,0 +1,23 @@
+<% if promotion.nil? %>
+  <div class='shopping-cart-coupon-code <%= classes %>' data-hook='coupon_code'>
+    <div class="input-group">
+      <%= order_form.text_field :coupon_code, size: '30', class: 'form-control border-right-0', placeholder: Spree.t('cart_page.add_promo_code'), aria: { label: Spree.t('cart_page.add_promo_code') } %>
+      <div class="input-group-append">
+        <%= button_tag '+', name: '', id: 'shopping-cart-coupon-code-button', class: 'btn border-left-0' %>
+      </div>
+    </div>
+  </div>
+<% else %>
+  <div class='shopping-cart-coupon-code <%= classes %>' data-hook='coupon_code'>
+    <div class="input-group">
+      <%= order_form.text_field :applied_coupon_code, name: '', size: '30', class: 'form-control border-right-0 disabled',
+        value: Spree.t(:promotion_label, name: promotion.name),
+        data: { code: promotion.code } %>
+      <div class="input-group-append">
+        <%= button_tag name: '', id: 'shopping-cart-remove-coupon-code-button', class: 'btn border-left-0 remove' do %>
+          <%= icon(name: 'close', width: 15, height: 14) %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -1,28 +1,27 @@
-<%= render partial: 'spree/shared/error_messages', locals: { target: @order } %>
-<table class="table" id="cart-detail" data-hook>
-  <thead>
-    <tr class="active" data-hook="cart_items_headers">
-      <th class="cart-item-description-header" colspan="2"><%= Spree.t(:item) %></th>
-      <th class="cart-item-price-header"><%= Spree.t(:price) %></th>
-      <th class="cart-item-quantity-header"><%= Spree.t(:qty) %></th>
-      <th class="cart-item-total-header"><%= Spree.t(:total) %></th>
-      <th class="cart-item-delete-header"></th>
-    </tr>
-  </thead>
-  <tbody id="line_items" data-hook>
+<div id="no-product-available" class="no-product-available-dropdown hide-on-esc">
+  <%= render partial: 'spree/shared/no_product_available' %>
+</div>
+
+<div class="d-table table-responsive" id="cart-detail" data-hook>
+  <div class="active d-none d-lg-table-row shopping-cart-table-header" data-hook="cart_items_headers">
+    <div class="d-table-cell cart-item-description-header text-uppercase"><%= Spree.t('cart_page.product') %></div>
+    <div class="d-table-cell"></div>
+    <div class="d-table-cell cart-item-price-header text-uppercase"><%= Spree.t(:price) %></div>
+    <div class="d-table-cell cart-item-quantity-header text-uppercase"><%= Spree.t('cart_page.quantity') %></div>
+    <div class="d-table-cell cart-item-total-header text-uppercase"><%= Spree.t(:total) %></div>
+    <div class="d-table-cell cart-item-delete-header"></div>
+  </div>
+  <div id="line_items" class="shopping-cart-table-line-items" data-hook>
     <%= render partial: 'spree/orders/line_item', collection: order_form.object.line_items, locals: { order_form: order_form } %>
-  </tbody>
-  <% if @order.adjustments.nonzero.exists? || @order.line_item_adjustments.nonzero.exists? || @order.shipment_adjustments.nonzero.exists? || @order.shipments.any? %>
-    <tr class="cart-subtotal">
-      <td colspan="4" align='right'><h5><%= Spree.t(:cart_subtotal, count: @order.line_items.sum(:quantity)) %></h5></td>
-      <td colspan><h5><%= order_form.object.display_item_total %></h5></td>
-      <td></td>
-    </tr>
-    <%= render "spree/orders/adjustments" %>
-  <% end %>
-  <tr class="warning cart-total">
-    <td colspan="4" align='right'><h5><%= Spree.t(:total) %></h5></td>
-    <td class="lead" colspan><%= order_form.object.display_total %></td>
-    <td></td>
-  </tr>
-</table>
+  </div>
+</div>
+
+<% if @order&.errors&.any? %>
+  <script>
+    window.addEventListener('DOMContentLoaded', function() {
+      document.getElementById('overlay').classList.add('shown');
+      document.getElementById('no-product-available').classList.add('shown');
+      window.scrollTo(0, 0);
+    })
+  </script>
+<% end %>

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

@@ -1,37 +1,27 @@
 <% variant = line_item.variant %>
 
 <%= order_form.fields_for :line_items, line_item do |item_form| %>
-  <tr class="line-item">
-    <td class="cart-item-image" data-hook="cart_item_image">
-      <% if variant.images.length == 0 %>
-        <%= link_to small_image(variant.product), variant.product %>
-      <% else %>
-        <%= link_to image_tag(variant.images.first.attachment.url(:small)), variant.product %>
-      <% end %>
-    </td>
-    <td class="cart-item-description" data-hook="cart_item_description">
-      <h4><%= link_to line_item.name, product_path(variant.product) %></h4>
-      <%= variant.options_text %>
+  <div class="d-table-row shopping-cart-item">
+    <div class="d-table-cell shopping-cart-item-image" data-hook="cart_item_image">
+      <%= link_to product_image(variant), spree.product_path(variant.product) %>
+    </div>
+    <div class="d-table-cell shopping-cart-item-description" data-hook="cart_item_description">
+      <h2 class="item-title"><%= link_to line_item.name, spree.product_path(variant.product) %></h2>
       <% if line_item.insufficient_stock? %>
         <span class="out-of-stock">
-          <%= Spree.t(:out_of_stock) %>&nbsp;&nbsp;<br />
+          <%= Spree.t(:out_of_stock) %>&nbsp;&nbsp;<br>
         </span>
       <% end %>
-      <span class="line-item-description" data-hook="line_item_description">
-        <%= line_item_description_text(line_item.description) %>
-      </span>
-    </td>
-    <td class="lead text-primary cart-item-price" data-hook="cart_item_price">
-      <%= line_item.single_money.to_html %>
-    </td>
-    <td class="cart-item-quantity" data-hook="cart_item_quantity" valign="center">
-      <%= item_form.number_field :quantity, min: 0, class: "form-control line_item_quantity", size: 5 %>
-    </td>
-    <td class="lead text-primary cart-item-total" data-hook="cart_item_total">
-      <%= line_item.display_amount.to_html unless line_item.quantity.nil? %>
-    </td>
-    <td class="cart-item-delete" data-hook="cart_item_delete">
-      <%= link_to content_tag(:span, '', class: 'glyphicon glyphicon-minus-sign'), '#', class: 'delete', id: "delete_#{dom_id(line_item)}" %>
-    </td>
-  </tr>
+      <ul class="item-details-list" data-hook="line_item_description">
+        <% variant.option_values.sort { |ov| ov.option_type.position }.each do |ov| %>
+          <li class="item-details">
+            <% # TODO: rework option values so options_text method can be used here %>
+            <%= "#{ov.option_type.presentation}: #{ov.presentation}" %>
+          </li>
+        <% end %>
+      </ul>
+      <%= render 'line_item_data', view: 'mobile', line_item: line_item, item_form: item_form %>
+    </div>
+    <%= render 'line_item_data', view: 'desktop', line_item: line_item, item_form: item_form %>
+  </div>
 <% end %>

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

@@ -0,0 +1,31 @@
+<% if view == "mobile" %>
+  <% additional_classes = "d-lg-none" %>
+<% elsif view == "desktop" %>
+  <% additional_classes = "d-none d-lg-table-cell" %>
+<% end %>
+
+<div class="shopping-cart-item-price <%= additional_classes %>" data-hook="cart_item_price">
+  <%= line_item.single_money.to_html %>
+</div>
+<div class="shopping-cart-item-quantity <%= additional_classes %>" data-hook="cart_item_quantity">
+  <div class="d-flex align-items-center">
+    <%= button_tag '-', type: 'button', class: "border-right-0 shopping-cart-item-quantity-decrease-btn", data: { id: dom_id(line_item) } %>
+    <%= item_form.number_field :quantity, min: 0, class: "form-control text-center border-left-0 border-right-0 shopping-cart-item-quantity-input", size: 5, data: { id: dom_id(line_item) }, aria: { label: Spree.t('cart_page.change_quantity') } %>
+    <%= button_tag '+', type: 'button', class: "border-left-0 shopping-cart-item-quantity-increase-btn", data: { id: dom_id(line_item) } %>
+  </div>
+</div>
+
+<% if view == "desktop" %>
+  <div class="shopping-cart-item-total d-none d-lg-table-cell" data-hook="cart_item_total">
+    <%= line_item.display_amount.to_html unless line_item.quantity.nil? %>
+  </div>
+<% end %>
+
+<div class="shopping-cart-item-delete <%= additional_classes %>" data-hook="cart_item_delete">
+  <%= link_to '#', class: 'delete', id: "delete_#{dom_id(line_item)}", data: { turbo: false, id: dom_id(line_item), variant_sku: line_item.sku, variant_name: line_item.name, variant_price: line_item.price, variant_options: line_item.options_text }, aria: { label: Spree.t('cart_page.remove_from_cart') } do %>
+    <%= icon(name: 'garbage',
+             classes: 'shopping-cart-item-delete-icon',
+             width: 18.9,
+             height: 17) %>
+  <% end %>
+</div>

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

@@ -1,43 +1,105 @@
 <% @body_id = 'cart' %>
-<div data-hook="cart_container">
-  <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-default' %></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="links col-md-6 navbar-form pull-right text-right" data-hook="cart_buttons">
-            <div class="form-group">
-              <%= button_tag class: 'btn btn-primary', id: 'update-button' do %>
-                <%= Spree.t(:update) %>
+          <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="row no-gutters align-items-center">
+                <div class="text-uppercase shopping-cart-total-text col-8 mr-0">
+                  <%= Spree.t(:subtotal) %>
+                </div>
+                <div class="shopping-cart-total-amount col align-self-end">
+                  <%= order_form.object.display_item_total %>
+                </div>
+              </div>
+              <% if !order_form.object.cart_promo_total.zero? %>
+                <div class="row no-gutters align-items-center">
+                  <div class="text-uppercase shopping-cart-total-text col-8 mr-0">
+                    <%= Spree.t(:promotion) %>
+                  </div>
+                  <div class="shopping-cart-total-amount col align-self-end">
+                    <%= order_form.object.display_cart_promo_total %>
+                  </div>
+                </div>
               <% end %>
-              <%= button_tag class: 'btn btn-lg btn-success', id: 'checkout-link', name: 'checkout' do %>
-                <%= Spree.t(:checkout) %>
+            </div>
+
+            <% if Spree::Frontend::Config[:coupon_codes_enabled] %>
+              <%= render 'coupon_code',
+                promotion: @order.valid_coupon_promotions.first,
+                order_form: order_form,
+                classes: '' %>
+            <% end %>
+
+            <div class="text-right shopping-cart-total d-lg-none">
+              <div class="row no-gutters align-items-center">
+                <div class="text-uppercase shopping-cart-total-text col-8 mr-0">
+                  <%= Spree.t(:subtotal) %>
+                </div>
+                <div class="shopping-cart-total-amount col align-self-end">
+                  <%= order_form.object.display_item_total %>
+                </div>
+              </div>
+              <% if !order_form.object.cart_promo_total.zero? %>
+                <div class="row no-gutters align-items-center">
+                  <div class="text-uppercase shopping-cart-total-text col-8 mr-0">
+                    <%= Spree.t(:promotion) %>
+                  </div>
+                  <div class="shopping-cart-total-amount col align-self-end">
+                    <%= order_form.object.display_cart_promo_total %>
+                  </div>
+                </div>
               <% end %>
             </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="col-md-6 pull-left" 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-default' %>
-          <%= Spree.t(:or) %>
-          <%= link_to Spree.t(:continue_shopping), products_path, class: 'continue' %>
-        </p>
-      <% end %>
-    </div>
   <% end %>
 </div>
+
+<script>
+  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,28 +1,19 @@
-<% content_for :google_analytics do %>
+<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) %>
-    <%= render partial: 'spree/shared/google_purchase.js', locals: { order: @order } %>
+    <%= 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 %>
-<% end %>
 
-<fieldset id="order_summary" data-hook>
-  <legend><%= Spree.t(:order_number, number: @order.number) %></legend>
-  <h1><%= accurate_title %></h1>
-  <% if order_just_completed?(@order) %>
-    <strong><%= Spree.t(:thank_you_for_your_order) %></strong>
-  <% 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" %>
-        <% end %>
-      <% end %>
-    </p>
-  </div>
-</fieldset>
+  <p class="order-show-number text-uppercase w-100 text-center">
+    <%= accurate_title %> / <%= pretty_date(@order.completed_at) %>
+  </p>
+  <%= render partial: 'spree/shared/order_details', locals: { order: @order } %>
+</div>

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

@@ -1,76 +1,83 @@
-<%= form_for :order, url: populate_orders_path 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-md-6">
-        <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>
-              <%= radio_button_tag "variant_id", variant.id, index == 0,
-                  'data-price' => variant.price_in(current_currency).money, 
-                  'data-in-stock' => variant.can_supply?
-              %>
-              <%= label_tag "variant_id_#{ variant.id }" do %>
-                <span class="variant-description">
-                  <%= variant_options variant %>
-                </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 %>
-            </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? %>
+<% default_variant = default_variant(@variants, @product) %>
+
+<%= 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">
+        <% if should_display_compare_at_price?(default_variant) %>
+          <span class="compare-at-price mr-3"><%= display_compare_at_price(default_variant) %></span>
+        <% end %>
+        <span class="price selling" content="<%= @product_price.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-md-5">
-        <div id="product-price">
-          <h6 class="product-section-title"><%= Spree.t(:price) %></h6>
-          <div>
-            <span class="lead price selling" itemprop="price">
-              <%= display_price(@product) %>
-            </span>
-            <span itemprop="priceCurrency" content="<%= @product.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? %>
-            <br />
-            <span class="out-of-stock"><%= Spree.t(:out_of_stock) %></span>
-          <% end %>
+    <% if @product.variants_and_option_values(current_currency).any? %>
+      <hr>
+      <ul id="product-variants" class="product-variants">
+        <% used_variants_options(@variants, @product).each_with_index do |option_type, index| %>
+          <li>
+            <% if color_option_type_name.present? && color_option_type_name == option_type[:name] %>
+              <%= 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 text-center text-md-left">
+          <%= render 'spree/shared/quantity_select', input_name: :quantity %>
         </div>
 
-        <% if @product.can_supply? %>
-          <div class="add-to-cart">
-            <br />
-            <div class="input-group">
-              <%= number_field_tag :quantity, 1, class: 'title form-control', min: 1 %>
-              <span class="input-group-btn">
-                <%= button_tag class: 'btn btn-success', id: 'add-to-cart-button', type: :submit do %>
-                  <%= Spree.t(:add_to_cart) %>
-                <% end %>
-              </span>
-            </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">
-        <br />
-        <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>
+          <%= label_tag "variant_option_value_id_#{option_type[:id]}_#{option_value[:id]}",
+            class: "m-1 m-sm-2 m-md-1 color-select-label",
+            title: option_value[:presentation],
+            data: { toggle: "tooltip", placement: "bottom" } do %>
+
+            <%= 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",
+              aria: { label: option_value[:presentation] },
+              data: {
+                "option-type-index" => index,
+                "presentation" => option_value[:presentation],
+                "variant-id" => option_value[:variant_id],
+                "is-color" => true
+              } %>
+
+            <%= 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,22 @@
+<h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle"><%= Spree.t(:description) %></h3>
+
+<% if Spree::Frontend::Config[:show_raw_product_description] || product_wysiwyg_editor_enabled? %>
+  <div id="product-description-long" class="m-0 text-break product-description" data-hook="description">
+    <%= raw product_description(@product) %>
+  </div>
+<% else %>
+  <div id="product-description-short" class="m-0 text-break product-description" data-hook="short-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 %>
+<% 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>