spree_frontend 4.1.0 → 4.7.0

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

@@ -11,14 +11,14 @@
       <% options_hash = Rails.env.production? ? {autocomplete: 'off'} : {} %>
       <%= text_field_tag "#{param_prefix}[number]", '', options_hash.merge(id: 'card_number', class: 'spree-flat-input cardNumber', size: 19, maxlength: 19, autocomplete: "off", placeholder: Spree.t(:card_number)) %>
       <span id="card_type" style="display:none;">
-        ( <span id="looks_like" ><%= Spree.t(:card_type_is) %> <span id="type"></span></span>
+        ( <span id="looks_like"><%= Spree.t(:card_type_is) %> <span id="type"></span></span>
           <span id="unrecognized"><%= Spree.t(:unrecognized_card_type) %></span>
         )
       </span>
     </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

@@ -15,13 +15,13 @@
           </div>
           <% path = spree.respond_to?(:update_checkout_registration_path) ? spree.update_checkout_registration_path : spree_signup_path %>
 
-          <%= form_for @order, url: path, method: :put, html: { id: 'checkout_form_registration' } do |f| %>
+          <%= form_for @order, url: path, method: :put, html: { id: 'checkout_form_registration', data: { turbo: false } } 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/cms_pages/show.html.erb

@@ -0,0 +1,16 @@
+<% if @cms_page %>
+  <% if simple_page?(@cms_page) %>
+  <div class="container">
+    <div class="row my-5">
+      <div class="col-12">
+        <%= @cms_page.content.html_safe %>
+      </div>
+    </div>
+  </div>
+  <% else %>
+      <% @cms_page.cms_sections.each do |section| %>
+        <%= build_section(section) %>
+      <% end %>
+  <% end %>
+<% end %>
+<%= render "spree/shared/cms/pages/edit_mode", edit_mode: @edit_mode %>

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

@@ -1,128 +1,22 @@
-<% @body_id = 'home' %>
-
-<div class="homepage-hero-image mb-3 position-relative">
-  <img class="lazyload hero-image position-absolute"
-    data-src="<%= asset_path('homepage/main_banner.jpg') %>"
-    data-srcset="<%= image_source_set('homepage/main_banner') %>"
-    alt="<%= Spree.t('homepage.summer_collection')%>" />
-
-  <div class="hero-content">
-    <div class="homepage-hero-image-text mb-2 mx-auto pb-3 pb-md-4">
-      <%= Spree.t('homepage.summer_collection') %>
-    </div>
-    <div>
-      <%= link_to Spree.t('homepage.shop_now'), spree.products_path, class: 'btn btn-primary spree-btn px-5' %>
-    </div>
-  </div>
-</div>
-
-<div class="container">
-  <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 %>
+<% if @homepage %>
+    <% @homepage.cms_sections.each do |section| %>
+      <%= build_section(section) %>
+    <% end %>
+<% else %>
+  <div id="missingHomepage" class="container my-5">
+    <div class="row my-5">
+      <div class="col-12">
+        <figure class="logo mx-auto missing-homepage-logo-container">
+          <%= logo %>
+        </figure>
       </div>
-
-      <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')%>" />
-
-          <div class="homepage-taxon-box-text" role="img" aria-label="<%= Spree.t('homepage.sportswear') %>">
-            <h3><%= Spree.t('homepage.sportswear') %></h3>
-          </div>
-        <% end %>
+      <div class="col-12 mb-5 text-center">
+        <h1 class="mb-3"><%= Spree.t('we_will_be_back') %></h1>
+        <h4 class="text-dark"><%= Spree.t('we_are_busy_updating', store_name: current_store.name) %></h4>
+        <h4 class="text-dark"><%= Spree.t('please_check_back_soon') %></h4>
       </div>
-
-    </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')%>" />
-
-          <div class="homepage-taxon-box-text">
-            <h3><%= Spree.t('homepage.women') %></h3>
-          </div>
-        <% end %>
-      </div>
-
     </div>
   </div>
-</div>
-
-<div data-product-carousel data-product-carousel-taxon-id='bestsellers' class="my-3"></div>
-
-<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-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') %>
-    </div>
-    <%= link_to Spree.t('homepage.read_more'), spree.nested_taxons_path('trending'), class: 'btn px-5 spree-btn btn-outline-primary' %>
-  </div>
-</div>
-
+<% end %>
 
-<div data-product-carousel data-product-carousel-taxon-id='trending' class="mb-3"></div>
-
-<div class="container">
-  <div class="row">
-    <div class="col-12 col-lg-6">
-      <%= link_to spree.nested_taxons_path('streetstyle') do %>
-        <div class="homepage-bottom-box text-center mb-3">
-          <img class="w-100 lazyload"
-            data-src="<%= asset_path('homepage/promo_banner_left.jpg') %>"
-            data-srcset="<%= image_source_set('homepage/promo_banner_left') %>"
-            alt="<%= Spree.t('homepage.new_collection')%>" />
-
-          <div class="homepage-bottom-box-inner" role="img" aria-label="<%= Spree.t('homepage.new_collection') %>">
-            <div class="homepage-bottom-box-inner-small-text">
-              <%= Spree.t('homepage.new_collection') %>
-            </div>
-            <div class="homepage-bottom-box-inner-big-text">
-              <%= Spree.t('homepage.streetstyle') %>
-            </div>
-          </div>
-        </div>
-      <% end %>
-    </div>
-
-    <div class="col-12 col-lg-6">
-      <%= link_to spree.nested_taxons_path('summer-sale') do %>
-        <div class="homepage-bottom-box text-center mb-3">
-          <img class="w-100 lazyload"
-            data-src="<%= asset_path('homepage/promo_banner_right.jpg') %>"
-            data-srcset="<%= image_source_set('homepage/promo_banner_right') %>"
-            alt="<%= Spree.t('homepage.summer_sale')%>" />
-
-          <div class="homepage-bottom-box-inner">
-            <div class="homepage-bottom-box-inner-small-text">
-              <%= Spree.t('homepage.summer_sale') %>
-            </div>
-            <div class="homepage-bottom-box-inner-big-text">
-              <%= Spree.t('homepage.up_to_60') %>
-            </div>
-          </div>
-        </div>
-      <% end %>
-    </div>
-  </div>
-</div>
+<%= render "spree/shared/cms/pages/edit_mode", edit_mode: @edit_mode %>

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/layouts/spree_application.html.erb

@@ -8,12 +8,13 @@
     <%= render partial: 'spree/shared/head' %>
   </head>
   <body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body">
+    <%= render partial: 'spree/shared/get_started' %>
     <%= render partial: 'spree/shared/header' %>
     <div id="overlay" class="overlay hide-on-esc"></div>
 
     <div data-hook>
-      <main id="content" data-hook>
-        <%= flash_messages %>
+      <%= flash_messages %>
+      <main class="col-12" id="content" data-hook>
         <%= yield %>
       </main>
 

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

@@ -0,0 +1 @@
+<%= render 'spree/shared/locale_dropdown' %>

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>
@@ -12,11 +12,10 @@
     <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 }
