spree_frontend 4.1.15 → 4.2.0.beta

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

@@ -2,22 +2,31 @@
 
 <% Spree::Address::ADDRESS_FIELDS.each do |field| %>
   <% if field == "country" %>
-    <p class="form-group checkout-content-inner-field" id="<%= "#{address_id}country" %>">
-      <span id="<%= "#{address_id}country-selection" %>" class="d-block position-relative">
+    <div class="form-group checkout-content-inner-field" id="<%= "#{address_id}country" %>">
+      <div id="<%= "#{address_id}country-selection" %>" class="d-block position-relative has-float-label">
         <%= address_form.collection_select :country_id, available_countries, :id, :name,
                                            { prompt: Spree.t(:country).upcase },
-                                           { class: 'required form-control spree-flat-select'} %>
+                                           { class: 'required form-control spree-flat-select',
+                                             aria: { label: Spree.t(:country) } } %>
         <%= image_tag 'arrow.svg', class: 'position-absolute spree-flat-select-arrow' %>
-      </span>
-    </p>
+        <%= address_form.label(Spree.t(:country), Spree.t(:country).upcase, class:'text-uppercase') %>
+      </div>
+    </div>
   <% elsif field == "state" %>
     <div class="form-group mb-4">
       <%= address_field(address_form, :state, address_id) { address_state(address_form, address.country, address_id) } if Spree::Config[:address_requires_state] %>
     </div>
+  <% elsif field == "zipcode" %>
+    <div class="form-group mb-4">
+      <%= address_field(address_form, :zipcode, address_id) { address_zipcode(address_form, address.country, address_id) } %>
+    </div>
   <% else %>
     <% next if field == "company" && !Spree::Config[:company] %>
     <% next if field == "alternative_#{address_id}_phone" && !Spree::Config["alternative_#{address_id}_phone"] %>
     <div class="form-group mb-4">
       <%= address_field(address_form, field.to_sym, address_id) %>
-    </div>  <% end %>
+    </div>
+  <% end %>
 <% end %>
+
+<p class="text-right text-uppercase mb-5 checkout-content-inner-field"><span id="required_marker"><%= Spree.t(:required) %></span> <%= Spree.t(:required_fields) %></p>

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

@@ -3,12 +3,10 @@
 <% if !try_spree_current_user || try_spree_current_user.email.blank? %>
   <div class="row">
     <div class="col-12 mb-4">
-      <p class="form-group checkout-content-inner-field">
-        <%= form.label :email, class: 'text-uppercase' %>
-        <span class="required">*</span>
-        <br />
-        <%= form.email_field :email, class: 'required spree-flat-input', required: true %>
-      </p>
+      <div class="form-group checkout-content-inner-field has-float-label">
+        <%= form.email_field :email, class: 'required spree-flat-input', required: true, placeholder: Spree.t(:email) %>
+        <%= form.label :email, class: 'text-uppercase'%>
+      </div>
     </div>
   </div>
 <% end %>
@@ -60,7 +58,6 @@
               address: Spree::Address.default,
               form: form
             } %>
-            <p class="text-right text-uppercase checkout-content-inner-field">*<%= Spree.t(:required_fields) %></p>
           </div>
         <% end %>
       </div>

data/app/views/spree/checkout/_confirm.html.erb

@@ -3,7 +3,8 @@
     <%= Spree.t(:summary).upcase %>
   </p>
   <div class='checkout-confirm-order-details d-flex flex-column flex-lg-wrap' id="order_summary" data-hook>
-    <div class="checkout-confirm-order-details-line-items d-flex flex-column align-items-center w-100 order-0 order-lg-1">
+    <%= render partial: 'spree/checkout/delivery_informations', locals: { class_name: 'd-none d-lg-block' } %>
+    <div class="checkout-confirm-order-details-line-items d-flex flex-column align-items-center w-100">
       <div class="checkout-confirm-order-details-line-items-header d-none d-sm-block d-lg-none align-self-start mb-3">
         <%= Spree.t(:products) %>
       </div>
@@ -25,51 +26,8 @@
         <%= render partial: 'spree/shared/line_item', collection: @order.line_items, cached: true %>
       </div>
     </div>
