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