"地瓜哥"博客网

《Agile Web Development with Rails》抄书笔记系列

　　“《Agile Web Development with Rails》抄书笔记系列”目录

　　上一节，我们介绍了如何进行错误处理。另外，既然可以向购物车中添加商品，那么清空购物车也是一个必要的功能。我们这节来实现清空购物车的功能。

D呱呱

　　关于这节内容的代码：

1. 这节开始之前：https://github.com/diguage/depot/tree/v-10.2
2. 这节完成之后：https://github.com/diguage/depot/tree/v-10.3

　　要实现清空购物车的功能，那么我们必须向购物车页面添加一个链接，同时修改CartsController的destroy()方法来清除会话。让我们从修改模板开始，这里还是要使用button_to()向页面上添加按钮。

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

<h2>Your Pragmatic Cart</h2>

<ul>
  <% @cart.line_items.each do |item| %>
       <li><%= item.quantity %>&times;<%= item.product.title %></li>
  <% end %>
</ul>

<%= button_to 'Empty cart', @cart, method: :delete, 
                  data:{ confirm: 'Are you sure?' } %>

　　修改CartsController中的destroy()，来确保用户删除了自己的购物车，同时将购物车中会话中删除。删除后，重定向到网店首页，同时给出一个提示信息。

  # DELETE /carts/1
  # DELETE /carts/1.json
  def destroy
    @cart = current_cart
    @cart.destroy
     session[:cart_id] = nil

    respond_to do |format|
      format.html { redirect_to store_url,
            notice: 'Your cart is currently empty' }
      format.json { head :no_content }
    end
  end

　　同时，我们还要更新相应的测试代码，%depot%/test/functional/carts_controller_test.rb.

  test "should destroy cart" do
    assert_difference('Cart.count', -1) do
       session[:cart_id] = @cart.id
      delete :destroy, id: @cart
    end

    assert_redirected_to store_path
  end

　　现在，我们可以看一下购物车页面，然后点击 Emptycart按钮，页面就会被重定向到商品目录页面。同时，还有一个友好的提示信息。如下图：

　　我还需要添加商品时显示的删除闪存（flash）信息：

  # POST /line_items
  # POST /line_items.json
  def create
     @cart = current_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 @line_item.cart }
        format.json { render json: @line_item, status: :created, location: @line_item }
      else
        format.html { render action: "new" }
        format.json { render json: @line_item.errors, status: :unprocessable_entity }
      end
    end
  end

　　最后，我们来重点关注一下购物车的展示。我们使用<table>标签来代替<li>标签。另外，还是使用CSS来确定展示样式。修改后，代码如下：

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

<div class="cart_title">Your Cart</div>
<table>
  <% @cart.line_items.each do |item| %>
     <tr>
          <td><%= item.quantity %>&times;</td>
          <td><%= item.product.title %></td>
          <td class="item_price"><%= number_to_currency(item.total_price) %></td>
     </tr>
  <% end %>s
    <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, 
           data:{ confirm: 'Are you sure?' } %>

　　为了能使上述代码工作，我们还需要向LineItem和Cart中分别增加一个方法，用于计算当个商品的总价格以及购物车的总价合计。我们先来修改LineItem，这个计算只是简单的数量乘单价。代码如下：

# 文件 %depot%/app/models/line_item.rb
  def total_price
       product.price * quantity
  end

　　在Cart，我们使用Rails的Array::sum()方法来对每种商品的总计价格再求和。代码如下：

# 文件 %depot%/app/models/cart.rb
  def total_price
       line_items.to_a.sum {|item| item.total_price }
  end

　　接着，我们需要在carts.css.scss中添加一小段样式定义。代码如下：

// Place all the styles related to the carts controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

.carts {
  .cart_title {
    font: 120% bold;
  }
 
  .item_price, .total_line {
    text-align: right;
  }
 
  .total_line .total_cell {
    font-weight: bold;
    border-top: 1pxsolid #595;
  }
}

　　预编译后，打开购物车页面，你将看到如下漂亮的页面：

总结

　　本节内容，再加上前两节内容是一个迭代，对应书中第十章内容。现在，我们的购物车页面总算可以拿得出手了。来让我们看看这个迭代，我们完成了那些工作。

• 向既有表中增加了一列，同时设定了默认值；
• 将数据库中已有的数据按照新的表结构进行迁移；
• 当检查到数据时，给出一个友好提示；
• 使用logger记录日志；
• 删除一条记录；
• 使用CSS调整一个表格的展示；

　　但是，当我们完成这些功能是，我们的客户拿过来两本杂志，《信息技术（Information Technology）》和《高尔夫周刊（Golf Weekly）》。里面有篇介绍新的网页页面风格的文章，它可以动态更新页面内容，Ajax，她指出。看来，我们下次需要使用这种技术来重构我们的页面。