-    <div class="checkout-confirm-delivery-informations text-left mt-3 order-1 order-lg-0">
-      <div class="d-lg-none checkout-confirm-delivery-informations-header">
-        <%= Spree.t(:delivery_information) %>
-      </div>
-      <dl>
-        <div>
-          <dt class="text-uppercase">
-            <%= Spree.t(:shipping_address) %>
-            <%= checkout_edit_link %>
-          </dt>
-          <dd><%= sanitize @order.ship_address.to_s, tags: %w[br] %></dd>
-        </div>
-        <div>
-          <dt class="text-uppercase">
-            <%= Spree.t(:billing_address) %>
-            <%= checkout_edit_link %>
-          </dt>
-          <dd><%= sanitize @order.bill_address.to_s, tags: %w[br] %></dd>
-        </div>
-        <div>
-          <dt class="text-uppercase">
-            <%= Spree.t(:shipping) %>
-            <%= checkout_edit_link('delivery') %>
-          </dt>
-          <% @order.shipments.pending.each do |shipment| %>
-            <dd><%= shipment.shipping_method&.name %> </dd>
-          <% end %>
-        </div>
-        <div>
-          <dt class="text-uppercase">
-            <%= Spree.t(:payment) %>
-            <%= checkout_edit_link('payment') %>
-          </dt>
-          <dd>
-            <%= render collection: @order.payments.valid, partial: 'spree/shared/payment' %>
-          </dd>
-          <dd>
-            <% if @order.using_store_credit? %>
-              <%= button_tag Spree.t('store_credit.remove'), name: 'remove_store_credit', class: 'continue btn' %>
-            <% end %>
-          </dd>
-        </div>
-      </dl>
-    </div>
-    <div id="checkout-summary" class="w-100 order-2" data-hook="checkout_summary_box">
+    <%= render partial: 'spree/checkout/delivery_informations', locals: { class_name: 'd-lg-none' } %>
+    <div id="checkout-summary" class="w-100" data-hook="checkout_summary_box">
       <%= render partial: 'spree/checkout/summary', locals: { order: @order } %>
       <div data-hook="buttons">
         <% submit_label_key = @order.confirm? ? :place_order : :save_and_continue %>

data/app/views/spree/checkout/_delivery.html.erb

@@ -3,9 +3,15 @@
     <div id="methods">
       <%= form.fields_for :shipments do |ship_form| %>
         <div class="shipment">
-          <h4 class="text-uppercase checkout-content-header checkout-content-shipping-methods-header">
+          <h4 class="text-uppercase checkout-content-header checkout-content-shipping-methods-header mb-1">
             <%= Spree.t('checkout_page.delivery_method') %>
           </h4>
+          <div id="shipToLocation" class="mb-4 text-uppercase">
+            <%= Spree.t(:ship_to) %>
+            <span class="text-muted"><%= @order.shipping_address.address1 %></span> -
+              <% if @order.shipping_address.zipcode.present? %> <span class="text-muted"><%= @order.shipping_address.zipcode %></span> - <% end %>
+            <span class="text-muted"><%= @order.shipping_address.country_iso %></span>
+          </div>
 
           <ul class="checkout-content-shipping-methods-list">
             <% ship_form.object.shipping_rates.each do |rate| %>
@@ -28,13 +34,14 @@
         </div>
       <% end %>
     </div>
+
     <% if Spree::Config[:shipping_instructions] %>
-      <p id="minstrs" data-hook>
+      <div id="minstrs" data-hook>
         <h4 class="h5">
           <%= Spree.t(:shipping_instructions) %>
         </h4>
         <%= form.text_area :special_instructions, cols: 40, rows: 4, class: "form-control" %>
-      </p>
+      </div>
     <% end %>
   </div>
 </div>

data/app/views/spree/checkout/_delivery_informations.html.erb

