Agile Web Development with Rails, Edition 4

11.2 Iteration F2: Creating an AJAX-Based Cart

Add remote: true to the Add to Cart button

edit app/views/store/index.html.erb

<% if notice %>

<p id="notice"><%= notice %></p>

<% end %>

<h1>Your Pragmatic Catalog</h1>

<% @products.each do |product| %>

  <div class="entry">

    <%= image_tag(product.image_url) %>

    <h3><%= product.title %></h3>

    <%= sanitize(product.description) %>

    <div class="price_line">

      <span class="price"><%= number_to_currency(product.price) %></span>

          <%= button_to 'Add to Cart', line_items_path(:product_id => product),

            :remote => true %>

    </div>

  </div>

<% end %>

Enable a the controller to respond to js requests

edit app/controllers/line_items_controller.rb

  def create

    product = Product.find(params[:product_id])

    @line_item = @cart.add_product(product.id)

    @line_item.product = product

    respond_to do |format|

      if @line_item.save

        format.html { redirect_to(store_url) }

        format.js

        format.xml  { render :xml => @line_item,

          :status => :created, :location => @line_item }

      else

        format.html { render :action => "new" }

        format.xml  { render :xml => @line_item.errors,

          :status => :unprocessable_entity }

end

end

end

Use JavaScript to replace the cart with a new rendering

edit app/views/line_items/create.js.rjs

page.replace_html('cart', render(@cart))