Agile Web Development with Rails 3nd Edition学习笔记-隐藏空的购物车

到现在位置，我们已经完成了产品列表和购物车功能。虽然看起来已经很棒了，但是，有一个细节，那就是当用户登录之后，就会有一个没有任何物品列表的购物车在那里。我们希望在这种情况下可以不显示它。因为有很多时候顾客来了只是转转，并不打算订购些什么。一个空购物车在那里不仅占了空间，而且也不是很美观。
书中其实讲了4中方法实现这个需求。前三个都不是很好，第四个其实是一个创建自定义Helper的范例，做出来的效果可以说是这4个方法中最好的一个。我们在这里一个一个的说说。
第一个方法是最简单的方法。也就是在显示购物车信息的代码段上加上一个条件判断。详细代码如下：

<% unless cart.items.empty? %>        <== New
<div class="cart-title" >Your Cart</div>
<table>
  <%= render(:partial => "cart_item" , :collection => cart.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" , :action => :empty_cart %>
<% end %>                       <== New

这个方法虽然达到了我们的要求，但是你会发现，这个方法会造成整个页面的刷新。
第二个方法是使用JavaScript的blind_down效果。为了使用这个效果，我们需要修改两个地方。
1.在depat/app/views/store/add_to_cart.js.rjs中添加JavaScript的使用代码：

page.replace_html("cart" , :partial => "cart" , :object => @cart)
page[:cart].visual_effect :blind_down if @cart.total_items == 1       <== New
page[:current_item].visual_effect :highlight,
                                   :startcolor => "#88ff88" ,
                                   :endcolor => "#114411"

2.在depot/app/models/cart.rb中添加上面代码中需要使用的total_items方法：

def total_items
  @items.sum { |item| item.quantity }
end

这个方法有一个很棒的效果就是我们的购物车信息可以以滑动的方式出现。但是不知道为什么，我这里需要刷新页面它才能出来，否则怎么添加产品都没动静。。。。。。 :(
第三个方法是直接在<div id="cart">这个tag处添加判断，并引入一段CSS代码，使得这个div不被显示。

<div id="cart"
    <% if @cart.items.empty? %>
        style="display: none"
    <% end %>
  >
  <%= render(:partial => "cart" , :object => @cart) %>
</div>

这个方法在我这里实验的时候和第二个方法的问题相同，就是在购物车被清空的时候能够很好的隐藏它，但是添加的时候怎么也不显示出来，只能刷新页面才行。
现在我们来看看这节的重点。也就是第四个方法。其实这个方法是从第三个方法演化而来的，同样使用了CSS的方式。只是这个CSS代码段将通过Helper的方式来填加罢了。
首先，我们需要在depot/app/helpers/store_helper.rb文件中定义一个叫做hidden_div_if的方法。

module StoreHelper
  def hidden_div_if(condition, attributes = {}, &block)
    if condition
      attributes["style" ] = "display: none"
    end
    content_tag("div" , attributes, &block)
  end
end

这个方法中提供了三个参数。第一个condition是传递进来的一个条件表达式，用以说明什么时候需要使用CSS代码段。第二个参数是要被隐藏的div这个tag的attribute列表。第三个block则是传递进来的要执行的代码段。
好，我们现在来使用这个helper在depot/app/views/layouts/store.html.erb添加我们的代码。
请使用下面的代码替换原来的“<%= render(:partial => "cart" , :object => @cart) %>”一行。

<% hidden_div_if(@cart.items.empty?, :id => "cart" ) do %>
  <%= render(:partial => "cart" , :object => @cart) %>
<% end %>

最后，我们需要修改我们empty_cart方法，把之前显示的“Your cart is currently empty”内容去掉。也就是使用无参的redirect_to_index方法替换原先有参的代码行。
这样，我们的目的就达到了。
经过实验，第四个方法在清空购物车和添加商品的时候都能很好的隐藏或显示购物车。

好了，就到这里，就到这里吧！ :P