spree_backend 4.1.1 → 4.5.0

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

@@ -1,25 +1,35 @@
 <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-classification-id='{{ classification.id }}' data-product-id='{{ product.id }}' 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 p-0">
+          <button class="btn btn-light 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-2" 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 image }}
+          <div class="admin-product-image-container">
+            <img src='{{image}}' alt='{{ product.attributes.name }}' class='thumbnail rounded border border' />
+          </div>
+        {{ else }}
+          <div class="admin-product-image-container">
+            <%= inline_svg_tag "noimage/backend-missing-image.svg", class: "noimage", size: "60%*60%" %>
+          </div>
+        {{/if}}
+      </div>
+      <div class="p-0 pt-3 text-center product-info">
+        <h6 class="name card-text">{{ product.attributes.name }}</h6>
+        <p class="price card-text">{{ product.attributes.display_price }}</p>
+      </div>
     </div>
   </li>
 </script>

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

@@ -0,0 +1,31 @@
+<div data-hook="admin_products_sidebar">
+
+  <%= search_form_for [:admin, @search] do |f| %>
+    <div data-hook="admin_products_index_search" class="row">
+      <div class="col-12 col-lg-6">
+        <div class="form-group">
+          <%= f.label :search_by_name, Spree.t(:product_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">
+        <div class="form-group">
+          <%= f.label :variants_including_master_sku_cont, Spree.t(:sku) %>
+          <%= f.text_field :variants_including_master_sku_cont, size: 15, class: "form-control js-filterable" %>
+        </div>
+      </div>
+      <div class="col-12">
+        <%= f.field_container :deleted_at_null do %>
+          <div class="custom-control custom-checkbox">
+            <%= f.check_box :deleted_at_null, {checked: params[:q][:deleted_at_null] == '0', class: 'custom-control-input'}, '0', '1' %>
+            <%= f.label :deleted_at_null, Spree.t(:show_deleted), class: 'custom-control-label' %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <div data-hook="admin_products_index_search_buttons" class="form-actions">
+      <%= button Spree.t(:search), 'search.svg' %>
+    </div>
+  <% end %>
+
+</div>

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

@@ -1,11 +1,9 @@
-
-<div data-hook="admin_product_form_fields">
-
+<div data-hook="admin_product_form_fields" data-controller="product-edit">
   <div class="row">
 
     <div class="col-12 col-md-8" data-hook="admin_product_form_left">
       <div data-hook="admin_product_form_name">
-        <%= f.field_container :name, class: ['form-group'] do %>
+        <%= f.field_container :name do %>
           <%= f.label :name, raw(Spree.t(:name) + required_span_tag) %>
           <%= f.text_field :name, class: 'form-control title' %>
           <%= f.error_message_on :name %>
@@ -13,7 +11,7 @@
       </div>
 
       <div data-hook="admin_product_form_slug">
-        <%= f.field_container :slug, class: ['form-group'] do %>
+        <%= f.field_container :slug do %>
           <%= f.label :slug, raw(Spree.t(:slug) + required_span_tag) %>
           <%= f.text_field :slug, class: 'form-control title' %>
           <%= f.error_message_on :slug %>
@@ -21,64 +19,154 @@
       </div>
 
       <div data-hook="admin_product_form_description">
-        <%= f.field_container :description, class: ['form-group'] do %>
+        <%= f.field_container :description do %>
           <%= f.label :description, Spree.t(:description) %>
-          <%= f.text_area :description, { rows: "#{unless @product.has_variants? then '20' else '13' end}", class: 'form-control' } %>
+          <%= f.text_area :description, { rows: "#{unless @product.has_variants? then '29' else '30' end}", class: "form-control #{"spree-rte" if product_wysiwyg_editor_enabled? }" } %>
           <%= f.error_message_on :description %>
         <% end %>
       </div>
     </div>
 
     <div class="col-12 col-md-4" data-hook="admin_product_form_right">
+      <div data-hook="new_product_status">
+        <%= f.field_container :status do %>
+          <%= f.label :status, Spree.t(:status) %>
+          <% options = ['draft', 'active', 'archived'] %>
+          <% options.delete('active') if cannot? :activate, @product %>
+          <% select_html = { class: 'select2',
+                             data: {
+                               action: 'change->product-edit#switchAvailabilityDatesFields',
+                               'product-edit-target': 'status'
+                             } } %>
+          <%= f.select(:status, options.each_slice(1), { selected: @product.status }, select_html) %>
+          <%= f.error_message_on :status %>
+        <% end %>
+      </div>
+
+      <div data-hook="admin_product_form_available_on" data-product-edit-target="availableOn">
+        <%= f.field_container :available_on do %>
+          <%= f.label :available_on, Spree.t(:available_on) %>
+          <%= f.error_message_on :available_on %>
+
+          <div class="input-group datePickerFrom"
+               data-wrap="true"
+               data-alt-format="<%= Spree.t(:fpr_human_friendly_date_format, scope: 'date_picker', default: 'M j, Y') %>"
+               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 ',
+                             'data-input':'' %>
+
+            <%= render partial: 'spree/admin/shared/cal_close' %>
+          </div>
+        <% end %>
+      </div>
+
+      <% if can?(:activate, @product) %>
+        <div data-hook="admin_product_form_make_active_at" data-product-edit-target="makeActiveAt">
+          <%= f.field_container :make_active_at do %>
+            <%= f.label :make_active_at, Spree.t(:make_active_at) %>
+            <%= f.error_message_on :make_active_at %>
+
+            <div class="input-group datePickerFrom"
+                 data-wrap="true"
+                 data-alt-format="<%= Spree.t(:fpr_human_friendly_date_format, scope: 'date_picker', default: 'M j, Y') %>"
+                 data-max-date="<%= @product.discontinue_on %>">
+
+              <%= f.text_field :make_active_at,
+                               value: datepicker_field_value(@product.make_active_at),
+                               placeholder: Spree.t(:select_a_date),
+                               class: 'form-control ',
+                               'data-input':'' %>
+
+              <%= render partial: 'spree/admin/shared/cal_close' %>
+            </div>
+          <% end %>
+        </div>
+      <% else %>
+        <div data-hook="admin_product_form_make_active_at">
+          <%= f.field_container :make_active_at do %>
+            <%= f.label :make_active_at, Spree.t(:make_active_at) %>
+            <%= f.text_field :make_active_at, value: datepicker_field_value(@product.make_active_at), class: 'form-control', disabled: true %>
+            <%= f.error_message_on :make_active_at %>
+          <% end %>
+        </div>
+      <% end %>
+
+      <div data-hook="admin_product_form_discontinue_on" data-product-edit-target="discontinueOn">
+        <%= f.field_container :discontinue_on do %>
+          <%= f.label :discontinue_on, Spree.t(:discontinue_on) %>
+          <%= f.error_message_on :discontinue_on %>
+
+          <div class="input-group datePickerTo"
+               data-wrap="true"
+               data-alt-format="<%= Spree.t(:fpr_human_friendly_date_format, scope: 'date_picker', default: 'M j, Y') %>"
+               data-min-date="<%= @product.make_active_at %>">
+
+            <%= f.text_field :discontinue_on,
+                             value: datepicker_field_value(@product.discontinue_on),
+                             placeholder: Spree.t(:select_a_date),
+                             class: 'form-control ',
+                             'data-input':'' %>
+
+            <%= render partial: 'spree/admin/shared/cal_close' %>
+          </div>
+        <% end %>
+      </div>
+
       <div data-hook="admin_product_form_price">
-        <%= f.field_container :price, class: ['form-group'] do %>
+        <%= f.field_container :price do %>
           <%= f.label :price, raw(Spree.t(:master_price) + required_span_tag) %>
-          <%= f.text_field :price, value: number_to_currency(@product.price, unit: ''), class: 'form-control', disabled: (cannot? :update, @product.master.default_price) %>
+          <div class="input-group">
+            <div class="input-group-prepend">
+              <span class="input-group-text"><%= currency_symbol(current_currency) %></span>
+            </div>
+            <%= f.text_field :price, value: number_to_currency(@product.amount_in(current_currency), unit: ''), class: 'form-control', disabled: (cannot? :update, @product.master.default_price) %>
+          </div>
           <%= f.error_message_on :price %>
         <% end %>
       </div>
 
+      <div>
+        <%= f.field_container :compare_at_price do %>
+          <%= f.label :compare_at_price, Spree.t(:compare_at_price) %>
+          <div class="input-group">
+            <div class="input-group-prepend">
+              <span class="input-group-text"><%= currency_symbol(current_currency) %></span>
+            </div>
+            <%= f.text_field :compare_at_price, value: number_to_currency(@product.compare_at_amount_in(current_currency), unit: ''), class: 'form-control' %>
+          </div>
+          <%= 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.field_container :cost_price do %>
           <%= f.label :cost_price, Spree.t(:cost_price) %>
           <%= f.text_field :cost_price, value: number_to_currency(@product.cost_price, unit: ''), class: 'form-control' %>
           <%= f.error_message_on :cost_price %>
         <% end %>
       </div>
       <div data-hook="admin_product_form_cost_currency" class="omega two columns">
-        <%= f.field_container :cost_currency, class: ['form-group'] do %>
+        <%= f.field_container :cost_currency do %>
           <%= f.label :cost_currency, Spree.t(:cost_currency) %>
-          <%= f.text_field :cost_currency, class: 'form-control' %>
+          <%= f.select :cost_currency, currency_options(@product.cost_currency), {}, { class: 'select2' } %>
           <%= f.error_message_on :cost_currency %>
         <% end %>
       </div>
 
-      <div data-hook="admin_product_form_available_on">
-        <%= 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' %>
-        <% 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' %>
-        <% end %>
-      </div>
-
       <div data-hook="admin_product_form_promotionable">
-        <%= f.field_container :promotionable, class: ['form-group'] do %>
+        <%= f.field_container :promotionable 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>
 
       <div data-hook="admin_product_form_sku">
-        <%= f.field_container :master_sku, class: ['form-group'] do %>
+        <%= f.field_container :master_sku do %>
           <%= f.label :master_sku, Spree.t(:master_sku) %>
           <%= f.text_field :sku, size: 16, class: 'form-control' %>
         <% end %>
@@ -87,10 +175,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 +187,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-light" %>
               <% end %>
             </div>
           </div>
@@ -141,7 +227,7 @@
       <% end %>
 
       <div data-hook="admin_product_form_shipping_categories">
-        <%= f.field_container :shipping_category, class: ['form-group'] do %>
+        <%= f.field_container :shipping_category do %>
           <%= f.label :shipping_category_id, Spree.t(:shipping_category) %>
           <%= f.collection_select(:shipping_category_id, @shipping_categories, :id, :name, { include_blank: Spree.t('match_choices.none') }, { class: 'select2' }) %>
           <%= f.error_message_on :shipping_category %>
@@ -149,7 +235,7 @@
       </div>
 
       <div data-hook="admin_product_form_tax_category">
-        <%= f.field_container :tax_category, class: ['form-group'] do %>
+        <%= f.field_container :tax_category do %>
           <%= f.label :tax_category_id, Spree.t(:tax_category) %>
           <%= f.collection_select(:tax_category_id, @tax_categories, :id, :name, { include_blank: Spree.t('match_choices.none') }, { class: 'select2' }) %>
           <%= f.error_message_on :tax_category %>
@@ -160,11 +246,16 @@
   </div>
 
   <div data-hook="admin_product_form_taxons">
-    <%= f.field_container :taxons, class: ['form-group'] do %>
+    <%= f.field_container :taxons do %>
       <%= f.label :taxon_ids, Spree.t(:taxons) %>
 
       <% if can? :modify, Spree::Classification %>
-        <%= f.hidden_field :taxon_ids, value: @product.taxon_ids.join(',') %>
+        <%= f.select :taxon_ids, options_from_collection_for_select(@product.taxons, :id, :pretty_name, @product.taxon_ids),
+                                  { include_hidden: true },
+                                    multiple: true,
+                                    data: { autocomplete_url_value: 'taxons_api_v2',
+                                            autocomplete_return_attr_value: 'pretty_name',
+                                            autocomplete_multiple_value: true } %>
       <% elsif @product.taxons.any? %>
         <ul class="text_list">
           <% @product.taxons.each do |taxon| %>
@@ -179,11 +270,16 @@
   </div>
 
   <div data-hook="admin_product_form_option_types">
-    <%= f.field_container :option_types, class: ['form-group'] do %>
+    <%= f.field_container :option_types do %>
       <%= f.label :option_type_ids, Spree.t(:option_types) %>
 
       <% if can? :modify, Spree::ProductOptionType %>
-        <%= f.hidden_field :option_type_ids, value: @product.option_type_ids.join(',') %>
+      <%= f.select :option_type_ids, options_from_collection_for_select(@product.option_types, :id, :name, @product.option_type_ids),
+                                      { include_hidden: true },
+                                        multiple: true,
+                                        data: { autocomplete_url_value: 'option_types_api_v2',
+                                                autocomplete_return_attr_value: 'name',
+                                                autocomplete_multiple_value: true } %>
       <% elsif @product.option_types.any? %>
         <ul class="text_list">
           <% @product.option_types.each do |type| %>
@@ -197,25 +293,34 @@
     <% end %>
   </div>
 
+  <% if @stores.count > 1 %>
+    <div data-hook="admin_product_form_stores">
+      <%= f.field_container :stores do %>
+        <%= f.label :product_stores, Spree.t(:stores) %>
+        <%= collection_select(:product, :store_ids, @stores, :id, :unique_name, {}, { multiple: true, class: 'select2' }) %>
+      <% end %>
+    </div>
+  <% end %>
+
   <div data-hook="admin_product_form_meta">
     <div data-hook="admin_product_form_meta_title">
-      <%= f.field_container :meta_title, class: ['form-group'] do %>
+      <%= f.field_container :meta_title do %>
         <%= f.label :meta_title, Spree.t(:meta_title) %>
         <%= f.text_field :meta_title, class: 'form-control' %>
       <% end %>
     </div>
 
     <div data-hook="admin_product_form_meta_keywords">
-      <%= f.field_container :meta_keywords, class: ['form-group'] do %>
+      <%= f.field_container :meta_keywords do %>
         <%= f.label :meta_keywords, Spree.t(:meta_keywords) %>
         <%= f.text_field :meta_keywords, class: 'form-control' %>
       <% end %>
     </div>
 
     <div data-hook="admin_product_form_meta_description">
-      <%= f.field_container :meta_description, class: ['form-group'] do %>
+      <%= f.field_container :meta_description do %>
         <%= f.label :meta_description, Spree.t(:meta_description) %>
-        <%= f.text_field :meta_description, class: 'form-control' %>
+        <%= f.text_area :meta_description, class: 'form-control' %>
       <% end %>
     </div>
 

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

@@ -1,8 +1,5 @@
 <% 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' } %>
-  <% end %>
+  <%= external_page_preview_link(@product) %>
 <% end %>
 
 <%= render partial: 'spree/admin/shared/product_tabs', locals: {current: :details} %>

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

@@ -3,86 +3,98 @@
 <% 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 %>
-  <div data-hook="admin_products_sidebar">
-
-    <%= search_form_for [:admin, @search] do |f| %>
-      <%- locals = {f: f} %>
-      <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" %>
-          </div>
-        </div>
-        <div class="col-12 col-lg-6">
-          <div class="form-group">
-            <%= f.label :variants_including_master_sku_cont, Spree.t(:sku) %>
-            <%= f.text_field :variants_including_master_sku_cont, size: 15, class: "form-control js-filterable" %>
-          </div>
-        </div>
-        <div class="col-12">
-          <div class="field checkbox mb-2">
-            <label>
-              <%= f.check_box :deleted_at_null, {checked: params[:q][:deleted_at_null] == '0'}, '0', '1' %>
-              <%= Spree.t(:show_deleted) %>
-            </label>
-          </div>
-
-          <div class="field checkbox mb-2">
-            <label>
-              <%= f.check_box :not_discontinued, {checked: params[:q][:not_discontinued] == '0'}, '0', '1' %>
-              <%= Spree.t(:show_discontinued ) %>
-            </label>
-          </div>
-        </div>
-      </div>
-      <div data-hook="admin_products_index_search_buttons" class="form-actions">
-        <%= button Spree.t(:search), 'search' %>
-      </div>
-    <% end %>
+<% content_for :page_tabs do %>
+  <li class="nav-item">
+    <%= link_to Spree.t('admin.product.all'),
+                spree.admin_products_path,
+                class: "nav-link #{'active' if params[:q][:status_eq].blank?}" %>
+  </li>
+  <li class="nav-item">
+    <%= link_to Spree.t('admin.product.active'),
+                params.merge({q: {status_eq: :active}}).permit!,
+                class: "nav-link #{'active' if params[:q][:status_eq] == 'active'}" %>
+  </li>
+  <li class="nav-item">
+    <%= link_to Spree.t('admin.product.draft'),
+                params.merge({q: {status_eq: :draft}}).permit!,
+                class: "nav-link #{'active' if params[:q][:status_eq] == 'draft'}" %>
+  </li>
+  <li class="nav-item">
+    <%= link_to Spree.t('admin.product.archived'),
+                params.merge({q: {status_eq: :archived}}).permit!,
+                class: "nav-link #{'active' if params[:q][:status_eq] == 'archived'}" %>
+  </li>
+<% end  %>
 
-  </div>
+<% content_for :table_filter do %>
+  <%= render partial: 'filters' %>
 <% end %>
 
-<%= render partial: 'spree/admin/shared/index_table_options', locals: { collection: @collection } %>
-
 <% if @collection.any? %>
+<div class="table-responsive border rounded bg-white">
   <table class="table" id="listing_products">
-    <thead>
+    <thead class="text-muted">
       <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">
-          <%= sort_link @search, :master_default_price_amount, Spree.t(:master_price), {}, {title: 'admin_products_listing_price_title'} %>
+        <th scope="col" class="pl-5" colspan="2"><%= sort_link @search,:name, Spree.t(:name), { default_order: "desc" }, {title: 'admin_products_listing_name_title'} %></th>
+        <% if defined?(Spree::Vendor) && can?(:manage, Spree::Vendor) %>
+          <th scope="col" class="text-center"><%= Spree.t(:vendor) %></th>
+        <% end %>
+        <th scope="col" class="text-center"><%= Spree.t('admin.kind') %></th>
+        <th scope="col" class="text-center"><%= Spree.t(:status) %></th>
+        <th scope="col" class="text-center" class="text-center">
+          <%= sort_link @search, :master_default_price_amount, Spree.t(:price), {}, {title: 'admin_products_listing_price_title'} %>
         </th>
-        <th data-hook="admin_products_index_header_actions" class="actions"></th>
+        <th scope="col" class="text-center" data-hook="admin_products_index_header_actions" class="actions"></th>
       </tr>
     </thead>
     <tbody>
       <% @collection.each do |product| %>
+        <% available_status = available_status(product) %>
           <tr <%== "style='color: red;'" if product.deleted? %> id="<%= spree_dom_id product %>" data-hook="admin_products_index_rows" class="<%= cycle('odd', 'even') %>">
-            <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 scope="row" class="image">
+              <%= link_to edit_admin_product_path(product) do %>
+                <%= small_image product %>
+              <% end %>
+            </td>
+            <td>
+              <%= link_to product.name, edit_admin_product_path(product) %>
+              <br />
+              <small><%= product.sku rescue '' %></small>
+            </td>
+            <% if defined?(Spree::Vendor) && can?(:manage, Spree::Vendor) %>
+              <td class="text-center">
+                <%= link_to product.vendor.name, spree.admin_vendor_path(product.vendor_id) if product.vendor.present? %>
+              </td>
+            <% end %>
+            <td class="text-center">
+              <span class="badge badge-pill badge-light">
+                <% if product.digital? %>
+                  <%= Spree.t('admin.product_kinds.digital') %>
+                <% else %>
+                  <%= Spree.t('admin.product_kinds.physical') %>
+                <% end %>
+              </span>
+            </td>
+            <td class="status text-center"><%= active_badge(available_status == Spree.t('admin.product.active'), label: available_status) %></td>
+            <td class="text-center"><%= display_price(product) %></td>
+
+            <td class="actions " data-hook="admin_products_index_row_actions">
+              <span class="d-flex justify-content-end">
+                <%= 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">
+  <div class="text-center no-objects-found m-5">
     <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::Product)) %>,
     <%= link_to Spree.t(:add_one), new_object_url if can?(:create, Spree::Product) %>!
   </div>