Quantity input in product show

Gemfile

@@ -52,6 +52,8 @@ gem 'ckeditor', '~> 4.2', '>= 4.2.3'
 gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.2'
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
+# Bootstrap TouchSpin is a mobile and touch friendly input spinner component for Bootstrap
+gem 'rails-assets-bootstrap-touchspin', source: 'https://rails-assets.org'
 
 # Use Capistrano for deployment
 # gem 'capistrano-rails', group: :development

Gemfile.lock

 GEM
   remote: https://rubygems.org/
+  remote: https://rails-assets.org/
   specs:
     actioncable (5.1.1)
       actionpack (= 5.1.1)
@@ -193,6 +194,12 @@ GEM
       bundler (>= 1.3.0, < 2.0)
       railties (= 5.1.1)
       sprockets-rails (>= 2.0.0)
+    rails-assets-bootstrap (3.3.7)
+      rails-assets-jquery (>= 1.9.1, < 4)
+    rails-assets-bootstrap-touchspin (3.1.2)
+      rails-assets-bootstrap (>= 3.0.0)
+      rails-assets-jquery (>= 1.9.0)
+    rails-assets-jquery (3.2.1)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
@@ -300,6 +307,7 @@ DEPENDENCIES
   mysql2 (>= 0.3.18, < 0.5)
   puma (~> 3.7)
   rails (~> 5.1.1)
+  rails-assets-bootstrap-touchspin!
   rubocop (~> 0.49.1)
   sass-rails (~> 5.0)
   selenium-webdriver
@@ -311,4 +319,4 @@ DEPENDENCIES
   web-console (>= 3.3.0)
 
 BUNDLED WITH
-   1.15.0
+   1.15.1

app/assets/javascripts/application.js

@@ -12,6 +12,7 @@
 //
 //= require jquery
 //= require jquery_ujs
+//= require bootstrap-touchspin
 //# require rails-ujs
 //= require turbolinks
 //# require_tree .

app/assets/javascripts/shop-14.js

+(function($) {
+    // Vertical Spinner - Touchspin - Product Details Quantity input
+    if ( $.fn.TouchSpin ) {
+        $('#product_vqty').TouchSpin({
+            verticalbuttons: true
+        });
+        $('#qty_input').TouchSpin();
+    }
+}).apply(this, [jQuery]);
\ No newline at end of file

app/assets/javascripts/theme-main.js

+//= require shop-14
\ No newline at end of file

app/assets/stylesheets/application.css

@@ -12,6 +12,8 @@
  *
  *# require_tree .
  *= require_self
+ *= require bootstrap-touchspin
+ *= require font-awesome
  *= require custom
  *= require main_style
  *= require skin_14

app/controllers/carts_controller.rb

@@ -13,14 +13,11 @@ class CartsController < ApplicationController
   end
 
   def delete_line_item
-    product_id = params[:id]
-    if @cart.has_key? product_id
-      @cart.delete(product_id)
-      session[:cart] = @cart
-      product_title = Product.select(:title).find(product_id).title
-      respond_to do |format|
-        format.html { redirect_to cart_index_url, notice: "#{product_title} was sucessfully removed from your cart" }
-      end
+    remove_from_cart(params[:id])
+    product_title = Product.select(:title).find(params[:id]).title
+    respond_to do |format|
+      format.html { redirect_to cart_index_url, notice: "#{product_title} was sucessfully removed from your cart" }
+      format.js
     end
   end
 

app/controllers/line_items_controller.rb

@@ -2,11 +2,10 @@ class LineItemsController < ApplicationController
   include CartsHelper
 
   before_action :set_cart, only: [:create]
-  before_action :set_line_item, only: [:show, :edit, :update, :destroy]
 
   def create
     product = Product.find(params[:product_id])
-    @line_items = add_to_cart(product, 1)
+    add_to_cart(product, params[:product_vqty].to_i)
 
     respond_to do |format|
       format.html { redirect_to cart_index_url, notice: "#{product.title} was sucessfully added to your cart" }
@@ -14,22 +13,4 @@ class LineItemsController < ApplicationController
       format.json { render 'show' }
     end
   end