@@ -0,0 +1,44 @@
+<div class="checkout-confirm-delivery-informations text-left mt-3 <%= class_name %>">
+  <div class="d-lg-none checkout-confirm-delivery-informations-header">
+    <%= Spree.t(:delivery_information) %>
+  </div>
+  <dl>
+    <div>
+      <dt class="text-uppercase">
+        <%= Spree.t(:shipping_address) %>
+        <%= checkout_edit_link %>
+      </dt>
+      <dd><%= sanitize @order.ship_address.to_s, tags: %w[br] %></dd>
+    </div>
+    <div>
+      <dt class="text-uppercase">
+        <%= Spree.t(:billing_address) %>
+        <%= checkout_edit_link %>
+      </dt>
+      <dd><%= sanitize @order.bill_address.to_s, tags: %w[br] %></dd>
+    </div>
+    <div>
+      <dt class="text-uppercase">
+        <%= Spree.t(:shipping) %>
+        <%= checkout_edit_link('delivery') %>
+      </dt>
+      <% @order.shipments.pending.each do |shipment| %>
+        <dd><%= shipment.shipping_method&.name %> </dd>
+      <% end %>
+    </div>
+    <div>
+      <dt class="text-uppercase">
+        <%= Spree.t(:payment) %>
+        <%= checkout_edit_link('payment') %>
+      </dt>
+      <dd>
+        <%= render collection: @order.payments.valid, partial: 'spree/shared/payment' %>
+      </dd>
+      <dd>
+        <% if @order.using_store_credit? %>
+          <%= button_tag Spree.t('store_credit.remove'), name: 'remove_store_credit', class: 'continue btn' %>
+        <% end %>
+      </dd>
+    </div>
+  </dl>
+</div>

data/app/views/spree/checkout/_payment.html.erb

@@ -8,12 +8,12 @@
     <%= render partial: 'spree/checkout/payment/storecredit' %>
 
     <ul id="payment-method-fields" class="list-unstyled position-relative" data-hook>
-      <% @order.available_payment_methods.each do |method| %>
+      <% checkout_available_payment_methods.each do |method| %>
         <li class="radio">
           <%= label_tag '', class: "form-check-label spree-radio-label payment-option", data: { type: method.id == @payment_sources&.first&.payment_method_id ? 'card' : nil } do %>
             <%= radio_button_tag "order[payments_attributes][][payment_method_id]",
                                  method.id,
-                                 method.id == @order.payments.checkout.last&.payment_method_id || method == @order.available_payment_methods.first %>
+                                 method.id == @order.payments.checkout.last&.payment_method_id || method == checkout_available_payment_methods.first %>
             <span class="spree-radio-label-custom-input"></span>
             <%= Spree.t(method.name, scope: :payment_methods, default: method.name) %>
           <% end %>
@@ -43,8 +43,8 @@
       <% end %>
 
       <ul id="payment-methods" class="list-unstyled position-relative mb-0 payment-sources-add-form" data-hook>
-        <% @order.available_payment_methods.each do |method| %>
-          <li id="payment_method_<%= method.id %>" class="<%= 'last' if method == @order.available_payment_methods.last %>" data-hook>
+        <% checkout_available_payment_methods.each do |method| %>
+          <li id="payment_method_<%= method.id %>" class="<%= 'last' if method == checkout_available_payment_methods.last %>" data-hook>
             <fieldset>
               <%= render partial: "spree/checkout/payment/#{method.method_type}", locals: { payment_method: method } %>
             </fieldset>

data/app/views/spree/checkout/_summary.html.erb

@@ -27,24 +27,29 @@
     <% end %>
 
     <% if order.passed_checkout_step?("address") && order.shipments.any? %>
-      <div class="d-table-cell"><%= Spree.t(:shipping) %>:</div>
-      <% shipping_total = Spree::Money.new(order.shipments.to_a.sum(&:cost), currency: order.currency) %>
-      <div class="d-table-cell text-right"
-           data-hook='shipping-total'
-           data-currency='<%= Money::Currency.find(order.currency).symbol %>'
-           thousands-separator='<%= shipping_total.thousands_separator %>'
-           decimal-mark='<%= shipping_total.decimal_mark %>'
-           precision='<%= Money::Currency.find(order.currency).exponent %>'
-      >
-        <%= shipping_total.to_html %>
-      </div>
+      <% if order.has_free_shipping? %>
+        <div class="d-table-cell"><%= Spree.t(:shipping) %>:</div>
+        <div class="d-table-cell text-right"><%= Spree.t(:free) %></div>
+      <% else %>
+        <div class="d-table-cell"><%= Spree.t(:shipping) %>:</div>
+        <% shipping_total = Spree::Money.new(order.shipments.to_a.sum(&:cost), currency: order.currency) %>
+        <div class="d-table-cell text-right"
+            data-hook='shipping-total'
+            data-currency='<%= Money::Currency.find(order.currency).symbol %>'
+            thousands-separator='<%= shipping_total.thousands_separator %>'
+            decimal-mark='<%= shipping_total.decimal_mark %>'
+            precision='<%= Money::Currency.find(order.currency).exponent %>'
+        >
+          <%= shipping_total.to_html %>
+        </div>
 
