spree_backend 4.1.15 → 4.2.0.beta

data/app/views/spree/admin/payments/source_forms/_gateway.html.erb

@@ -1,27 +1,33 @@
 <fieldset data-id="credit-card">
-  <div class="form-group" data-hook="previous_cards">
-    <ul>
-      <% if previous_cards.any? %>
-        <% previous_cards.each do |card| %>
-          <li>
-            <label>
-              <%= radio_button_tag :card, card.id, card == previous_cards.first %> <%= card.display_number %>
-            </label>
-          </li>
-        <% end %>
-        <li>
-          <label>
-            <%= radio_button_tag :card, 'new', false, { id: "card_new#{payment_method.id}" } %> <%= Spree.t(:use_new_cc) %>
-          </label>
-        </li>
-      <% end %>
-    </ul>
-  </div>
+<% if previous_cards.any? %>
+  <div class="card my-3">
+    <div class="card-header">
+      <h1 class="card-title mb-0 h5"><%= Spree.t(:previously_used_card) %></h1>
+    </div>
+      <div class="form-group previous_cards card-body mb-0" data-hook="previous_cards">
+        <ul class="m-0 p-0">
 
-  <div id="card_form<%= payment_method.id %>" class="margint" data-hook>
+            <% previous_cards.each do |card| %>
+              <li>
+                <label>
+                  <%= radio_button_tag :card, card.id, card == previous_cards.first %> <%= card.brand.upcase + ' - ' + card.display_number %>
+                </label>
+              </li>
+            <% end %>
+            <li>
+              <hr>
+              <label>
+                <%= radio_button_tag :card, 'new', false, { id: "card_new#{payment_method.id}" } %> <%= Spree.t(:use_new_cc) %>
+              </label>
+            </li>
+        </ul>
+      </div>
+  </div>
+<% end %>
+  <div id="card_form<%= payment_method.id %>" class="margint row" data-hook>
     <% param_prefix = "payment_source[#{payment_method.id}]" %>
 
-    <div data-hook="card_number" class="form-group">
+    <div data-hook="card_number" class="form-group col-12">
       <%= hidden_field_tag "#{param_prefix}[cc_type]", '', {class: 'ccType'} %>
       <%= label_tag "card_number#{payment_method.id}", raw(Spree.t(:card_number) + required_span_tag) %>
       <%= text_field_tag "#{param_prefix}[number]", '', class: 'required form-control cardNumber', id: "card_number#{payment_method.id}", maxlength: 19 %>
@@ -32,25 +38,19 @@
       </span>
     </div>
 
-    <div data-hook="card_name" class="form-group">
+    <div data-hook="card_name" class="form-group col-12">
       <%= label_tag "card_name#{payment_method.id}", raw(Spree.t(:name) + required_span_tag) %>
       <%= text_field_tag "#{param_prefix}[name]", '', id: "card_name#{payment_method.id}", class: 'required form-control', maxlength: 19 %>
     </div>
 
-    <div data-hook="card_expiration" class="form-group">
+    <div data-hook="card_expiration" class="form-group col-6">
       <%= label_tag "card_expiry#{payment_method.id}", raw(Spree.t(:expiration) + required_span_tag) %><br>
-      <%= text_field_tag "#{param_prefix}[expiry]", '', id: "card_expiry#{payment_method.id}", class: "required cardExpiry form-control", placeholder: "MM / YY" %>
+      <%= text_field_tag "#{param_prefix}[expiry]", '', id: "card_expiry#{payment_method.id}", class: "required cardExpiry form-control", placeholder: "MM/YYYY" %>
     </div>
 
-    <div data-hook="card_code" class="form-group">
+    <div data-hook="card_code" class="form-group col-6">
       <%= label_tag "card_code#{payment_method.id}", raw(Spree.t(:card_code) + required_span_tag) %>
       <%= text_field_tag "#{param_prefix}[verification_value]", '', id: "card_code#{payment_method.id}", class: 'required form-control cardCode', size: 5 %>
-      <a href="/content/cvv" class="info cvvLink" target="_blank">
-        (<%= Spree.t(:what_is_this) %>)
-      </a>
     </div>
