購物車模組

一大岐發表於2020-12-06

抽取購物車模型

購物項：圖片路徑，商品名稱，商品價格，購買數量，小計

public class CartItem {
	private Product product;//目的攜帶購物項3種引數(圖片路徑,商品名稱,商品價格)
	private int num;//當前類別商品數量
	private double subTotal;//小計
	
	//小計是經過計算可以獲取到的
	public double getSubTotal() {
		return product.getShop_price()*num;
	}
	
	public Product getProduct() {
		return product;
	}
	
	public void setProduct(Product product) {
		this.product = product;
	}
	
	public int getNum() {
		return num;
	}
	
	public void setNum(int num) {
		this.num = num;
	}
	
	public void setSubTotal(double subTotal) {
		this.subTotal = subTotal;
	}
	
}

購物車：購物項不確定

//2個屬性3個方法
public class Cart {
    //總計/積分
    private double total = 0;
    //個數不確定的購物項 商品pid<===>CartItem
    Map<String, CartItem> map = new HashMap<>();
    //新增購物項到購物車
    //當使用者點選加入購物車按鈕,可以將當前要購買的商品id,商品數量傳送到服務端,服務端根據商品id查詢到商品資訊
    //有了商品資訊Product物件,有了要購買商品數量,當前的購物項也就可以獲取到了
    public void addCartItemToCar(CartItem cartItem) {
        //獲取到正在想購物車中新增的商品pid
        String pid = cartItem.getProduct().getPid();
        //將當前的購物項加入購物車之前,判斷之前是否買過這類商品
        //如果沒有買過    list.add(cartItem);
        //如果買過: 獲取到原先的數量,獲取到本次的數量,相加之後設定到原先購物項上
        if (map.containsKey(pid)) {
            //獲取到原先的購物項
            CartItem oldItem = map.get(pid);
            oldItem.setNum(oldItem.getNum() + cartItem.getNum());

        } else {
            map.put(pid, cartItem);
        }
    }


    //返回MAP中所有的值
    public Collection<CartItem> getCartItems() {
        return map.values();
    }

    //移除購物項
    public void removeCartItem(String pid) {
        map.remove(pid);
    }

    //清空購物車
    public void clearCart() {
        map.clear();
    }

    //總計是可以經過計算獲取到
    public double getTotal() {
        //向讓總計請0
        total = 0;
        //獲取到Map中所有的購物項
        Collection<CartItem> values = map.values();

        //遍歷所有的購物項,將購物項上的小計相加
        for (CartItem cartItem : values) {
            total += cartItem.getSubTotal();
        }

        return total;
    }


    public void setTotal(double total) {
        this.total = total;
    }

    public Map<String, CartItem> getMap() {
        return map;
    }


    public void setMap(Map<String, CartItem> map) {
        this.map = map;
    }
}

新增商品到購物車

開發流程

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-k1wTaqif-1607233626735)(新增商品到購物車開發流程.png)]

設定form表單，設定隱藏域向服務端傳遞商品pid

<div style="padding:10px;border:1px solid #e7dbb1;width:330px;margin:15px 0 10px 0;;background-color: #fffee6;">
    <div style="margin:5px 0 10px 0;">白色</div>

    <div style="border-bottom: 1px solid #faeac7;margin-top:20px;padding-left: 10px;">購買數量:

        <!-- 向服務端傳送 購買數量-->
        <input id="quantity" name="quantity" value="1" maxlength="4" size="10" type="text"> </div>
    <!-- 向服務端傳送 商品pid-->
    <input type="hidden" name="pid" value="${product.pid}"/>


    <div style="margin:20px 0 10px 0;;text-align: center;">
        <%--加入到購物車 --%>
        <!-- 取消連結的預設行為 -->
        <a href="javascript:void(0)">
            <input id="btnId" style="background: url('${pageContext.request.contextPath}/img/product.gif') no-repeat scroll 0 -600px rgba(0, 0, 0, 0);height:36px;width:127px;" value="加入購物車" type="button">
        </a> &nbsp;收藏商品</div>
</div>

如果一個表單中有多個按鈕，點選不同按鈕提交到不同路徑