-      <% if order.shipment_adjustments.nonzero.exists? %>
-        <% order.shipment_adjustments.nonzero.promotion.eligible.group_by(&:label).each do |label, adjustments| %>
-          <div class="d-table-cell"><%= label %>:</div>
-          <div class="d-table-cell text-right">
-            <%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %>
-          </div>
+        <% if order.shipment_adjustments.nonzero.exists? %>
+          <% order.shipment_adjustments.nonzero.promotion.eligible.group_by(&:label).each do |label, adjustments| %>
+            <div class="d-table-cell"><%= label %>:</div>
+            <div class="d-table-cell text-right">
+              <%= Spree::Money.new(adjustments.sum(&:amount), currency: order.currency).to_html %>
+            </div>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>

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

@@ -27,7 +27,7 @@ end
     <div class="text-uppercase checkout-header-title">
       <h1 data-hook="checkout_title"><%= Spree.t('checkout_page.header') %></h1>
     </div>
-    <div class="checkout-progress" data-hook="checkout_progress">
+    <div class="checkout-progress" data-hook="checkout_progress" role="navigation" aria-label="<%= Spree.t('checkout_page.checkout_navigation') %>">
       <%= checkout_progress %>
     </div>
   </div>

data/app/views/spree/checkout/payment/_gateway.html.erb

@@ -18,7 +18,7 @@
     </div>
     <div class="payment-gateway-half-fields d-flex justify-content-between">
       <div class="payment-gateway-field checkout-content-inner-field" data-hook="card_expiration">
-        <%= text_field_tag "#{param_prefix}[expiry]", '', id: 'card_expiry', class: 'spree-flat-input cardExpiry', placeholder: "MM / YY" %>
+        <%= text_field_tag "#{param_prefix}[expiry]", '', id: 'card_expiry', class: 'spree-flat-input cardExpiry', placeholder: "MM/YYYY" %>
       </div>
       <div class="payment-gateway-field checkout-content-inner-field" data-hook="card_code">
         <%= text_field_tag "#{param_prefix}[verification_value]", '', options_hash.merge(id: 'card_code', class: 'spree-flat-input cardCode', size: 5, placeholder: Spree.t(:cvv)) %>

data/app/views/spree/checkout/registration.html.erb

@@ -18,10 +18,10 @@
           <%= form_for @order, url: path, method: :put, html: { id: 'checkout_form_registration' } do |f| %>
             <div class="form-group">
               <p class="form-group checkout-content-inner-field">
-                <%= f.email_field :email, class: 'spree-flat-input', placeholder: Spree.t(:email), autofocus: true %>
+                <%= f.email_field :email, class: 'spree-flat-input', placeholder: Spree.t(:email) %>
               </p>
             </div>
-            <%= f.submit Spree.t(:continue_as_guest), class: 'btn btn-block btn-outline-primary spree-btn', tabindex: 4 %>
+            <%= f.submit Spree.t(:continue_as_guest), class: 'btn btn-block btn-outline-primary spree-btn' %>
           <% end %>
         <% end %>
       </div>

data/app/views/spree/errors/not_found.html.erb

@@ -1,7 +1,7 @@
 <div class="container">
   <div class="not-found-page text-center pt-5">
     <h1 class="display-1 text-primary">404</h1>
-    <p><strong>Sorry! Page you are looking can’t be found.</strong></p>
-    <p>Get back to the <%= link_to 'homepage', spree.root_url %>.</p>
+    <p><strong><%= Spree.t(:page_not_found) %></strong></p>
+    <p><%= Spree.t(:get_back_to_the) %> <%= link_to Spree.t(:home_page), spree.root_url %></p>
   </div>
 </div>

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

