Relevant DOM operations for developing shopping carts with JavaScript (1)

After designing the homepage, you can perform DOM operations related to the homepage, including click events of adding buttons,

Cookie and json applications, cookies are mainly used to share current data with the shopping cart , to facilitate operation.

Idea:

Step one: Get the node object to be operated

Step two: After the page is loaded, you need to calculate how many local cookies are stored product, assign the number to ccount

Step 3: Bind a click event onclick

to the add shopping cart button corresponding to each product#Change the local cookie

Get the pid of the current product

Loop through the local cookie converted array, take out the pid of each object for comparison, if they are equal, the product is not added for the first time

From the shopping cart Take out the product, and then update the pCount value by appending 1

Otherwise: Create a new object and save it to shopping. At the same time, the quantity of this product is 1

<script>
var ccount = document.getElementById("ccount"); //显示商品总数量的标签节点对象
var btns = document.querySelectorAll(".list dl dd button"); //所有的购物车按钮
//querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。

//约定好用名称为datas的cookie来存放购物车里的数据信息  datas里所存放的就是一个json字符串
var listStr = cookieObj.get("datas");
/*判断一下本地是否有一个购物车（datas），没有的话，创建一个空的购物车，有的话就直接拿来使用*/
if(!listStr) { //没有购物车     datas  json
  cookieObj.set({
    name: "datas",
    value: "[]"
  });
  listStr = cookieObj.get("datas");
}

var listObj = JSON.parse(listStr); //数组
/*循环遍历数组，获取每一个对象中的pCount值相加总和*/
var totalCount = 0; //默认为0
for(var i = 0, len = listObj.length; i < len; i++) {
  totalCount = listObj[i].pCount + totalCount;
}
ccount.innerHTML = totalCount;

/*循环为每一个按钮添加点击事件*/
for(var i = 0, len = btns.length; i < len; i++) {
  btns[i].onclick = function() {
    var dl = this.parentNode.parentNode;
    //parentNode 获取文档层次中的父对象。
    var pid = dl.getAttribute("pid");//获取自定义属性
    //getAttribute() 方法通过名称获取属性的值。
    var arrs = dl.children;//获取所有子节点
    if(checkObjByPid(pid)) {
      listObj = updateObjById(pid, 1)
    } else {
      var imgSrc = arrs[0].firstElementChild.src;
      var pName = arrs[1].innerHTML;
      var pDesc = arrs[2].innerHTML;
      var price = arrs[3].firstElementChild.innerHTML;
      var obj = {
        pid: pid,
        pImg: imgSrc,
        pName: pName,
        pDesc: pDesc,
        price: price,
        pCount: 1
      };
      listObj.push(obj);
      //push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
      listObj = updateData(listObj);
    }
    ccount.innerHTML = getTotalCount();
  }
}
</script>

Create an index.js file and put the above JavaScript code into it.

<script type="text/javascript" src="index.js"></script>

Later called from the HTML page to achieve the function module effect.