购物车功能

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>

2. product controller中，实做 add_to_cart 这个action

def add_to_cart
  @product = Product.find(params[:id])
  redirect_to :back
  flash[:notice] = "测试加入购物车"
end

3. 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

3. 运行rake db:migrate
4. 在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

5. 在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

2. 实做把产品加到当前购物车这个行为，在 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

3. 在导航栏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

3. 修改导航栏，加入进入购物车明细表的链接

  -  <%= link_to '#'  do %>
  +  <%= link_to carts_path  do %>

4. 产生cart index页面
   执行 touch app/views/carts/index.html.erb
5. 在上面的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>

2. 在cart helper文件里，创建 render_total_price(cart) 这个method

def render_total_price(cart)
  cart.total_price
end

3. 在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. 库存不足的商品，不能加入购物车