简单实现购物车相同物品累加

最新推荐文章于 2023-05-12 09:31:23 发布

weixin_30471561

最新推荐文章于 2023-05-12 09:31:23 发布

阅读量1.1k

点赞数 1

文章标签： python javascript c# ViewUI

原文链接：http://www.cnblogs.com/Sroot/p/8043561.html

版权

遇到过这样的一个需求，如何在商城的购物车里面自动累计相同的商品，而不是重新创建一个新的商品项，商品列表不需要使用+-号来控制商品的数量。网上找不到类似的方案，所以就自己写了一个，虽然不是最佳的解决方案。有更好的建议或者写法，请联系我，谢谢。

index.html

  1 <html lang="zh">
  2 
  3 <head>
  4     <meta charset="utf-8">
  5     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6     <meta name="renderer" content="webkit">
  7     <title>礼品商城</title>
  8     <style>
  9         * {
 10             -webkit-box-sizing: border-box;
 11             -moz-box-sizing: border-box;
 12             box-sizing: border-box;
 13             margin: 0;
 14             padding: 0;
 15         }
 16         
 17         html,
 18         body {
 19             overflow-x: hidden;
 20             overflow-y: auto;
 21         }
 22         
 23         .good-list__bd {
 24             overflow: hidden;
 25             margin-top: 1%;
 26             margin-left: 1%;
 27             padding-bottom: 4%;
 28         }
 29         
 30         .good-list__item {
 31             float: left;
 32             overflow: hidden;
 33             width: 32.33333%;
 34             margin-right: 1%;
 35             margin-bottom: 1%;
 36             text-align: center;
 37             border: 1px solid #f5f5f5;
 38         }
 39         
 40         .good-list__image {
 41             width: 100%;
 42             height: 250px;
 43         }
 44         
 45         .good-list__name {
 46             font-size: 20px;
 47             line-height: 42px;
 48             overflow: hidden;
 49             width: 100%;
 50             height: 42px;
 51             margin-bottom: 8px;
 52         }
 53         
 54         .good-list__btn {
 55             font-size: 15px;
 56             line-height: normal;
 57             display: block;
 58             width: 120px;
 59             height: 40px;
 60             margin: 15px auto;
 61             color: #fff;
 62             border: none;
 63             border-radius: 5px;
 64             background-color: #f00;
 65             -ms-flex-item-align: auto;
 66             align-self: auto;
 67         }
 68         
 69         .good-car {
 70             position: fixed;
 71             z-index: 999;
 72             bottom: 0;
 73             width: 100%;
 74             height: 60px;
 75             background: #000;
 76         }
 77         
 78         .good-car-btn {
 79             font-size: 24px;
 80             line-height: 60px;
 81             float: right;
 82             width: 10%;
 83             color: #fff;
 84         }
 85         
 86         .good-car-btn,
 87         .good-icon__round {
 88             height: 60px;
 89             text-align: center;
 90             background: #f40;
 91         }
 92         
 93         .good-icon__round {
 94             position: absolute;
 95             top: -10px;
 96             left: 10px;
 97             width: 60px;
 98             border-radius: 50%;
 99         }
100         
101         .good-icon__point {
102             font-size: .1rem;
103             position: absolute;
104             top: 1px;
105             right: 0;
106             display: block;
107             width: 15px;
108             height: 15px;
109             color: #fff;
110             border-radius: 50%;
111             background: red;
112         }
113         
114         .good-car__name {
115             display: inline-block;
116             vertical-align: top;
117         }
118         
119         .good-icon {
120             display: block;
121             width: 40px;
122             height: 40px;
123             margin: 10px auto;
124         }
125         
126         .good-car__bd {
127             position: absolute;
128             bottom: 60px;
129             display: none;
130             width: 100%;
131             border-top: 1px solid #f00;
132             background: #fff;
133         }
134         
135         .good-car__img {
136             width: 50px;
137             height: 50px;
138         }
139         
140         .good-car__item {
141             padding: 12px;
142         }
143         
144         .good-car__count {
145             float: right;
146             margin-right: 20px;
147         }
148     </style>
149 </head>
150 
151 <body>
152     <div class="wrap">
153         <!-- 商品列表 -->
154         <div class="good-list">
155             <ul class="good-list__bd"></ul>
156         </div>
157         <!-- 购物车 -->
158         <div class="good-car">
159             <ul class="good-car__bd">
160             </ul>
161             <div class="good-icon__round" data-shop="1">
162                 <span class="good-icon__point">0</span>
163                 <img class="good-icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHlSURBVFhH7de9SxxBGMfx06AiRgQrtUij9rYBC18qSUARDOJ/IKQR/R+sU0QFQex8acVCAkYsxcpCsRDFTtOkMlEU/T5wDzwM4+3d3szuifeDD8ety8zjzsPMXoE8J+hCrvEVZU0j1/iKslaQa6Y8dqAFnqLmIstqn2LufehGCrIF5t6HvpxBC8y9D32RorTAeh+myZvrw2W5UGup92G1cfvwANsZmkRibB9m7TMSY/swSzdoRGLcPtyDbzlCeIDOs4qyktV+2A87zwTKThbn8jx0jv/4iLJj+1CKjZF96By7cqGSxN4PO/EIHX8WFSV2H87Ajv8JFUeOOh0gdB9uQsc+kQtpEqsPm/AXOvYiUiVWH47AjjuIVInVhz+gY8rp8QGpY/tQfpr6frJW6hI65jqqSuxzWQquKm4fhiTncAeqituHIf3C+0sDBjBe/JTvpdKKYXxFj1yImT4cwy7TEXrhi/TvH+i9T/iJZgRPO65gi1MXaIPNKOzLgLWE4PkO32RK/m5zCN99QgrvRtDIhuqbTLkb7j/47lNfEDSyLL6JlLtstvd8hhA08h/7JlJjsCn1xG/RguDZgm/CDbiRLeUa7r3Sf98QJfLWsYBz3Bc/5/Da24gUuQZ5Ynf4DdkTS6RQeAGh7aMfK2AISAAAAABJRU5ErkJggg==">
164             </div>
165             <div class="good-car-btn">去结算</div>
166         </div>
167     </div>
168     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
169     <script type="text/javascript" src="./index.js"></script>
170 </body>
171 
172 </html>

