Agile Web Development with Rails, Edition 4

11.2 Iteration F2: Creating an AJAX-Based Cart 10.4 Playtime

11.1 Iteration F1: Moving the Cart

Refactor the cart view into partials, and reference the result from the layout.

Create a "partial" view, for just one line item

edit app/views/line_items/_line_item.html.erb

<tr>

  <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>

Replace that portion of the view with a callout to the partial

edit app/views/carts/show.html.erb

<div class="cart_title">Your Cart</div>

<table>

  <%= render(@cart.line_items) %>

  <tr class="total_line">

    <td colspan="2">Total</td>

    <td class="total_cell"><%= number_to_currency(@cart.total_price) %></td>

  </tr>

</table>

<%= button_to 'Empty cart', @cart, :method => :delete,

    :confirm => 'Are you sure?' %>

Make a copy as a partial for the cart controller

cp app/views/carts/show.html.erb app/views/carts/_cart.html.erb

Modify the copy to reference the (sub)partial and take input from @cart

edit app/views/carts/_cart.html.erb

<div class="cart_title">Your Cart</div>

<table>

  <%= render(cart.line_items) %>

  <tr class="total_line">

    <td colspan="2">Total</td>

    <td class="total_cell"><%= number_to_currency(cart.total_price) %></td>

  </tr>

</table>

<%= button_to 'Empty cart', cart, :method => :delete,

    :confirm => 'Are you sure?' %>

Insert a call in the controller to find the cart

edit app/controllers/store_controller.rb

  def index

    @products = Product.all

    @cart = find_or_create_cart

end

Reference the partial from the layout.

edit app/views/layouts/application.html.erb

<!DOCTYPE html>

<html>

<head>

  <title>Pragprog Books Online Store</title>

  <%= stylesheet_link_tag "scaffold" %>

  <%= stylesheet_link_tag "depot", :media => "all" %>

  <%= javascript_include_tag :defaults %>

  <%= csrf_meta_tag %>

</head>

<body id="store">

  <div id="banner">

    <%= image_tag("logo.png") %>

    <%= @page_title || "Pragmatic Bookshelf" %>

  </div>

  <div id="columns">

    <div id="side">

      <div id="cart">

        <%= render @cart %>

      </div>

      <a href="http://www....">Home</a><br />

      <a href="http://www..../faq">Questions</a><br />

      <a href="http://www..../news">News</a><br />

      <a href="http://www..../contact">Contact</a><br />

    </div>

    <div id="main">

      <%= yield %>

    </div>

  </div>

</body>

</html>

Add a small bit of style.

edit public/stylesheets/depot.css

/* Styles for the cart in the sidebar */

#cart, #cart table {

  font-size: smaller;

  color:     white;

#cart table {

  border-top:    1px dotted #595;

  border-bottom: 1px dotted #595;

  margin-bottom: 10px;

pub depot_j

Change the redirect to be back to the store.

edit app/controllers/line_items_controller.rb

  def create

    @cart = find_or_create_cart

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

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

    respond_to do |format|

      if @line_item.save

        format.html { redirect_to(store_url) }

        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

Purchase another product.

get /

Your Cart

2×	Web Design for Developers	$85.90
1×	Programming Ruby 1.9	$49.50
Total		$135.40

Home
Questions
News
Contact

Your Pragmatic Catalog

Debug It!

Professional programmers develop a knack of unerringly zeroing in on the root cause of a bug. They can do that because they've written a lot of buggy code and then gained experience fixing it. This book captures all this experience -- use it, and you'll find you write fewer bugs, and the ones you do write will become easier to hunt down.

$34.95

Programming Ruby 1.9

Ruby is the fastest growing and most exciting dynamic language out there. If you need to get working programs delivered fast, you should add Ruby to your toolbox.

$49.50

Web Design for Developers

Web Design for Developers will show you how to make your web-based application look professionally designed. We'll help you learn how to pick the right colors and fonts, avoid costly interface and accessibility mistakes -- your application will really come alive. We'll also walk you through some common Photoshop and CSS techniques and work through a web site redesign, taking a new design from concept all the way to implementation.

$42.95

post /line_items?product_id=3

product_id => 3

You are being redirected.

get http://localhost:3000/