-
-  def destroy
-    @line_item.destroy
-    respond_to do |format|
-      format.html { redirect_to cart_index_url, notice: "#{product.title} was sucessfully removed from your cart" }
-      format.json { head :no_content }
-    end
-  end
-
-  private
-
-  def set_line_item
-    @line_item = LineItem.find(params[:id])
-  end
-
-  def line_item_params
-    params.require(:line_item).permit(:product_id)
-  end
 end
\ No newline at end of file

app/helpers/carts_helper.rb

@@ -6,14 +6,23 @@ module CartsHelper
   end
 
   def add_to_cart(product, quantity)
-    cart_key = product.id
-    if @cart.has_key? cart_key.to_s
-      @cart[cart_key.to_s]['quantity'] += quantity
+    cart_key = product.id.to_s
+    return remove_from_cart(cart_key) if quantity.zero?
+    if @cart.key?(cart_key)
+      @cart[cart_key][:quantity.to_s] += quantity
     else
       @cart[cart_key] = { quantity: quantity }
     end
   end
 
+  def update_cart_item(product_id, quantity)
+    
+  end
+
+  def remove_from_cart(product_id)
+    @cart = @cart.delete(product_id) if @cart.key?(product_id)
+  end
+
   def destroy_cart_session
     session[:cart] = nil
   end
@@ -28,10 +37,10 @@ module CartsHelper
   end
 
   def cart_total_items
-    if @cart.nil?
+    if session[:cart].nil?
       total = 0
     else
-      total = session[:cart].sum { |product_id, product_attrs| product_attrs['quantity'] || product_attrs[:quantity] }
+      total = session[:cart].sum { |product_id, product_attrs| product_attrs[:quantity.to_s] || product_attrs[:quantity] }
     end
     total
   end

app/views/carts/index.html.erb

@@ -33,7 +33,14 @@
                     </h2>
                   </td>
                   <td><%= number_to_currency(line_item[:product].price) %></td>
-                  <td><%= line_item[:quantity] %></td>
+                  <td>
+                    <%= form_tag do %>
+                        <div class="qty-holder">
+                          <%= number_field_tag :qty_input, line_item[:quantity], class: 'qty-input' %>
+                          <%= button_tag nil, class: 'edit-qty' do fa_icon('pencil') end %>
+                        </div>
+                    <% end %>
+                  </td>
                   <td><%= number_to_currency(line_item[:product].price * line_item[:quantity]) %></td>
                 </tr>
             <% end %>

app/views/layouts/application.html.erb

@@ -14,5 +14,6 @@
       <%= yield %>
     </div>
     <%= render 'layouts/footer' %>
+    <%= javascript_include_tag 'theme-main' %>
   </body>
 </html>

app/views/products/_recommended.html.erb

-<div class="products-grid columns3">
 <% @recommended_products.each do |product| %>
       <li class="product-<%= product.id %>">
         <div class="product">
@@ -17,5 +16,4 @@
           </div>
         </div>
       </li>
-<% end %>
-</div>
\ No newline at end of file
+<% end %>
\ No newline at end of file

app/views/products/show.html.erb

@@ -22,9 +22,12 @@
             </div>
           </div>
           <div class="product-actions">
-            <div class="product-detail-qty">
-            </div>
-            <%= button_to 'Add to cart', line_items_path(product_id: @product), remote: true, class: 'addtocart' %>
+            <%= form_tag line_items_path(product_id: @product), remote: true do %>
+                <div class="product-detail-qty">
+                  <%= number_field_tag :product_vqty, 1, min: 0, class: 'vertical-spinner' %>
+                </div>
+                <%= submit_tag 'Add to cart', class: 'addtocart' %>
+            <% end %>
           </div>
         </div>
       </div>

config/initializers/assets.rb

@@ -12,3 +12,4 @@ Rails.application.config.assets.paths << Rails.root.join('node_modules')
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
 # Rails.application.config.assets.precompile += %w( admin.js admin.css )
+Rails.application.config.assets.precompile += %w( theme-main.js )

config/routes.rb

@@ -8,6 +8,7 @@ Rails.application.routes.draw do
   resources :cart, only: :index, controller: 'carts'
   delete '/cart/remove/line_item/:id', to: 'carts#delete_line_item', as: 'remove_line_item_cart'
   delete '/cart/remove', to: 'carts#destroy', as: 'remove_cart'
+  post 'cart/update', to: 'carts#update', as: 'update_cart'
   devise_for :users
   ActiveAdmin.routes(self)
   mount Ckeditor::Engine => '/ckeditor'