javascript--实现购物车的实例分享

购物车对于大部分用户来说肯定都不陌生,每当双十一、双十二,我们都要把自己想要买的东西,提前加入购物车中,等到11月11号的凌晨抢时间抓紧下单。这对于用户来说,既可以管理自己想要购买的物品,又可以在购物车中进行选择。对于所有的购物用户来说都很方便、直观。

但是一些对于用户来说方便、简洁的功能,对于开发者来说会很复杂。为了给用户提供便捷的功能,其中大量复杂的业务逻辑都是开发者处理了。不过开发者在看到自己的成果之后,会很有成就感,也就不会在乎那些曾经的那些付出。

第一步,实现购物车的样式布局结构:

<body>
          <div class="header">
              <div class="container clearfix">
                  <div class="header-logo fl">
                      <a class="logo ir" href="" title="">购物车</a>
                  </div>
                  <div class="header-title fl" id="J_miniHeaderTitle">
                      <h2 style="font-size: 30px;">我的购物车</h2>
                  </div>
                  <div class="topbar-info fr" id="J_userInfo">
                      <a class="link" href="">登录</a><span class="sep">|</span><a class="link" href="">注册</a>
                  </div>
              </div>
          </div>

          <div id="car" class="car">
              <div class="head_row hid">
                  <div class="check left"> <i onclick="checkAll()">√</i></div>
                  <div class="img left">&nbsp;&nbsp;全选</div>
                  <div class="name left">商品名称</div>
                  <div class="price left">单价</div>
                  <div class="number left">数量</div>
                  <div class="subtotal left">小计</div>
                  <div class="ctrl left">操作</div>
              </div>
          </div>
          <div id="sum_area">
              <div id="pay">去结算</div>
              <div id="pay_amout">合计:<span id="price_num">0</span>元</div>
          </div>
          <div id="box">
              <h2 class="box_head"><span>买购物车中商品的人还买了</span></h2>
              <ul>
              </ul>
          </div>
      </body>

上述示例代码完成了整个购物车页面的HTML结构,在HTML结构中,我们将样式相同的模块进行提取,通过使用js循环的方式,根据商品的数量进行循环生成商品列表。如果是在与后台的交互过程中,后台工程师也会将商品组合成一个list列表给我们前端工程师。

接下来,就需要给浏览器的页面添加样式效果,这里的样式就让大家自己去完成了。循环给页面赋值,最终生成商品列表的代码如下:

window.onload = function() {
                var aData = [{
                        "imgUrl": "img/03-car-01.png",
                        "proName": " 手环4 NFC版 ",
                        "proPrice": "229",
                        "proComm": "1"
                    },
                    {
                        "imgUrl": "img/03-car-02.png",
                        "proName": " AirDots真无线蓝牙耳机 ",
                        "proPrice": "99",
                        "proComm": "9.7"
                    },
                    {
                        "imgUrl": "img/03-car-03.png",
                        "proName": " 蓝牙温湿度计 ",
                        "proPrice": "65",
                        "proComm": "1.3"
                    },
                    {
                        "imgUrl": "img/03-car-04.png",
                        "proName": " 小爱智能闹钟 ",
                        "proPrice": "149",
                        "proComm": "1.1"
                    },
                    {
                        "imgUrl": "img/03-car-05.png",
                        "proName": "电子温湿度计Pro  ",
                        "proPrice": "750",
                        "proComm": "0.3"
                    },
                    {
                        "imgUrl": "img/03-car-06.png",
                        "proName": "手环3 NFC版 Pro  ",
                        "proPrice": "199",
                        "proComm": "3.3"
                    },
                    {
                        "imgUrl": "img/03-car-07.png",
                        "proName": " 手环3 / 4 通用腕带",
                        "proPrice": "19.9",
                        "proComm": "1.2"
                    },
                    {
                        "imgUrl": "img/03-car-08.png",
                        "proName": "温湿度传感器 ",
                        "proPrice": "45",
                        "proComm": "0.6"
                    },
                    {
                        "imgUrl": "img/03-car-09.png",
                        "proName": "电子温湿度计Pro 3个装  ",
                        "proPrice": "207",
                        "proComm": "0.3"
                    },
                    {
                        "imgUrl": "img/03-car-10.png",
                        "proName": "手环3 ",
                        "proPrice": "199",
                        "proComm": "7.2"
                    }
                ];
                var oBox = document.getElementById("box");
                var oUl = document.getElementsByTagName("ul")[0];

                for (var i = 0; i < aData.length; i++) {
                    var oLi = document.createElement("li");
                    var data = aData[i];

                    oLi.innerHTML += '<div class="pro_img"><img src="' + data["imgUrl"] + '" width="150" height="150"></div>';
                    oLi.innerHTML += '<h3 class="pro_name"><a href="#">' + data["proName"] + '</a></h3>';
                    oLi.innerHTML += '<p class="pro_price">' + data["proPrice"] + '元</p>';
                    oLi.innerHTML += '<p class="pro_rank">' + data["proComm"] + '万人好评</p>';
                    oLi.innerHTML += '<div class="add_btn">加入购物车</div>';
                    oUl.appendChild(oLi);

                }
}

实现的购物车静态页面效果如下:

javascript--实现购物车的实例分享

最后,也是最复杂的部分,就是处理购物车的业务逻辑,我们要在商品上点击加入购物车,商品会自动展示在购物车模块中,加入多个商品,勾选商品前的选择复选框,可以进行核算商品的总价格,去结算。还可以删除已加入购物车的商品。

实现商品价格合计方法的代码:

//进行价格合计
          function getAmount() {
              // console.log(ys);
              ns = document.getElementsByClassName("i_acity");
              console.log(ns);
              sum = 0;
              //选中框
              document.getElementById("price_num").innerText = sum;
              for (y = 0; y < ns.length; y++) {
                  //小计
                  amount_info = ns[y].parentElement.parentElement.lastElementChild.previousElementSibling;
                  num = parseInt(amount_info.innerText);
                  sum += num;
                  document.getElementById("price_num").innerText = sum;
              }
          }

不管我们进行购物车中复选框的勾选功能,还是购物车的删除商品功能,还是进行商品的加减,都需要进行价格的核算。所以这个方法是很重要的。

最终实现的购物车的功能如下:

javascript--实现购物车的实例分享

上一篇:定制安装光盘在RAID卡上安装LInux


下一篇:SaaS模式云数据仓库MaxCompute发布企业级新能力:兼顾成本与性能,持续保护云上数据及服务安全