@@ -20,48 +20,42 @@
   <div class="row">
     <div class="col-6">
 
-      <div class="homepage-taxon-box mb-3">
-        <%= link_to spree.nested_taxons_path('men') do %>
-          <img class="w-100 lazyload"
-            data-src="<%= asset_path('homepage/category_banner_upper.jpg') %>"
-            data-srcset="<%= image_source_set('homepage/category_banner_upper') %>"
-            alt="<%= Spree.t('homepage.men')%>" />
-
-          <div class="homepage-taxon-box-text">
-            <h3><%= Spree.t('homepage.men') %></h3>
-          </div>
-        <% end %>
-      </div>
+      <%= link_to spree.nested_taxons_path('men'), class: "homepage-taxon-box mb-3" do %>
+        <img class="w-100 lazyload"
+          data-src="<%= asset_path('homepage/category_banner_upper.jpg') %>"
+          data-srcset="<%= image_source_set('homepage/category_banner_upper') %>"
+          alt="<%= Spree.t('homepage.men')%>" />
+
+        <div class="homepage-taxon-box-text">
+          <h3><%= Spree.t('homepage.men') %></h3>
+        </div>
+      <% end %>
 
-      <div class="homepage-taxon-box">
-        <%= link_to spree.nested_taxons_path('sportswear') do %>
-          <img class="w-100 lazyload"
-            data-src="<%= asset_path('homepage/category_banner_lower.jpg') %>"
-            data-srcset="<%= image_source_set('homepage/category_banner_lower') %>"
-            alt="<%= Spree.t('homepage.sportswear')%>" />
+      <%= link_to spree.nested_taxons_path('sportswear'), class: "homepage-taxon-box" do %>
+        <img class="w-100 lazyload"
+          data-src="<%= asset_path('homepage/category_banner_lower.jpg') %>"
+          data-srcset="<%= image_source_set('homepage/category_banner_lower') %>"
+          alt="<%= Spree.t('homepage.sportswear')%>" />
 
-          <div class="homepage-taxon-box-text" role="img" aria-label="<%= Spree.t('homepage.sportswear') %>">
-            <h3><%= Spree.t('homepage.sportswear') %></h3>
-          </div>
-        <% end %>
-      </div>
+        <div class="homepage-taxon-box-text" role="img" aria-label="<%= Spree.t('homepage.sportswear') %>">
+          <h3><%= Spree.t('homepage.sportswear') %></h3>
+        </div>
+      <% end %>
 
     </div>
 
     <div class="col-6 d-flex flex-column">
 
-      <div class="homepage-taxon-box flex-grow-1">
-        <%= link_to spree.nested_taxons_path('women') do %>
-          <img class="w-100 lazyload"
-            data-src="<%= asset_path('homepage/big_category_banner.jpg') %>"
-            data-srcset="<%= image_source_set('homepage/big_category_banner') %>"
-            alt="<%= Spree.t('homepage.women')%>" />
+      <%= link_to spree.nested_taxons_path('women'), class: "homepage-taxon-box flex-grow-1" do %>
+        <img class="w-100 lazyload"
+          data-src="<%= asset_path('homepage/big_category_banner.jpg') %>"
+          data-srcset="<%= image_source_set('homepage/big_category_banner') %>"
+          alt="<%= Spree.t('homepage.women')%>" />
 
-          <div class="homepage-taxon-box-text">
-            <h3><%= Spree.t('homepage.women') %></h3>
-          </div>
-        <% end %>
-      </div>
+        <div class="homepage-taxon-box-text">
+          <h3><%= Spree.t('homepage.women') %></h3>
+        </div>
+      <% end %>
 
     </div>
   </div>
@@ -71,7 +65,7 @@
 
 <div class="homepage-fashion-trends-box mb-3">
   <div class="text-center">
-    <div class="homepage-fashion-trends-box-summer-text mb-1"><%= Spree.t('homepage.summer_2019') %></div>
+    <div class="homepage-fashion-trends-box-summer-text mb-1"><%= Spree.t('homepage.summer_2020') %></div>
     <div class="homepage-fashion-trends-box-fashion-trends-text mb-2"><%= Spree.t('homepage.fashion_trends') %></div>
     <div class="homepage-fashion-trends-box-description-text text-center mb-3">
       <%= Spree.t('homepage.fashion_trends_note') %>