<script>
    $(function(){
        $("#btnId").click(function(){
            var formObj=document.getElementById("myForm");
            //formObj.action="${pageContext.request.contextPath}/cartServlet";
            //formObj.method="get";
            formObj.submit();
        });
    });
</script>

在cartServlet下新增addCartItemToCart方法

public String addCartItemToCart(HttpServletRequest request, HttpServletResponse response) throws Exception {

    //從session中獲取購物車
    Cart cart = (Cart) request.getSession().getAttribute("cart");
    if (cart == null) {
        cart = new Cart();
        request.getSession().setAttribute("cart",cart);
    }
    //獲取商品pid和數量
    String pid = request.getParameter("pid");
    int num = Integer.parseInt(request.getParameter("quantity")) ;
    //查詢pid的商品
    ProductService productService = new ProductServiceImp();
    Product product = productService.findProductByPid(pid);
    //新增購物項
    CartItem cartItem = new CartItem();
    cartItem.setNum(num);
    //新增購物項到購物車
    cartItem.setProduct(product);
    cart.addCartItemToCar(cartItem);
    //重定向到/jsp/cart.jsp
    //如果轉發，則重新整理頁面會提交，每次重新整理商品數量都會+1
    response.sendRedirect(request.getContextPath() + "/jsp/cart.jsp");
    return  null;
}

編寫購物車頁面jsp/cart.jsp

<div class="container">
    <c:if test="${empty cart.cartItems}">
        <div class="col-md-12">購物車中暫無資料,趕緊剁手去吧!</div>
    </c:if>

    <c:if test="${not empty cart.cartItems }">
        <div class="row">
            <div style="margin:0 auto; margin-top:10px;width:950px;">
                <strong style="font-size:16px;margin:5px 0;">訂單詳情</strong>
                <table class="table table-bordered">
                    <tbody>
                    <tr class="warning">
                        <th>圖片</th>
                        <th>商品</th>
                        <th>價格</th>
                        <th>數量</th>
                        <th>小計</th>
                        <th>操作</th>
                    </tr>
                    <c:forEach items="${cart.cartItems}" var="item">
                        <tr class="active">
                            <td width="60" width="40%">
                                <input type="hidden" name="id" value="22">
                                <img src="${pageContext.request.contextPath}/${item.product.pimage}" width="70"
                                     height="60">
                            </td>
                            <td width="30%">
                                <a target="_blank">${item.product.pname}</a>
                            </td>
                            <td width="20%">
                                ￥${item.product.shop_price}
                            </td>
                            <td width="10%">
                                <input type="text" name="quantity" value="${item.num}" maxlength="4" size="10">
                            </td>
                            <td width="15%">
                                <span class="subtotal">￥${item.subTotal}</span>
                            </td>
                            <td>
                                    <%-- <a href="javascript:void(0);" class="delete" onclick="delCart(${item.product.pid})">刪除</a> --%>
                                <input type="hidden" name="pid" value="${item.product.pid}"/>
                                <a href="javascript:void(0);" title="${item.product.pid}" class="delete"
                                   id="${item.product.pid}">刪除</a>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>

        <div style="margin-right:130px;">
            <div style="text-align:right;">
                <em style="color:#ff6600;">
                    登入後確認是否享有優惠&nbsp;&nbsp;
                </em> 贈送積分: <em style="color:#ff6600;">${cart.total}</em>&nbsp; 商品金額: <strong
                    style="color:#ff6600;">￥${cart.total}元</strong>
            </div>
            <div style="text-align:right;margin-top:10px;margin-bottom:10px;">
                <a href="javascript:void(0)" id="clear" class="clear">清空購物車</a>

                <a href="${pageContext.request.contextPath}/OrderServlet?method=saveOrder">
                        <%--提交表單 --%>
                    <input type="button" width="100" value="提交訂單" name="submit" border="0"
                           style="background: url('${pageContext.request.contextPath}/img/register.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
                                   height:35px;width:100px;color:white;">
                </a>
            </div>
        </div>

    </c:if>
</div>

商品移除和清空購物車

繫結點選事件

