Add available for product

Gemfile

@@ -57,7 +57,7 @@ gem 'vacuum'
 gem "breadcrumbs_on_rails"
 gem 'momentjs-rails', '>= 2.8.1'
 gem 'bootstrap3-datetimepicker-rails', '~> 4.7.14'
-gem 'draper', '~> 1.3'
+gem 'draper', '~> 1.3' # decorator gem
 gem 'rsolr'
 gem 'validates_timeliness', '~> 3.0'
 gem "pundit" # verify role
@@ -90,6 +90,6 @@ group :development, :test do
   gem 'rspec-mocks'
   gem 'rspec-rails', '~> 3.0.1'
   gem 'rspec-support'
-  gem "pry"
+  gem "pry" # debug
   gem "quiet_assets"
 end
\ No newline at end of file

app/assets/stylesheets/components/products.css.scss

@@ -24,4 +24,13 @@
   .desc{
     clear: both;
   }
+}
+
+.available, .out-stock{
+  clear: both;
+  display: block;
+  color: green;
+}
+.out-stock{
+  color: rgb(255, 60, 60);
 }
\ No newline at end of file

app/assets/stylesheets/components/responsive.css.scss

@@ -2,4 +2,9 @@
   .xs-mar-top-10{
     margin-top:10px!important;
   }
+  .products{
+    .price{
+      padding-left: 76px;
+    }
+  }
 }
\ No newline at end of file

app/decorators/product_decorator.rb

+class ProductDecorator < Draper::Decorator
+  include Draper::LazyHelpers
+
+  def available_stock
+    klass = object.stock > 0 ? 'available' : 'out-stock'
+    h.content_tag(:b, "(#{object.stock} available)", class: klass)
+  end
+end
+

app/views/products/_item.html.slim

@@ -2,6 +2,8 @@
   .col-lg-9
     .wrap-img.mar-r-10
       = image_tag product.image.thumb('51x32#').url
-    .title= link_to product.title, product_path(product)
-  .col-lg-3
+    .title
+      = link_to product.title, product_path(product)
+      = product.decorate.available_stock
+  .col-lg-3.price
     = "Price: #{currency_number(product.currency, product.price)}"

app/views/products/_recommend_item.html.slim

 .col-sm-4.text-center
   = link_to product.title, product_path(product)
+  = product.decorate.available_stock
   br
   = image_tag product.image.thumb('71x38>').url
\ No newline at end of file