-
-    <%= image_tag 'credit_cards/credit_card.gif', class: 'credit-card-image' %>
-
   </div>
 </fieldset>

data/app/views/spree/admin/payments/source_views/_gateway.html.erb

@@ -1,21 +1,23 @@
 <fieldset data-hook="credit_card">
   <legend><%= Spree.t(:credit_card) %></legend>
-  <table class="table table-condensed table-bordered">
-    <tr>
-      <th width="20%"><%= Spree.t(:name_on_card) %>:</th>
-      <td><%= payment.source.name %></td>
-    </tr>
-    <tr>
-      <th><%= Spree.t(:card_type) %>:</th>
-      <td><%= payment.source.cc_type %></td>
-    </tr>
-    <tr>
-      <th><%= Spree.t(:card_number) %>:</th>
-      <td><%= payment.source.display_number %></td>
-    </tr>
-    <tr>
-      <th><%= Spree.t(:expiration) %>:</th>
-      <td><%= payment.source.month %>/<%= payment.source.year %></td>
-    </tr>
-  </table>
+  <div class="table-responsive">
+    <table class="table table-condensed table-bordered">
+      <tr>
+        <th width="20%"><%= Spree.t(:name_on_card) %>:</th>
+        <td><%= payment.source.name %></td>
+      </tr>
+      <tr>
+        <th><%= Spree.t(:card_type) %>:</th>
+        <td><%= payment.source.cc_type %></td>
+      </tr>
+      <tr>
+        <th><%= Spree.t(:card_number) %>:</th>
+        <td><%= payment.source.display_number %></td>
+      </tr>
+      <tr>
+        <th><%= Spree.t(:expiration) %>:</th>
+        <td><%= payment.source.month %>/<%= payment.source.year %></td>
+      </tr>
+    </table>
+  </div>
 </fieldset>

data/app/views/spree/admin/payments/source_views/_storecredit.html.erb

@@ -1,29 +1,31 @@
 <fieldset data-hook="store_credit">
   <legend><%= Spree.t(:store_credit_name) %></legend>
-  <table class="table table-condensed table-bordered">
-    <tr>
-      <th width="20%"><%= Spree.t(:used) %>:</th>
-      <td><%= payment.source.display_amount_used %></td>
-    </tr>
-    <tr>
-      <th><%= Spree.t(:amount) %>:</th>
-      <td><%= payment.source.display_amount %></td>
-    </tr>
-    <tr>
-      <th><%= Spree.t(:memo) %>:</th>
-      <td><%= payment.source.memo %></td>
-    </tr>
-    <tr>
-      <th><%= Spree.t(:type) %>:</th>
-      <td><%= payment.source.category_name %></td>
-    </tr>
-    <tr>
-      <th><%= Spree.t(:created_by) %>:</th>
-      <td><%= payment.source.created_by_email %></td>
-    </tr>
-    <tr>
-      <th><%= Spree.t(:issued_on) %>:</th>
-      <td><%= pretty_time(payment.source.created_at) %></td>
-    </tr>
-  </table>
+  <div class="table-responsive">
+    <table class="table table-condensed table-bordered">
+      <tr>
+        <th width="20%"><%= Spree.t(:used) %>:</th>
+        <td><%= payment.source.display_amount_used %></td>
+      </tr>
+      <tr>
+        <th><%= Spree.t(:amount) %>:</th>
+        <td><%= payment.source.display_amount %></td>
+      </tr>
+      <tr>
+        <th><%= Spree.t(:memo) %>:</th>
+        <td><%= payment.source.memo %></td>
+      </tr>
+      <tr>
+        <th><%= Spree.t(:type) %>:</th>
+        <td><%= payment.source.category_name %></td>
+      </tr>
+      <tr>
+        <th><%= Spree.t(:created_by) %>:</th>
+        <td><%= payment.source.created_by_email %></td>
+      </tr>
+      <tr>
+        <th><%= Spree.t(:issued_on) %>:</th>
+        <td><%= pretty_time(payment.source.created_at) %></td>
+      </tr>
+    </table>
+  </div>
 </fieldset>