<script>

    $(function () {
        $("#clear").click(function () {
            if (confirm("忍心刪除我嗎?")) {
                location.href = "${pageContext.request.contextPath}/cartServlet?method=clearCart";
            }
        });


        $(".delete").click(function () {
            var pid = this.id;
            if (confirm("忍心刪除我嗎?")) {
                location.href = "${pageContext.request.contextPath}/cartServlet?method=delCartItem&pid=" + pid;
            }
        });
    });
</script>

在cartServlet下新增delCartItem方法和clearCart方法

新增delCartItem方法

public String delCartItem(HttpServletRequest request, HttpServletResponse response) throws IOException {
    //獲取刪除商品的pid
    String id = request.getParameter("pid");
    //獲取購物車
    Cart cart = (Cart) request.getSession().getAttribute("cart");
    cart.removeCartItem(id);
    //重定向到/jsp/cart.jsp
    response.sendRedirect(request.getContextPath() + "/jsp/cart.jsp");
    return null;
}

新增clearCart方法

public String clearCart(HttpServletRequest request, HttpServletResponse response) throws IOException {
    //獲取購物車
    Cart cart = (Cart) request.getSession().getAttribute("cart");
    cart.clearCart();
    //重定向到/jsp/cart.jsp
    response.sendRedirect(request.getContextPath() + "/jsp/cart.jsp");
    return null;
}

flutter 購物車功能
2019-01-25
Flutter
iOS 購物車動畫
2017-02-25
iOS動畫
淘寶買家授權API系列：新增購物車商品、刪除購物車商品、獲取購物車商品列表
2023-03-13
API
完善購物車系統
2017-07-14
購物車的實現原理
2019-03-10
python之購物車程式
2021-09-09
Python
購物車原理以及實現
2018-08-19
jQuery 加入購物車彈窗
2019-01-20
jQuery
vue例項-購物車功能
2018-07-17
Vue
Vue實現購物車效果
2020-10-12
Vue
jquery簡單購物車功能
2017-04-15
jQuery
React實現購物車功能
2016-11-01
React
iOS加入購物車動畫效果
2017-12-13
iOS動畫
使用Vue做一個購物車
2019-03-03
Vue
改版後前端購物車系統
2021-09-09
前端
加入購物車動畫效果實現
2018-08-15
動畫
VUE-書籍購物車案例
2020-11-13
Vue
微信小程式的購物車功能
2021-01-04
微信小程式
【jquery】實現購物車加減
2020-11-30
jQuery
jQuery商品飛入購物車效果
2017-04-18
jQuery
購物車（OK HTTP方法請求）
2018-07-01
HTTP
微信小程式之購物車功能
2017-05-10
微信小程式
原生js實現購物車結算
2019-11-08
JS
Android實現商城購物車功能
2019-06-19
Android
python-購物車程式練習
2018-11-29
Python
vue2.0實現購物車功能
2018-06-26
Vue
二級列表完美實現購物車
2017-09-21
javascript仿天貓加入購物車動畫效果
2015-09-12
JavaScript動畫
AngularJS 實現簡單購物車
2016-05-28
AngularJS
Redis 購物車 - 刪除商品與更新購買數量
2020-10-08
Redis
購物車【JavaWeb小專案簡單版】
2019-03-04
JavaWeb
Vue實現簡單的購物車功能
2019-07-06
Vue
JavaScript 購物車自動計算價格
2019-01-24
JavaScript
JavaScript購物車計算商品總價格
2017-03-24
JavaScript
專案分享四：購物車頁面的更新
2015-12-16
使用SSH+session+mysql實現購物車
2007-12-21
SessionMySql
Hitwise：購物車郵件營銷技巧
2013-03-11
scrapy框架攜帶cookie訪問淘寶購物車
2020-07-06
框架Cookie

購物車模組

抽取購物車模型

新增商品到購物車

開發流程

設定form表單，設定隱藏域向服務端傳遞商品pid

在cartServlet下新增addCartItemToCart方法

編寫購物車頁面jsp/cart.jsp

商品移除和清空購物車

繫結點選事件

在cartServlet下新增delCartItem方法和clearCart方法

相關文章