index.js

var getlistGoodJsonHtml = "", //商品列表
    listHtml = "", //购物车商品列表
    shopArr = [], //购物车数组
    num = 1; //商品数量

$(function() {

    var listGoodJson = {
        "goods": [{
                "id": "1",
                "name": "商品1",
                "img": "http://via.placeholder.com/500x500"
            }, {
                "id": "2",
                "name": "商品2",
                "img": "http://via.placeholder.com/500x500"
            }, {
                "id": "3",
                "name": "商品3",
                "img": "http://via.placeholder.com/500x500"
            }, {
                "id": "4",
                "name": "商品4",
                "img": "http://via.placeholder.com/500x500"
            }, {
                "id": "5",
                "name": "商品5",
                "img": "http://via.placeholder.com/500x500"
            }, {
                "id": "6",
                "name": "商品6",
                "img": "http://via.placeholder.com/500x500"
            }

        ]
    }

    //初始化商品列表
    initGoodList();

    function initGoodList() {
        var getlistGoodJson = listGoodJson.goods;
        for (var x in getlistGoodJson) {
            getlistGoodJsonHtml += "<li class='good-list__item' id='" + getlistGoodJson[x].id + "'><img class='good-list__image' src='" + getlistGoodJson[x].img + "'><p class='good-list__name'>" + getlistGoodJson[x].name + "</p><button class='good-list__btn'>兑换</button></li>"
        }
        $(".good-list__bd").append(getlistGoodJsonHtml);
    }

    //点击元素
    $(".good-list__bd").on("click", ".good-list__btn", function(e) {

        //获取点击商品的父节点            
        var parent = $(this)[0].parentNode;

        //获取点击的商品信息
        var goodID = parent.id;
        var goodPicUrl = parent.getElementsByClassName("good-list__image")[0].currentSrc;
        var goodName = parent.getElementsByClassName("good-list__name")[0].childNodes[0].wholeText;

        var goodsObj = {
            goodID: goodID,
            goodPicUrl: goodPicUrl,
            goodName: goodName
        }

        //转化成字符串
        var goodsObjStr = JSON.stringify(goodsObj);
        var shopArrStr = JSON.stringify(shopArr);

        //判断商品是否添加在购物车列表
        if (shopArrStr.indexOf(goodsObjStr) > 0) {
            // 在已有的购物车商品列表添加数量
            listHtml = "";
            num = parseInt($("#good" + goodsObj.goodID).text()) + 1;
            $("#good" + goodsObj.goodID).text(num);
        } else {
            // 新建商品item
            shopArr.push(goodsObj);
            listHtml = "<li class='good-car__item'><img class='good-car__img' src='" + goodsObj.goodPicUrl + "'/> <span class='good-car__name' >" + goodsObj.goodName + "</span><div class='good-car__count'>数量：<span class='good-car__num' id='good" + goodsObj.goodID + "'>1</span></div></li>";
        }
        $(".good-icon__point").text(shopArr.length);
        $(".good-car__bd").append(listHtml)
    });

    //购物车隐藏显示
    $(".good-icon__round").on("click", function() {
        if ($(".good-icon__round").attr("data-shop") === '1') {
            $(".good-car__bd").show();
            $(".good-icon__round").attr("data-shop", "0");
        } else {
            $(".good-car__bd").hide();
            $(".good-icon__round").attr("data-shop", "1");
        }
    });

})