Agile Web Development with Rails, Edition 5

11.4 Iteration F4: Hide an Empty Cart 11.2 Iteration F2: Creating an AJAX-Based Cart

11.3 Iteration F3: Highlighting Changes

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 %>&times;</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 pg 0.19.0
Using ffi 1.9.18
Using concurrent-ruby 1.0.5
Using i18n 0.8.4
Using minitest 5.8.5
Using thread_safe 0.3.6
Using builder 3.2.3
Using erubis 2.7.0
Using mini_portile2 2.1.0
Using rack 2.0.3
Using nio4r 2.1.0
Using websocket-extensions 0.1.2
Using mime-types-data 3.2016.0521
Using arel 7.1.4
Using bundler 1.15.1
Using method_source 0.8.2
Using thor 0.19.4
Using sqlite3 1.3.13
Using puma 3.9.0
Using sass 3.4.24
Using tilt 2.0.7
Using execjs 2.7.0
Using coffee-script-source 1.12.2
Using turbolinks-source 5.0.3
Using multi_json 1.12.1
Using byebug 9.0.6
Using bindex 0.5.0
Using queue_classic 3.2.0.RC1 from source at `/home/rubys/git/queue_classic`
Using rb-inotify 0.9.9 from source at `/home/rubys/git/rb-inotify`
Using tzinfo 1.2.3
Using nokogiri 1.7.2
Using rack-test 0.6.3
Using sprockets 3.7.1
Using websocket-driver 0.6.5
Using mime-types 3.1
Using uglifier 3.2.0
Using coffee-script 2.4.1
Using turbolinks 5.0.1
Using activesupport 5.0.3 from source at `/home/rubys/git/rails`
Using loofah 2.0.3
Using mail 2.6.5
Using rails-dom-testing 2.0.3
Using globalid 0.4.0
Using activemodel 5.0.3 from source at `/home/rubys/git/rails`
Using jbuilder 2.6.4
Using spring 2.0.2
Using rails-html-sanitizer 1.0.3
Using activejob 5.0.3 from source at `/home/rubys/git/rails`
Using activerecord 5.0.3 from source at `/home/rubys/git/rails`
Using actionview 5.0.3 from source at `/home/rubys/git/rails`
Using actionpack 5.0.3 from source at `/home/rubys/git/rails`
Using actioncable 5.0.3 from source at `/home/rubys/git/rails`
Using actionmailer 5.0.3 from source at `/home/rubys/git/rails`
Using railties 5.0.3 from source at `/home/rubys/git/rails`
Using sprockets-rails 3.2.0
Using coffee-rails 4.2.2
Using jquery-rails 4.3.1
Using jquery-ui-rails 6.0.1
Using web-console 3.5.1 from source at `/home/rubys/git/web-console`
Using rails 5.0.3 from source at `/home/rubys/git/rails`
Using sass-rails 5.0.6
Bundle complete! 16 Gemfile dependencies, 62 gems now installed.
Use `bundle info [gemname]` to see where a bundled gem is installed.

Restart the server.

Pull in the blind effect from the jquery-ui libraries

edit app/assets/javascripts/application.js
// 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-ui/effects/effect-blind
//= 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 62204
 
# Running:
 
...............................
 
Finished in 0.972471s, 31.8775 runs/s, 67.8683 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