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