11.4 Iteration F4: Hide an Empty Cart 11.2 Iteration F2: Creating an AJAX-Based Cart
Assign the current item to be the line item in question
edit app/controllers/line_items_controller.rb
def create
product = Product.find(params[:product_id])
@line_item = @cart.add_product(product)
respond_to do |format|
if @line_item.save
format.html { redirect_to store_index_url }
format.js { @current_item = @line_item }
format.json { render :show,
status: :created, location: @line_item }
else
format.html { render :new }
format.json { render json: @line_item.errors,
status: :unprocessable_entity }
end
end
end
Add the id to the row in question
edit app/views/line_items/_line_item.html.erb
<% if line_item == @current_item %>
<tr id="current_item">
<% else %>
<tr>
<% end %>
<td><%= line_item.quantity %>×</td>
<td><%= line_item.product.title %></td>
<td class="item_price"><%= number_to_currency(line_item.total_price) %></td>
</tr>
Animate the background color of that row
edit app/views/line_items/create.js.erb
$('#cart').html("<%=j render(@cart) %>");
$('#current_item').css({'background-color':'#88ff88'}).
animate({'background-color':'#114411'}, 1000);
Make the jquery-ui libraries available to the application
edit Gemfile
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'jquery-ui-rails'
Install the gem
bundle install --local
Resolving dependencies...
Using rake 12.0.0
Using concurrent-ruby 1.0.4
Using i18n 0.8.0
Using minitest 5.9.1
Using thread_safe 0.3.5
Using builder 3.2.3
Using erubis 2.7.0
Using mini_portile2 2.1.0
Using rack 2.0.1
Using nio4r 2.0.0
Using websocket-extensions 0.1.2
Using mime-types-data 3.2016.0521
Using arel 7.1.4
Using bundler 1.14.4
Using byebug 9.0.6
Using coffee-script-source 1.12.2
Using execjs 2.7.0
Using method_source 0.8.2
Using thor 0.19.4
Using debug_inspector 0.0.2
Using ffi 1.9.17
Using multi_json 1.12.1
Using pg 0.19.0
Using puma 3.7.0
Using sass 3.4.23
Using tilt 2.0.6
Using sqlite3 1.3.13
Using turbolinks-source 5.0.0
Using tzinfo 1.2.2
Using nokogiri 1.7.0.1
Using rack-test 0.6.3
Using sprockets 3.7.1
Using websocket-driver 0.6.5
Using mime-types 3.1
Using coffee-script 2.4.1
Using uglifier 3.0.4
Using rb-inotify 0.9.7 from source at `/home/rubys/git/rb-inotify`
Using queue_classic 3.2.0.RC1 from source at `/home/rubys/git/queue_classic`
Using turbolinks 5.0.1
Using activesupport 5.0.1 from source at `/home/rubys/git/rails`
Using loofah 2.0.3
Using mail 2.6.4
Using rails-dom-testing 2.0.2
Using globalid 0.3.7
Using activemodel 5.0.1 from source at `/home/rubys/git/rails`
Using jbuilder 2.6.1
Using spring 2.0.1
Using rails-html-sanitizer 1.0.3
Using activejob 5.0.1 from source at `/home/rubys/git/rails`
Using activerecord 5.0.1 from source at `/home/rubys/git/rails`
Using actionview 5.0.1 from source at `/home/rubys/git/rails`
Using actionpack 5.0.1 from source at `/home/rubys/git/rails`
Using actioncable 5.0.1 from source at `/home/rubys/git/rails`
Using actionmailer 5.0.1 from source at `/home/rubys/git/rails`
Using railties 5.0.1 from source at `/home/rubys/git/rails`
Using sprockets-rails 3.2.0
Using coffee-rails 4.2.1
Using jquery-rails 4.2.2
Using jquery-ui-rails 6.0.1
Using web-console 3.4.0 from source at `/home/rubys/git/web-console`
Using rails 5.0.1 from source at `/home/rubys/git/rails`
Using sass-rails 5.0.6
Bundle complete! 16 Gemfile dependencies, 62 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
Pull in the blind effect from the jquery-ui libraries
edit app/assets/javascripts/application.js
#<RuntimeError: can't find jquery-ui/effect-blind>
makedepot.rb:1855:in `block (2 levels) in <main>'
/home/rubys/git/gorp/lib/gorp/edit.rb:173:in `instance_exec'
/home/rubys/git/gorp/lib/gorp/edit.rb:173:in `edit'
makedepot.rb:1838:in `block in <main>'
/home/rubys/git/gorp/lib/gorp/output.rb:59:in `call'
/home/rubys/git/gorp/lib/gorp/output.rb:59:in `block (4 levels) in <top (required)>'
/home/rubys/git/gorp/lib/gorp/output.rb:49:in `each'
/home/rubys/git/gorp/lib/gorp/output.rb:49:in `block (3 levels) in <top (required)>'
/home/rubys/.rvm/gems/ruby-2.2.5/gems/builder-3.2.3/lib/builder/xmlbase.rb:175:in `call'
/home/rubys/.rvm/gems/ruby-2.2.5/gems/builder-3.2.3/lib/builder/xmlbase.rb:175:in `_nested_structures'
/home/rubys/.rvm/gems/ruby-2.2.5/gems/builder-3.2.3/lib/builder/xmlbase.rb:68:in `tag!'
/home/rubys/.rvm/gems/ruby-2.2.5/gems/builder-3.2.3/lib/builder/xmlbase.rb:93:in `method_missing'
/home/rubys/git/gorp/lib/gorp/output.rb:22:in `block (2 levels) in <top (required)>'
/home/rubys/.rvm/gems/ruby-2.2.5/gems/builder-3.2.3/lib/builder/xmlbase.rb:175:in `call'
/home/rubys/.rvm/gems/ruby-2.2.5/gems/builder-3.2.3/lib/builder/xmlbase.rb:175:in `_nested_structures'
/home/rubys/.rvm/gems/ruby-2.2.5/gems/builder-3.2.3/lib/builder/xmlbase.rb:68:in `tag!'
/home/rubys/.rvm/gems/ruby-2.2.5/gems/builder-3.2.3/lib/builder/xmlbase.rb:93:in `method_missing'
/home/rubys/git/gorp/lib/gorp/output.rb:11:in `block in <top (required)>'
// This is a manifest file that'll be compiled into application.js, which will
// include all the files listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts,
// vendor/assets/javascripts, or any plugin's vendor/assets/javascripts
// directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at
// the bottom of the compiled file. JavaScript code in this file should be
// added after the last require_* statement.
//
// Read Sprockets README
// (https://github.com/rails/sprockets#sprockets-directives) for details about
// supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Add an XHR test.
edit test/controllers/line_items_controller_test.rb
test "should create line_item via ajax" do
assert_difference('LineItem.count') do
post line_items_url, params: { product_id: products(:ruby).id },
xhr: true
end
assert_response :success
assert_select_jquery :html, '#cart' do
assert_select 'tr#current_item td', /Programming Ruby 1.9/
end
end
rails test
Run options: --seed 40643
# Running:
...............................
Finished in 0.987381s, 31.3962 runs/s, 66.8435 assertions/s.
31 runs, 66 assertions, 0 failures, 0 errors, 0 skips
11.4 Iteration F4: Hide an Empty Cart 11.2 Iteration F2: Creating an AJAX-Based Cart