data/app/views/spree/admin/prices/_variant_prices.html.erb

@@ -0,0 +1,43 @@
+<div class="panel-body no-padding-bottom panel-default  table-responsive">
+  <div id="variant_prices-table-wrapper">
+    <table class="table sortable">
+      <colgroup>
+        <col style="width: 15%" />
+        <col style="width: 30%" />
+        <col style="width: 15%" />
+        <col style="width: 20%" />
+        <col style="width: 20%" />
+      </colgroup>
+      <thead>
+        <tr data-hook="variant_prices_header">
+          <th><%= Spree.t(:options) %></th>
+          <th><%= Spree.t(:sku) %></th>
+          <th><%= Spree.t(:currency) %></th>
+          <th><%= Spree.t(:price) %></th>
+          <th><%= Spree.t(:compare_at_price) %></th>
+        </tr>
+      </thead>
+      <tbody id="variant-prices" data-hook="variant_prices_body">
+        <% supported_currencies_for_all_stores.each do |currency| %>
+          <% code  = currency.iso_code %>
+          <% @product.variants_including_master.each do |variant| %>
+            <% price = variant.price_in(code) %>
+            <tr id="variant_prices_row" data-hook="variant_prices_row">
+              <td class="panel">
+                <%= variant.is_master? ? Spree.t(:master) : variant.options_text.blank? ? Spree.t(:variant) : variant.options_text %>
+              </td>
+              <td class="panel-title"><%= variant.sku %></td>
+              <td><%= label_tag "vp[#{variant.id}][#{code}]", code %></td>
+              <td>
+                <%= text_field_tag "vp[#{variant.id}][#{code}][price]", (price && price.price ? price.display_amount.money : ''), class: 'form-control' %>
+              </td>
+              <td>
+                <%= text_field_tag "vp[#{variant.id}][#{code}][compare_at_price]", (price && price.compare_at_price ? price.display_compare_at_amount.money : ''), class: 'form-control' %>
+              </td>
+            </tr>
+          <% end %>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>

data/app/views/spree/admin/prices/index.html.erb

@@ -0,0 +1,21 @@
+<%= render partial: 'spree/admin/shared/product_tabs', locals: { current: :prices } %>
+
+<% content_for :page_actions do %>
+  <%= yield :page_actions %>
+  <%= product_preview_link(@product) %>
+<% end %>
+
+<form>
+  <input class="form-control" placeholder="<%= Spree.t('variant_prices_search_placeholder') %>" type="text" id="variant-price-search"/>
+</form>
+
+<%= form_tag nil, { class: 'form-horizontal' } do %>
+  <div class="mt-3">
+    <%= render 'variant_prices', variant: @product.master %>
+  </div>
+  <div class="form-actions" data-hook="buttons">
+    <%= button Spree.t('actions.update'), 'update.svg' %>
+    <span class="or"><%= Spree.t(:or) %></span>
+    <%= button_link_to Spree.t('actions.cancel'), admin_product_path(@product), icon: 'delete.svg' %>
+  </div>
+<% end %>

data/app/views/spree/admin/product_properties/_product_property_fields.html.erb

@@ -1,19 +1,31 @@
 <tr class="product_property fields" id="spree_<%= dom_id(f.object) %>" data-hook="product_property">
+  <% if f.object.persisted? && can?(:edit, f.object) %>
   <td class="move-handle">
-    <% if f.object.persisted? && can?(:edit, f.object) %>
-      <span class="icon icon-move handle"></span>
-      <%= f.hidden_field :id %>
-    <% end %>
+    <%= svg_icon name: "sort.svg", width: '18', height: '18' %>
+    <%= f.hidden_field :id %>
+  </td>
+  <% else %>
+  <td style="opacity:0.2;">
+    <%= svg_icon name: "sort.svg", width: '18', height: '18' %>
+    <%= f.hidden_field :id %>
   </td>
+  <% end %>
   <td class='property_name'>
     <%= f.text_field :property_name, class: 'autocomplete form-control' %>
   </td>
   <td class='value'>
     <%= f.text_field :value, class: 'form-control' %>
   </td>
