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"); //顯示商品總數(shù)量的標簽節(jié)點對象
var btns = document.querySelectorAll(".list dl dd button"); //所有的購物車按鈕
//querySelectorAll返回匹配的元素集合，如果沒有匹配項，返回空的nodelist(節(jié)點數(shù)組)。

//約定好用名稱為datas的cookie來存放購物車里的數(shù)據(jù)信息  datas里所存放的就是一個json字符串
var listStr = cookieObj.get("datas");
/*判斷一下本地是否有一個購物車（datas），沒有的話，創(chuàng)建一個空的購物車，有的話就直接拿來使用*/
if(!listStr) { //沒有購物車     datas  json
  cookieObj.set({
    name: "datas",
    value: "[]"
  });
  listStr = cookieObj.get("datas");
}

var listObj = JSON.parse(listStr); //數(shù)組
/*循環(huán)遍歷數(shù)組，獲取每一個對象中的pCount值相加總和*/
var totalCount = 0; //默認為0
for(var i = 0, len = listObj.length; i < len; i++) {
  totalCount = listObj[i].pCount + totalCount;
}
ccount.innerHTML = totalCount;

/*循環(huán)為每一個按鈕添加點擊事件*/
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;//獲取所有子節(jié)點
    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() 方法可向數(shù)組的末尾添加一個或多個元素，并返回新的長度。
      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.