Add sidebar to Import index page

app/assets/stylesheets/admin/product_import.css.scss

@@ -1,38 +1,3 @@
-.product-import-introduction {
-
-  h1, h2, h3, h4, h5, h6 {
-    margin: 1.5em 0 1em;
-  }
-
-  h6 {
-    font-size: 1em;
-  }
-
-  p {
-    margin-bottom: 1em;
-  }
-
-  span.category {
-    display: inline-block;
-    background-color: #f3f3f3;
-    padding: 0.4em 0.8em;
-    margin: 0 0.4em 0.5em 0;
-  }
-
-  table {
-
-    &.product-import-columns tr:hover td {
-      background-color: transparent;
-    }
-
-    thead th {
-      text-transform: none;
-      font-size: 100%;
-      text-align: left;
-    }
-  }
-}
-
 div.panel-section {
 
   .neutral {
@@ -315,3 +280,33 @@ div.progress-bar {
     transition: width 0.5s ease-in-out;
   }
 }
+
+#upload-sidebar {
+  float: right;
+  background-color: lighten(#eff5fc, 2.5%);
+  border: 1px solid lighten(#cee1f4, 2.5%);
+  width: 50%;
+  padding: 0 1.5em 1.5em;
+
+  h4, h5, h6, p {
+    margin: 1.25em 0 1em;
+  }
+
+  a.download {
+    display: block;
+    font-size: 1.05em;
+    margin-bottom: 0.5em;
+
+    i {
+      margin-right: 0.25em;
+    }
+  }
+
+  span.category {
+    display: inline-block;
+    background-color: lighten(#5498da, 10%);
+    color: white;
+    padding: 0.3em 0.6em;
+    margin: 0 0.4em 0.5em 0;
+  }
+}

app/controllers/admin/product_import_controller.rb

@@ -4,6 +4,12 @@ module Admin
   class ProductImportController < Spree::Admin::BaseController
     before_filter :validate_upload_presence, except: %i[index guide validate_data]
 
+    def index
+      @product_categories = Spree::Taxon.order('name ASC').pluck(:name).uniq
+      @tax_categories = Spree::TaxCategory.order('name ASC').pluck(:name)
+      @shipping_categories = Spree::ShippingCategory.order('name ASC').pluck(:name)
+    end
+
     def import
       # Save uploaded file to tmp directory
       @filepath = save_uploaded_file(params[:file])

app/views/admin/product_import/_upload_sidebar.html.haml

@@ -0,0 +1,30 @@
+#upload-sidebar
+  %h5= t('admin.product_import.index.csv_templates')
+
+  %a.download{href: '/product_list_template.csv'}
+    %i.icon-external-link
+    = t('admin.product_import.index.product_list_template')
+
+  %a.download{href: '/inventory_template.csv'}
+    %i.icon-external-link
+    = t('admin.product_import.index.inventory_template')
+
+  %h5= t('admin.product_import.index.category_values')
+
+  %p
+    %strong= t('admin.product_import.index.product_categories')
+
+  - @product_categories.each do |pc|
+    %span.category= pc
+
+  %p
+    %strong= t('admin.product_import.index.tax_categories')
+
+  - @tax_categories.each do |tc|
+    %span.category= tc
+
+  %p
+    %strong= t('admin.product_import.index.shipping_categories')
+
+  - @shipping_categories.each do |sc|
+    %span.category= sc

app/views/admin/product_import/index.html.haml

@@ -3,4 +3,6 @@
 
 = render partial: 'spree/admin/shared/product_sub_menu'
 
+= render 'upload_sidebar'
+
 = render 'upload_form'

config/locales/en.yml

@@ -470,6 +470,13 @@ en:
         inventories: Inventories
         import: Import
         upload: Upload
+        csv_templates: CSV Templates
+        product_list_template: Download Product List template
+        inventory_template: Download Inventory template
+        category_values: Available Category Values
+        product_categories: Product Categories
+        tax_categories: Tax Categories
+        shipping_categories: Shipping Categories
       import:
         review: Review
         proceed: Proceed