+  <td class="show_property">
+    <%= f.check_box :show_property %>
+  </td>
   <td class="actions actions-1">
     <% if f.object.persisted? && can?(:destroy, f.object) %>
       <%= link_to_delete f.object, no_text: true %>
+    <% else %>
+    <span class="btn btn-danger btn-sm icon-link disabled" style="opacity:0.2;">
+      <%= svg_icon name: "delete.svg", width: '18', height: '18' %>
+    </span>
     <% end %>
   </td>
 </tr>

data/app/views/spree/admin/product_properties/index.html.erb

@@ -7,36 +7,36 @@
   <%= button_link_to(
     Spree.t(:add_product_properties),
     "javascript:;",
-    { icon: 'add', :'data-target' => "tbody#product_properties", class: 'btn-success spree_add_fields' }) %>
+    { icon: 'add.svg', :'data-target' => "tbody#sortVert", class: 'btn-success spree_add_fields' }) %>
 
   <span class="js-new-ptype-link">
     <%= button_link_to Spree.t(:select_from_prototype),
       available_admin_prototypes_url,
-      { icon: 'properties', remote: true, 'data-update' => 'prototypes', class: 'btn-outline-secondary' } %>
+      { icon: 'list.svg', remote: true, 'data-update' => 'prototypes', class: 'btn-outline-secondary' } %>
   </span>
 <% end if can? :create, Spree::ProductProperty %>
 
 <%= form_for @product, url: spree.admin_product_url(@product), method: :put do |f| %>
   <fieldset>
     <div id="prototypes" data-hook></div>
-
-    <table class="table sortable" data-hook data-sortable-link="<%= update_positions_admin_product_product_properties_url %>">
-      <thead>
-        <tr data-hook="product_properties_header">
-          <th colspan="2"><%= Spree.t(:property) %></th>
-          <th><%= Spree.t(:value) %></th>
-          <th class="actions"></th>
-        </tr>
-      </thead>
-      <tbody id="product_properties" data-hook>
-        <%= f.fields_for :product_properties do |pp_form| %>
-          <%= render 'product_property_fields', f: pp_form %>
-        <% end %>
-      </tbody>
-    </table>
-
+    <div class=" table-responsive">
+      <table id="product_properties" class="table sortable" data-hook data-sortable-link="<%= update_positions_admin_product_product_properties_url %>">
+        <thead>
+          <tr data-hook="product_properties_header">
+            <th colspan="2"><%= Spree.t(:property) %></th>
+            <th><%= Spree.t(:value) %></th>
+            <th><%= Spree.t(:show_property) %></th>
+            <th class="actions"></th>
+          </tr>
+        </thead>
+        <tbody id="sortVert">
+          <%= f.fields_for :product_properties do |pp_form| %>
+            <%= render 'product_property_fields', f: pp_form %>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
     <%= render('spree/admin/shared/edit_resource_links') if can? :update, Spree::ProductProperty %>
-
     <%= hidden_field_tag 'clear_product_properties', 'true' %>
   </fieldset>
 <% end %>
@@ -51,3 +51,8 @@
     }
   });
 <% end %>
+
+
+<style>
+  div.ui-helper-hidden-accessible {display:none;}
+</style>

data/app/views/spree/admin/products/_add_stock_form.html.erb

@@ -39,7 +39,7 @@
     </div>
 
     <div class="form-actions text-center" data-hook="buttons">
-      <%= button Spree.t(:add_stock), 'plus' %>
+      <%= button Spree.t(:add_stock), 'add.svg' %>
     </div>
   <% end %>
 </div>

data/app/views/spree/admin/products/_autocomplete.js.erb

@@ -1,25 +1,31 @@
 <script type='text/template' id='product_template'>
