Agile Web Development with Rails 3nd Edition學習筆記-創建購物車

上篇筆記中,我們爲保存用戶選購的商品提供了場所。那麼,這篇我們就要開始製造我們的購物車了。
首先,我們要爲購物車定義一個類,這個類現在只做很簡單的事情,就是保存用戶選擇的商品。我們管這個類叫“Cart”,我們將它保存在depot/app/models/cart.rb文件中。詳細代碼如下:
class Cart
attr_reader :items

def initialize
@items = []
end

def add_product(product)
@items << product
end
end

好了,我們的購物車就做好了。
(廣告詞:親愛的顧客朋友們,你們好!歡迎你們的光臨!我們已經爲你們每一位準備了一臺空間充足的購物車。請放心,不論你選購多少商品,我們的購物車都能裝下,並保管好您所選購的商品。祝您購物愉快!)
哈哈,廣告詞不錯吧?不過不能光說不練,接下來,我們要爲每一位來我們這裏購物的顧客準備一輛購物車。
我們知道,每位顧客訪問我們的depot都會產生一個Session,並且我們上一篇筆記也準備好了在裏面存儲東西了。那麼,我們就在需要的時候爲每個Session創建一個購物車的實例吧。
打開depot/app/controllers/store_controller.rb文件,在裏面添加如下代碼:
def find_cart
session[:cart] ||= Cart.new
end

從上面的代碼可以看出,其實我們並不是每位顧客一出現就給他/她一輛購物車的(顧客說了:“我只是來轉轉看看的,你們給我這麼臺車子,推着多麻煩阿!我又不給裏面放東西!“)。而是在顧客看到某樣商品,觸動了他/她購物的慾望,想買下這件產品的時候,及時準確的讓他/她的手邊出現一輛購物車。怎麼樣?我們的服務不錯把?(要是我們在逛超市的時候也能有這樣的待遇該多好阿!)
在之前的筆記中,我們已經爲我們頁面上的每個產品添加了一個“Add to Cart“的按鈕。那麼我們希望用戶在點擊了這個按鈕之後,按鈕所對應的產品就被添加到了我們的購物車中。那麼,這裏就有兩個問題:
1、我們怎麼知道用戶點擊了產品的“Add to Cart“按鈕?
2、我們知道了用戶點擊了“Add to Cart“的按鈕,我們又怎麼知道用戶點擊了哪個產品的按鈕?
爲了解決這兩個問題,我們需要修改depot/app/views/store/index.html.erb這個文件中的第10行。
修改之前的代碼:
<%= button_to "Add to Cart"%>

修改之後的代碼:
<%= button_to "Add to Cart", :action => 'add_to_cart', :id => product %>

從上面的代碼我們可以看到,我們把一個add_to_cart方法綁定給了按鈕的點擊動作,同時,在生成按鈕的時候,把該按鈕對應的產品ID綁定給了該按鈕的id屬性。這樣,當用戶點擊這個按鈕的時候,產品的id會作爲Form的參數傳遞回來,我們通過在add_to_cart方法中取出這個參數值,就可以知道用戶選購了那件產品了(因爲在之前我們設計數據庫時,那個id字段是自動累加的,也就確保了每樣產品都有一個唯一的id與之對應)。
現在,我們該去實現我們的add_to_cart方法了。我們可以在depot/app/controllers/store_controller.rb中實現這個方法。詳細代碼如下:
def add_to_cart
product = Product.find(params[:id])
@cart = find_cart
@cart.add_product(product)
end

注意了,上面那個“params”對象在Rails中可是很重要的一個角色哦!它裏面保存這所有從用戶也民傳回來的參數。我們和顧客的溝通可是就靠它了。這個對象中的所有參數都是以鍵值對的形式保存的,用起來還是很方便的。
上面做了這些,是不是就可以嘗試一下我們購物按鈕的效果了?不行,現在還不行。因爲Rails需要爲每一個頁面調用的方法提供一個View。也就是說,我們的按鈕調用了add_to_cart方法,我們要爲這個方法創建了一個View。好,那我們就在depot/app/views/store目錄下創建一個叫add_to_cart.html.erb的文件。文件中的代碼如下:
<h2>Your Pragmatic Cart</h2>
<ul>
<% for item in @cart.items %>
<li><%=h item.title %></li>
<% end %>
</ul>

這段代碼其實會在add_to_cart方法把產品放進用戶的購物車終止後,給用戶列一張用戶選購了的商品清單。
好了,現在開啓服務,打開瀏覽器訪問store頁面,點一下你的選購按鈕試試看吧!怎麼樣,是不是還不賴? :D
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章