购物车功能

Object 今天学的记得什么?


实做购物车功能,即可以把商品放进购物车、导航栏里显示购物车及商品数量、购物车里显示商品明细和总价。

Step 1: 搭建好 add_to_cart action及routing

  1. 在product show中,加入购物车的链接
<div>
  <%= link_to '加入购物车', add_to_cart_product_path(@product), method: :post, class: "btn btn-lg btn-danger pull-right" %>
</div>
  1. product controller中,实做 add_to_cart 这个action
def add_to_cart
  @product = Product.find(params[:id])
  redirect_to :back
  flash[:notice] = "测试加入购物车"
end
  1. routes.rb中,实做 add_to_cart_product_path这个路径
resources :products do
  member do
    post :add_to_cart
  end
end


Step 2:实做 add_product_to_cart(product) 这个method

  1. 创建两个model: cart model, cart_item model
    rails g model cart
    rails g model cart_item
  2. 编辑cart_item的migration中,使具有需要的栏位
t.integer :cart_id
t.integer :product_id
t.integer :quantity, default: 1
  1. 运行rake db:migrate
  2. 在model里,搭建cart, cart_item, product之间的关系
    (1) cart model
has_many :cart_items
has_many :products, through: :cart_items, source: :product

(2) cart_item model

belongs_to :cart
belongs_to :product
  1. 在cart model里,创建add_product_to_cart(product) 这个method
def add_product_to_cart(product)
  ci = cart_items.build
  ci.product = product
  ci.quantity = 1
  ci.save
end


Step 3: 实做 current_cart 这个method

  1. 在application controller里,实做current_cart这个method
helper_method :current_cart

def current_cart
  @current_cart ||= find_cart
end

private

def find_cart
  cart = Cart.find_by(id: session[:cart_id])
  if cart.blank?
    cart = Cart.create
  end
  session[:cart_id] = cart.id
  return cart
end
  1. 实做把产品加到当前购物车这个行为,在 product controller里,把add_product_to_cart(product) 和 current_cart 这两个method结合在一起用
def add_to_cart
  @product = Product.find(params[:id])
  current_cart.add_product_to_cart(@product)
  flash[:notice] = "商品成功加入购物车"
  redirect_to :back
end
  1. 在导航栏navbar里,显示购物车以及里面的商品数量
<li>
  <%= link_to '#'  do %>
    购物车 <%=  content_tag(:i, "", class: "fa fa-shopping-cart") %> (<%= current_cart.products.count %>)
  <% end %>
</li>


Step 4: 实做购物车明细表

  1. 产生carts controller
    执行rails g controller carts
  2. 创建相应的routing
resources :carts
  1. 修改导航栏,加入进入购物车明细表的链接
  -  <%= link_to '#'  do %>
  +  <%= link_to carts_path  do %>
  1. 产生cart index页面
    执行 touch app/views/carts/index.html.erb
  2. 在上面的file中,写入以下内容,以有实际的购物车明细表
<div class="row">
  <div class="col-md-12">
    <h2>购物车明细</h2>
    <br>

    <table class="table table-bordered">
      <thead>
        <tr>
          <th colspan="2">商品资讯</th>
          <th>价格</th>
          <th>数量</th>
        </tr>
      </thead>

      <tbody>
        <% current_cart.cart_items.each do |cart_item| %>
          <tr>
            <td>
              <%= link_to product_path(cart_item.product) do %>
                <% if cart_item.product.image.present? %>
                  <%= image_tag(cart_item.product.image.thumb.url, class: "thumbnail") %>
                <% else %>
                  <%= image_tag("http://placehold.it/200x200&text=No Pic", class: "thumbnail") %>
                <% end%>
              <% end %>
            </td>
            <td>
              <%= link_to cart_item.product.title, product_path(cart_item.product) %>
            </td>
            <td>
              <%= cart_item.product.price %>
            </td>
            <td>
              <%= cart_item.quantity %>
            </td>
          <tr>
        <% end %>
      </tbody>
     </table>

    <br>

    <div class="total clearfix">
      <p class="text-right">总价 xxx RMB</p>
    </div>

    <hr>

    <div class="checkout clearfix">
      <%= link_to "确认结账", '#', method: :post, class: "btn btn-lg btn-danger pull-right" %>
    </div>
  </div>
</div>


Step 5: 实做计算总价功能

  1. 修改app/views/carts/index.html.erb
-      <p class="text-right">总价 xxx RMB</p>
+      <p class="text-right">总价 <%=  render_total_price(current_cart) %> RMB</p>
  1. 在cart helper文件里,创建 render_total_price(cart) 这个method
def render_total_price(cart)
  cart.total_price
end
  1. 在cart model里,创建 total_price 这个method
def total_price
  sum = 0
  cart_items.each do |cart_item|
    if cart_item.product.price.present?
      sum += cart_item.product.price * cart_item.quantity
    end
  end
  return sum
end


Reflection 今天情绪的高点和低点是什么?


高点

当初第一遍做jdstore的购物车功能时,难以理解这些code,对于它们是什么意思、相互间的关系、以及为何能实现特定功能感到头疼、费解。觉得挺难的,担心学不会。时不时自我暗示:有可能我就是不能理解、学不会,就此止步放弃了呢?
可是今天第二遍做的时候,感觉到比之前轻松多了,理解更进一步了。相比较之前的云里雾里,现在已是柳暗花明。对自己不再有那么深的怀疑。我很高兴,自己做到了比之前更好。
写下这段文字的此刻,让我意识到,事实上自己的确一点一点在进步,只是它不是那么容易察觉而已。

低点

今天暂无,但昨天做“编程基础练习薄”倒数第二题时,花了很久时间,大概1个半小时,始终解不出来。遇到一个自己不懂的东西了,无法解决,感觉心塞、沮丧,有些自我怀疑。

Interpretation 今天一个重要的领悟是什么?


遇到不懂的卡壳,是很正常的事。因为是陌生的知识点,做不出来是理所当然的,没必要拿这个来怀疑自己的能力、打击自己。
新的东西、不懂的东西,一开始要让自己快速入门。
所以直接模仿、参考别人现成的解答是最好的学习方式,之后再多多应用、理解,而不要认为这是可耻的。
相反,一开始死活要自己琢磨,费半天劲也搞不明白、解不出来,很容易影响情绪,感到挫败、自我怀疑,容易导致放弃。这不是好的学习方式。

Decision 明天要做什么?


进一步完善购物车功能。比如:

  1. 购物车里已有的商品,不能再加入
  2. 购物车里的商品数量,可以调整,但上限不能超过库存数
  3. 库存不足的商品,不能加入购物车
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容