data/app/views/spree/layouts/checkout.html.erb

@@ -20,7 +20,9 @@
       <%= yield :templates %>
     </div>
 
-    <%= render 'spree/shared/copyright' %>
+    <footer>
+      <%= render 'spree/shared/copyright' %>
+    </footer>
     <%= render 'spree/shared/translations' %>
   </body>
 </html>

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

@@ -1,7 +1,7 @@
 <% 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') %>
+      <%= 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>

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

@@ -6,7 +6,7 @@
       <%= link_to product_image(variant), variant.product %>
     </div>
     <div class="d-table-cell shopping-cart-item-description" data-hook="cart_item_description">
-      <h4 class="item-title"><%= link_to line_item.name, spree.product_path(variant.product) %></h4>
+      <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 />

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

@@ -10,7 +10,7 @@
 <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) } %>
+    <%= 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>
@@ -22,7 +22,7 @@
 <% 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: { turbolinks: false } do %>
+  <%= link_to '#', class: 'delete', id: "delete_#{dom_id(line_item)}", data: { turbolinks: false }, aria: { label: Spree.t('cart_page.remove_from_cart') } do %>
     <%= icon(name: 'garbage',
              classes: 'shopping-cart-item-delete-icon',
              width: 18.9,

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

@@ -13,7 +13,7 @@
   <% end %>
 
   <p class="order-show-number text-uppercase w-100 text-center">
-    <%= accurate_title %> / <%= @order.completed_at.to_date.to_s(:long) %>
+    <%= accurate_title %> / <%= pretty_date(@order.completed_at) %>
   </p>
   <dl class="w-100 d-lg-flex justify-content-lg-between">
     <div>

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

@@ -16,6 +16,7 @@
 
 <% is_product_available_in_currency = product_available_in_currency? %>
 <% default_variant = default_variant(@variants, @product) %>
+<% should_display_compare_at_price = default_variant.compare_at_price.present? && default_variant.compare_at_price > default_variant.price %>
 
 <%= form_for :order, html: {
     id: 'add-to-cart-form',
@@ -27,6 +28,11 @@
   <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="compare-at-price">
+          <% if should_display_compare_at_price %>
+            <span class="mr-3"><%= display_compare_at_price(default_variant) %></span>
+          <% end %>
+        </span>
         <span class="price selling" content="<%= @product_price.to_d %>">
           <%= display_price(default_variant) %>
         </span>
@@ -52,7 +58,7 @@
       <ul id="product-variants" class="product-variants">
         <% used_variants_options(@variants, @product).each_with_index do |option_type, index| %>
           <li>
-            <% if option_type[:name] == "color" %>
+            <% if Spree::OptionType.color&.name == option_type[:name] %>
               <%= render "color_option_type", option_type: option_type, index: index %>
             <% else %>
               <%= render "option_type", option_type: option_type, index: index %>
@@ -67,7 +73,7 @@
 
       <hr>
       <div>
-        <div class="mb-5 mt-4">
+        <div class="mb-5 mt-4 text-center text-md-left">
           <%= render 'spree/shared/quantity_select', input_name: :quantity %>
         </div>
 

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

@@ -7,22 +7,23 @@
     <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 %>
+            title: option_value[:name],
+            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[:name] },
+              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],

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

@@ -1,10 +1,18 @@
 <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) %>
+  <% if Spree::Config[:show_raw_product_description] %>
+    <%= raw product_description(@product).truncate(450) %>
+  <% else %>
+    <%= sanitize product_description(@product).truncate(450) %>
+  <% end %>
 </div>
 
 <div id="product-description-long" class="m-0 text-break product-description d-none" data-hook="description">
-  <%= sanitize product_description(@product) %>
+  <% if Spree::Config[:show_raw_product_description] %>
+    <%= raw product_description(@product) %>
+  <% else %>
+    <%= sanitize product_description(@product) %>
+  <% end %>
 </div>
 
 <% if product_description(@product).length > 450 %>