Add To Basket without reloading the page

Author: goxr3plus

app/assets/javascripts/application.js

@@ -18,4 +18,14 @@
 //= require bootstrap
 //= require jquery.nicescroll
 
-// 1. Simple mode, it styles document scrollbar:
+// $(".add-to-basket").click(function(){
+//   var productId = $(this).attr("productID");
+//   $.post('/line_items_controller', {id: productId}).done(function(response){
+//       if (response.status == "created"){
+//        $('total_cart_items_badge').text(response.line_items_count);
+//       }
+//       else{
+//          //your error handler
+//       }
+//   });
+// });

app/controllers/line_items_controller.rb

@@ -2,7 +2,6 @@ class LineItemsController < ApplicationController
   before_action :logged_in_user, only: %i[create destroy add_quantity reduce_quantity]
 
   def create
-
     # Find associated product and current cart
     chosen_product = Product.find(params[:product_id])
     current_cart = @current_cart
@@ -20,13 +19,19 @@ def create
       # @line_item.order = Order.first
       @line_item.quantity = 1
     end
-
-    # Save and redirect to cart show path
-    @line_item.save!
-
+    
     # redirect_to cart_path(@current_cart)
     # redirect_back(fallback_location: root_url)
-    # render layout: false
+
+    respond_to do |format|
+     if @line_item.save!
+       format.js
+       # below is a second way without creating ``
+       # format.js { render :js => "alert('hi')" }
+     else
+       format.html { render :new , notice: 'Error adding product to basket!' }
+     end
+   end
   end
 
   def destroy

app/views/layouts/_header.html.erb

@@ -35,7 +35,7 @@
           <!-- <i class="glyphicon glyphicon-user"></i> -->
           <i class="glyphicon glyphicon-shopping-cart" style="color:#FFD700"></i>
           Basket
-          <span class="badge badge-pill badge-warning"><%= @current_cart.line_items.count %></span>
+          <span class="badge badge-pill badge-warning" id="total_cart_items_badge"><%= @current_cart.line_items.count %></span>
           |
           <i class="glyphicon glyphicon-eye-open" style="color:firebrick"></i>
           Orders

app/views/layouts/application.html.erb

@@ -21,7 +21,11 @@
     </div>
     <%= render 'layouts/footer' %>
 
-  
+    <!-- <script type="text/javascript">
+      $(function () {
+        alert("hi");
+      });
+    </script> -->
 
   </body>
 </html>

app/views/line_items/create.js.erb

@@ -0,0 +1 @@
+$('#total_cart_items_badge').html("<%= @current_cart.line_items.count %>");

app/views/products/_product.html.erb

@@ -19,26 +19,27 @@
 <strong>
   Price :
 </strong>
-<%= product.price %> $
+<%= product.price %>
+$
 
 <p>
   <%# if logged_in? %>
     <!-- Add to Basket -->
-    <%=button_to line_items_path(:product_id => product.id) , class: "btn btn-warning" , style: "margin-top:15px;" do %>
+    <%=button_to line_items_path(:product_id => product.id), :remote => true , class: "btn btn-warning" , style: "margin-top:15px;" , params:{productID: product.id} do %>
     <i class="glyphicon glyphicon-plus" style="color:black;"></i>
     Add to Basket
   <% end %>
-<%# end %>
-</p>
+  <%# end %>
+  </p>
 
-<p>
+  <p>
 
-<!-- Only Admin is allowed to modify products -->
-<% if logged_in? && current_user.admin? %>
-  <%= link_to 'Edit', edit_product_path(product) %>
-  or
-  <%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %>
-<% end %>
+    <!-- Only Admin is allowed to modify products -->
+    <% if logged_in? && current_user.admin? %>
+      <%= link_to 'Edit', edit_product_path(product) %>
+      or
+      <%= link_to 'Destroy', product, method: :delete, data: { confirm: 'Are you sure?' } %>
+    <% end %>
 
-</p>
+  </p>
 </li>

config/initializers/wrap_parameters.rb

@@ -5,7 +5,7 @@
 
 # Enable parameter wrapping for JSON. You can disable this by setting :format to an empty array.
 ActiveSupport.on_load(:action_controller) do
-  wrap_parameters format: [:json]
+  wrap_parameters format: [:json] if respond_to?(:wrap_parameters)
 end
 
 # To enable root element in JSON for ActiveRecord objects.