-  <li id='product_{{ product.id }}' data-product-id='{{ product.id }}' data-taxons="{{ product.taxon_ids }}" class='product'>
-    <a class="sort-handle js-sort-handle"><span class="icon icon-move"></span></a>
-    <div class="btn-group">
-      <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-        <span class="caret"></span>
-      </button>
-      <ul class="dropdown-menu" role="menu" data-hook="taxon_product_dropdown">
-        <li><a href="{{ edit_product_url product.id }}" class="edit-product js-edit-product"><%= Spree.t(:edit) %></a></li>
-        <li><a href="javascript:;" class="delete-product js-delete-product"><%= Spree.t(:delete_from_taxon) %></a></li>
-      </ul>
-    </div>
-    <div class='image'>
-      {{#if product.image }}
-        <img src='{{product.image}}' alt='{{ product.name }}' class='thumbnail' />
-      {{ else }}
-        <img src='<%= image_path("noimage/small.png") %>' alt='{{product.name }}' class='thumbnail' />
-      {{/if}}
-    </div>
-    <div class="product-info">
-      <div class="name">{{ product.name }}</div>
-      <div class="price">{{ product.display_price }}</div>
+  <li id="product_{{ product.id }}" data-product-id='{{ product.id }}' data-taxons="{{ product.taxon_ids }}" class="product p-2 col-6 col-md-3 col-lg-2">
+    <div class="m-1 p-2 card bg-light">
+      <nav class="navbar navbar-light bg-light justify-content-between px-0 pt-0" style="background-color:transparent !important;">
+        <a class=" sort-handle js-sort-handle">
+          <%= svg_icon name: "move.svg", width: '22', height: '22' %>
+        </a>
+        <div class="dropdown ">
+          <button class="btn btn-outline-secondary dropdown-toggle products-ddb btn-sm" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <%= svg_icon name: "chevron-down.svg", width: '18', height: '18' %>
+          </button>
+          <div class="dropdown-menu dropdown-menu-right p-0 mt-1" aria-labelledby="dropdownMenuButton">
+            <a href="{{ edit_product_url product.id }}" class="edit-product js-edit-product dropdown-item p-1"><%= Spree.t(:edit) %></a>
+            <a href="javascript:;" class="delete-product js-delete-product dropdown-item p-1"><%= Spree.t(:remove) %></a>
+          </div>
+        </div>
+      </nav>
+      <div class='image'>
+        {{#if product.image }}
+          <img src='{{product.image}}' alt='{{ product.name }}' class='thumbnail rounded border border' />
+        {{ else }}
+          <img src='<%= image_path("noimage/small.png") %>' alt='{{product.name }}' class='thumbnail' />
+        {{/if}}
+      </div>
+      <div class="p-0 pt-1 text-center product-info">
+        <p class="name card-text">{{ product.name }}</p>
+        <p class="price card-text">{{ product.display_current_currency_price }}</p>
+      </div>
     </div>
   </li>
 </script>

data/app/views/spree/admin/products/_form.html.erb

@@ -38,6 +38,14 @@
         <% end %>
       </div>
 
+      <div>
+        <%= f.field_container :compare_at_price, class: ['form-group'] do %>
+          <%= f.label :compare_at_price, Spree.t(:compare_at_price) %>
+          <%= f.text_field :compare_at_price, value: number_to_currency(@product.compare_at_price, unit: ''), class: 'form-control' %>
+          <%= f.error_message_on :compare_at_price %>
+        <% end %>
+      </div>
+
       <div data-hook="admin_product_form_cost_price" class="alpha two columns">
         <%= f.field_container :cost_price, class: ['form-group'] do %>
           <%= f.label :cost_price, Spree.t(:cost_price) %>
@@ -57,23 +65,48 @@
         <%= f.field_container :available_on, class: ['form-group'] do %>
           <%= f.label :available_on, Spree.t(:available_on) %>
           <%= f.error_message_on :available_on %>
-          <%= f.text_field :available_on, value: datepicker_field_value(@product.available_on), class: 'datepicker form-control' %>
+
+          <div class="input-group datePickerFrom"
+               data-wrap="true"
+               data-max-date="<%= @product.discontinue_on %>" >
+
+            <%= f.text_field :available_on,
+                             value: datepicker_field_value(@product.available_on),
+                             placeholder: Spree.t(:select_a_date),
+                             class: 'form-control shadow-none ',
+                             'data-input':'' %>
+
+            <%= render partial: 'spree/admin/shared/cal_close' %>
+          </div>
         <% end %>
       </div>
 
+
       <div data-hook="admin_product_form_discontinue_on">
         <%= f.field_container :discontinue_on, class: ['form-group'] do %>
           <%= f.label :discontinue_on, Spree.t(:discontinue_on) %>
           <%= f.error_message_on :discontinue_on %>
-          <%= f.text_field :discontinue_on, value: datepicker_field_value(@product.discontinue_on), class: 'datepicker form-control' %>
+
+          <div class="input-group datePickerTo"
+               data-wrap="true"
+               data-min-date="<%= @product.available_on %>" >
+
+            <%= f.text_field :discontinue_on,
+                              value: datepicker_field_value(@product.discontinue_on),
+                              placeholder: Spree.t(:select_a_date),
+                              class: 'form-control shadow-none ',
+                              'data-input':'' %>
+
+            <%= render partial: 'spree/admin/shared/cal_close' %>
+          </div>
         <% end %>
       </div>
 
       <div data-hook="admin_product_form_promotionable">
         <%= f.field_container :promotionable, class: ['form-group'] do %>
+          <%= f.check_box :promotionable %>
           <%= f.label :promotionable, Spree.t(:promotionable) %>
           <%= f.error_message_on :promotionable %>
-          <%= f.check_box :promotionable, class: 'form-control' %>
         <% end %>
       </div>
 
@@ -87,10 +120,9 @@
       <% if @product.has_variants? %>
         <div data-hook="admin_product_form_multiple_variants" class="card bg-light mb-3">
           <div class="card-body">
-            <%= f.label :skus, Spree.t(:sku).pluralize %>
-            <div class="info marginb">
-              <%= Spree.t(:info_product_has_multiple_skus, count: @product.variants.size) %>
-              <ul class="text_list">
+          <h5 class="card-title"><%= f.label :skus, Spree.t(:sku).pluralize %></h5>
+              <h6 class="card-subtitle mb-2 text-muted"><%= Spree.t(:info_product_has_multiple_skus, count: @product.variants.size) %> </h6>
+              <ul class="list-unstyled">
                 <% @product.variants.first(5).each do |variant| %>
                   <li><%= variant.sku %></li>
                 <% end %>
@@ -100,10 +132,9 @@
                   <%= Spree.t(:info_number_of_skus_not_shown, count: @product.variants.size - 5) %>
                 </em>
               <% end %>
-            </div>
             <div class="info-actions">
               <% if can?(:admin, Spree::Variant) %>
-                <%= link_to_with_icon 'variants', Spree.t(:manage_variants), spree.admin_product_variants_url(@product), class: "btn btn-outline-secondary" %>
+                <%= link_to_with_icon 'adjust.svg', Spree.t(:manage_variants), spree.admin_product_variants_url(@product), class: "btn btn-outline-secondary" %>
               <% end %>
             </div>
           </div>

data/app/views/spree/admin/products/edit.html.erb

@@ -1,7 +1,7 @@
 <% content_for :page_actions do %>
   <%= product_preview_link(@product) %>
   <% if can?(:create, Spree::Product) %>
-    <%= button_link_to Spree.t(:new_product), new_object_url, { class: "btn-success", icon: 'add', id: 'admin_new_product' } %>
+    <%= button_link_to Spree.t(:new_product), new_object_url, { class: "btn-success", icon: 'add.svg', id: 'admin_new_product' } %>
   <% end %>
 <% end %>
 

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

@@ -3,7 +3,7 @@
 <% end %>
 
 <% content_for :page_actions do %>
-  <%= button_link_to Spree.t(:new_product), new_object_url, { class: "btn-success", icon: 'add', id: 'admin_new_product' } %>
+  <%= button_link_to Spree.t(:new_product), new_object_url, { class: "btn-success", icon: 'add.svg', id: 'admin_new_product' } %>
 <% end if can?(:create, Spree::Product) %>
 
 <% content_for :table_filter do %>
@@ -14,8 +14,8 @@
       <div data-hook="admin_products_index_search" class="row">
         <div class="col-12 col-lg-6">
           <div class="form-group">
-            <%= f.label :name_cont, Spree.t(:name) %>
-            <%= f.text_field :name_cont, size: 15, class: "form-control js-quick-search-target js-filterable" %>
+            <%= f.label :search_by_name, Spree.t(:name) %>
+            <%= f.text_field :search_by_name, size: 15, class: "form-control js-quick-search-target js-filterable" %>
           </div>
         </div>
         <div class="col-12 col-lg-6">
@@ -41,46 +41,51 @@
         </div>
       </div>
       <div data-hook="admin_products_index_search_buttons" class="form-actions">
-        <%= button Spree.t(:search), 'search' %>
+        <%= button Spree.t(:search), 'search.svg' %>
       </div>
     <% end %>
 
   </div>
 <% end %>
 
-<%= render partial: 'spree/admin/shared/index_table_options', locals: { collection: @collection } %>
-
 <% if @collection.any? %>
+<div class="table-responsive">
   <table class="table" id="listing_products">
     <thead>
       <tr data-hook="admin_products_index_headers">
-        <th><%= Spree.t(:sku) %></th>
-        <th><%= Spree.t(:status) %></th>
-
-        <th colspan="2"><%= sort_link @search,:name, Spree.t(:name), { default_order: "desc" }, {title: 'admin_products_listing_name_title'} %></th>
-        <th class="text-center">
+        <th scope="col" colspan="2"><%= sort_link @search,:name, Spree.t(:name), { default_order: "desc" }, {title: 'admin_products_listing_name_title'} %></th>
+        <th scope="col"><%= Spree.t(:sku) %></th>
+        <th scope="col"><%= Spree.t(:status) %></th>
+        <th scope="col" class="text-center">
           <%= sort_link @search, :master_default_price_amount, Spree.t(:master_price), {}, {title: 'admin_products_listing_price_title'} %>
         </th>
-        <th data-hook="admin_products_index_header_actions" class="actions"></th>
+        <th scope="col" data-hook="admin_products_index_header_actions" class="actions"></th>
       </tr>
     </thead>
     <tbody>
       <% @collection.each do |product| %>
           <tr <%== "style='color: red;'" if product.deleted? %> id="<%= spree_dom_id product %>" data-hook="admin_products_index_rows" class="<%= cycle('odd', 'even') %>">
+            <td scope="row" class="image">
+              <%= link_to edit_admin_product_path(product) do %>
+                <%= mini_image product %>
+              <% end %>
+            </td>
+            <td><%= link_to product.try(:name), edit_admin_product_path(product) %></td>
             <td class="sku"><%= product.sku rescue '' %></td>
             <td class="status"><%= available_status(product) %> </td>
-            <td class="image"><%= mini_image product %></td>
-            <td><%= link_to product.try(:name), edit_admin_product_path(product) %></td>
-            <td class="text-center"><%= product.display_price.to_html rescue '' %></td>
-            <td class="actions actions-3 text-right" data-hook="admin_products_index_row_actions">
-              <%= link_to_edit product, no_text: true, class: 'edit' if can?(:edit, product) && !product.deleted? %>
-              <%= link_to_clone product, no_text: true, class: 'clone' if can?(:clone, product) %>
-              <%= link_to_delete product, no_text: true if can?(:delete, product) && !product.deleted? %>
+            <td class="text-center"><%= display_price(product) %></td>
+            <td class="actions " data-hook="admin_products_index_row_actions">
+              <span class="d-flex">
+                <%= link_to_edit product, no_text: true, class: 'edit' if can?(:edit, product) && !product.deleted? %>
+                <%= link_to_clone product, no_text: true, class: 'clone' if can?(:clone, product) %>
+                <%= link_to_delete product, no_text: true if can?(:delete, product) && !product.deleted? %>
+              </span>
             </td>
           </tr>
       <% end %>
     </tbody>
   </table>
+</div>
 <% else %>
   <div class="alert alert-info no-objects-found">
     <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::Product)) %>,