-      %>
+        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)  %>
+          <%= icon(name: 'close', width: 15, height: 14) %>
         <% end %>
       </div>
     </div>

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

@@ -3,20 +3,20 @@
 <%= order_form.fields_for :line_items, line_item do |item_form| %>
   <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), variant.product %>
+      <%= 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">
-      <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 />
+          <%= Spree.t(:out_of_stock) %>&nbsp;&nbsp;<br>
         </span>
       <% end %>
       <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.name.titleize}" %>
+            <%= "#{ov.option_type.presentation}: #{ov.presentation}" %>
           </li>
         <% end %>
       </ul>

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,10 +22,10 @@
 <% 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: { 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)  %>
+             height: 17) %>
   <% end %>
 </div>

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

@@ -12,7 +12,7 @@
           <%= icon(name: 'empty-cart',
                    classes: 'shopping-cart-empty-image',
                    width: 83,
-                   height: 83)  %>
+                   height: 83) %>
 
           <p class="text-center shopping-cart-empty-info"><%= Spree.t('cart_page.empty_info').html_safe %></p>
         </div>
@@ -57,8 +57,7 @@
               <%= render 'coupon_code',
                 promotion: @order.valid_coupon_promotions.first,
                 order_form: order_form,
-                classes: ''
-              %>
+                classes: '' %>
             <% end %>
 
             <div class="text-right shopping-cart-total d-lg-none">

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

@@ -13,77 +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>
-      <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>
-      <% @order.shipments.valid.each do |shipment| %>
-        <dd class="text-center text-lg-left">
-          <%= shipment.shipping_method.name %>
-          <%= link_to_tracking(shipment) if shipment.shipped? %>
-        </dd>
-      <% end %>
-    </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">
-        <%= link_to product_image(item.variant), item.product %>
-        <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>
+  <%= render partial: 'spree/shared/order_details', locals: { order: @order } %>
 </div>

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

@@ -27,6 +27,9 @@
   <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>
@@ -52,7 +55,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 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 %>
@@ -67,7 +70,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,22 @@
     <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[: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],

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

@@ -1,17 +1,22 @@
 <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>
+<% 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 %>