美文网首页
JDStore——加入购物车

JDStore——加入购物车

作者: 小耿_da0a | 来源:发表于2017-07-14 12:35 被阅读70次

STEP 1

1. 加入app/views/products/show.html.erb
<%= link_to("加入购物车", add_to_cart_product_path(@product), :method => :post, :class => "btn btn-primary btn-lg btn-danger") =>
2. 加入app/controller/products_controller.rb
 def add_to_cart
     @product = Product.find(params[:id])
     redirect_to :back
     flash[:notice] = "测试加入购物车"
 end 
3. 修改config/routes.rb
  root 'product#index'
  devise_for :users
      namespace :admin do
          resources :products 
      end 
   -resources :products
   + resources :products do 
   + member do 
   +     post :add_to_cart
   +   end
   +end
end

git add .
git commit -m "add add_to_cart button"

STEP 2

1. 产生cart与cartitem两个model

rails g model cart
rails g model cart_item

2. 修改cartitem的migration
+t.integer :cart_id
+t.integer :product_id
+t.integer :quantity, default: 1

rake db:migrate

3. 修改app/models/cart.rb
+has_many :cart_items
+has_many :products, through: :cart_items ,source::product
4. 修改app/models/cart_item.rb
+belongs_to :cart
+belongs_to :product
5. 实作add_product_to_cart
app/models/cart.rb
+def add_product_to_cart(product)
   +ci = cart_items.build
   +ci.product = product
   +ci.quantity = 1
   +ci.save
+end
git add .
git commit -m "implement add_product_to_cart function"

STEP 3

1. 显示购物车内物品数量

修改app/views/common/_navbar.html.erb

<li>
    <%= link_to "#" do %>
        购物车  <i class="fa fa-shopping-cart"> </i> ( <%= current_cart.product.count %>
     <% end %>
</li>
2. 加入购物车代码

修改app/controllers/application_controller.rb

...略
  +     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
3. 加入current_cart.add_product_to_cart(@product)

修改app/controllers/products_controller.rb

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

  +    current_cart.add_product_to_cart(@product)
  +    flash[:notice] = "成功加入购物车"
  +    redirect_to  :back
end
git add .
git commit -m "implement current_cart function"

STEP 4显示购物车明细

1. 新增carts controller

rails g controller carts

2. 修改config/routes.rb
+resources :carts

修改app/views/common/_navbar.html.erb

<li>
  -   <%= link_to "#" do %>
  +  <%= link_to carts_path do %>
            购物车    <i class="fa fa-shopping-cart">   </i>  (  <%= current_cart.products.count %> )
        <% end %>
</li>
3. 实作购物明细

touch app/views/carts/index.html.erb

<div class="row">
  <div class="col-md-12">

    <h2> 购物车 </h2>

    <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">
      <span class="pull-right">
         <span> 总计 xxx RMB  </span>
      </span>
    </div>

    <hr>

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

git add .
git commit -m "implement carts index function"

STEP5 计算总价

1. 修改app/views/carts/index.html.erb
...(略)
    <div class="total clearfix">
      <span class="pull-right">
         <span>
          - 总计 xxx RMB
          + <% sum = 0 %>
          +   <% current_cart.cart_items.each do |cart_item| %>
          +    <% if cart_item.product.price.present? %>
          +      <% sum = sum + cart_item.quantity * cart_item.product.price %>
          +         <% end %>
          +     <% end %>
          +  总计 <%= sum %> RMB
         </span>
      </span>
    </div>
...(略)
2. Refactor到Helper去

修改app/views/carts/index.html.erb

   ...(略)
    <div class="total clearfix">
      <span class="pull-right">
        <span>
 -         <% sum = 0 %>
 -         <% current_cart.cart_items.each do |cart_item| %>
 -           <% if cart_item.product.price.present? %>
  -             <% sum = sum + cart_item.quantity * cart_item.product.price %>
  -           <% end %>
  -         <% end %>
  -         总计 <%= sum %> RMB
  +         总计 <%= render_cart_total_price(current_cart) %> RMB
        </span>
      </span>
    </div>
...(略)

修改app/helpers/carts_helper.rb

module CartsHelper
+  def render_cart_total_price(cart)
+    sum = 0
+    cart.cart_items.each do |cart_item|
+      if cart_item.product.price.present?
+        sum += cart_item.quantity * cart_item.product.price
+      end
+    end
+    sum
+  end
end
3.Refactor到Model去(如何做的更好)

修改app/helpers/cart_helper.rb

module CartsHelper
  def render_cart_total_price(cart)
-    sum = 0
-    cart.cart_items.each do |cart_item|
-      if cart_item.product.price.present?
-        sum += cart_item.quantity * cart_item.product.price
-      end
-    end
-    sum
+    cart.total_price
  end
end

修改app/model/cart.rb

class Cart < ApplicationRecord

  # ... 略

  
+  def total_price
+    sum = 0
+    cart_items.each do |cart_item|
+      if cart_item.product.price.present?
+        sum += cart_item.quantity * cart_item.product.price
+      end
+    end
+    sum
+  end
end

git add .
git commit -m "implement cart_total_price function"

相关文章

  • JDStore——加入购物车

    STEP 1 1. 加入app/views/products/show.html.erb 2. 加入app/con...

  • MVC(页面跳转)

    产品列表页面 "加入购物车" "查看详情" 产品详情页面 "返回列表" "加入购物车" 购物车页面 "继续购物"

  • 今天囧事多多

    ①上班前两个小时逛淘宝做得冏事 咦,这件不错,加入购物车, 这双鞋好看,加入购物车, 这条裤子好看,加入购物车 登...

  • 8.5-高并发下的互联网电商购物车实战-加入购物车接口开发—小滴

    高并发下的互联网电商购物车实战-加入购物车接口开发 简介:电商购物车实现案例-加入购物车接口开发 添加购物车接口 ...

  • 商品加入购物车的代码

    加入购物车页面布局分为两部分,第一部分为底部悬浮栏(购物车、收藏、加入购物车、立即购买),第二部分为加入购物车的隐...

  • ActiveRecord::StatementInvalid i

    Showing /Users/lvchengbo/jdstore/app/views/common/_navbar...

  • 商城购物流程

    1、商城购物分为方式:加入购物车,立即购买 a)加入购物车:添加多个商品信息(购物车id(主键),商品id,用户i...

  • 购物车实作思路

    购物车实作思路: [TOC] 1.建立将商品加入到购物车的action (1)在商品页面新建“加入购物车”按钮(2...

  • MVC(产品列表页面)

    加入购物车 等效于

  • 购物车模块实现

    1、购物车列表功能实现 点击加入购物车或者点击购物车图标后进入购物车页面,在购物车页面中首先渲染cartList的...

网友评论

      本文标题:JDStore——加入购物车

      本文链接:https://www.haomeiwen.com/subject/rvgwhxtx.html