JavaScript to implement the most complete code analysis of a simple shopping cart (ES6 object-oriented)

This article shares the specific code of JavaScript to implement a simple shopping cart for your reference. The specific content is as follows

Code:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>ES6 Shopping Cart</title>
  <style type="text/css">
   table {
    width: 50%;
    position: relative;
    margin: 0px auto;
    border-collapse: collapse;
    border: 1px solid gray;
    box-sizing: border-box;
   }
   th {
    background-color: coral;
    height: 2.5em;
    margin: 0 auto;
   }
   tr {
    height: 2.5em;
    margin: 0 auto;
    text-align: center;
   }
   .box {
    margin: auto;
    width: 50%;
   }
  </style>
 </head>
 <body>
  <h3 style="text-align: center;margin-top: 100px;">Guess you like</h3>
  <table border="1px" id="update-table">
   <tbody>
   <tr>
    <th>Serial number</th>
    <th>Product Name</th>
    <th>Unit Price</th>
    <th>Operation</th>
   </tr>
   <tr class="update-goods">
    <td>1</td>
    <td>Roujiamo</td>
    <td>8</td>
    <td><input type="button" class="update" value="Add to cart" /></td>
   </tr>
   <tr class="update-goods">
    <td>2</td>
    <td>Knead the dough</td>
    <td>6</td>
    <td><input type="button" class="update" value="Add to cart" /></td>
   </tr>
   <tr class="update-goods">
    <td>3</td>
    <td>Frozen</td>
    <td>3</td>
    <td><input type="button" class="update" value="Add to cart" /></td>
   </tr>
   <tr class="update-goods">
    <td>4</td>
    <td>Mutton Soup Bun</td>
    <td>25</td>
    <td><input type="button" class="update" value="Add to cart" /></td>
   </tr>
   </tbody>
  </table>
  <h3 style="text-align: center;">Shopping Cart</h3>
  <table border="1px" id="goods">
   <tbody>
    <tr>
     <th>Serial number</th>
     <th>Product Name</th>
     <th>Quantity</th>
     <th>Unit Price</th>
     <th>Subtotal</th>
     <th>Operation</th>
    </tr>
    <tr>
     <td>1</td>
     <td>Roujiamo</td>
     <td>
      <button type="button">-</button>
      <span class="goods-num">0</span>
      <button type="button">+</button>
     </td>
     <td>
      Unit price: <span class="goods-price">8</span>
     </td>
     <td>
      Subtotal: <span class="goods-single-price">0</span>
     </td>
     <td>
      <input type="button" class="deled" value="Delete" />
     </td>
    </tr>
    <tr>
     <td>2</td>
     <td>Knead the dough</td>
     <td>
      <button type="button">-</button>
      <span class="goods-num">0</span>
      <button type="button">+</button>
     </td>
     <td>
      Unit price:<span class="goods-price">6</span>
     </td>
     <td>
      Subtotal: <span class="goods-single-price">0</span>
     </td>
     <td>
      <input type="button" class="deled" value="Delete" />
     </td>
    </tr>
    <tr>
     <td colspan="5">
      There are <span id="goods-total-num">0</span> items in total, with a total cost of <span id="goods-total-price">0</span> yuan.
     </td>
    </tr>
   </tbody>
  </table>
 </body>
</html>
<script type="text/javascript">
 class Cart {
  constructor() {
   this.eventBind();
  }
  //Get and update the total quantity of goods getGoodsNumAndUpdate() {
   //Get the quantity of all goods let oGoodsNum = document.getElementsByClassName("goods-num");
   //Store the total value of the number of goods let goodsTotalNum = 0;
   //Loop through all goods for (let i = 0; i < oGoodsNum.length; i++) {
    //Add the quantity of all looped goods goodsTotalNum += Number(oGoodsNum[i].innerHTML);
   }
   //Get the total number of goods in the summary column let oGoodsTotalNum = document.getElementById("goods-total-num");
   //Assign the sum of the number of goods obtained in the loop to the total number of goods in the summary column oGoodsTotalNum.innerHTML = goodsTotalNum;
  }
  //Get and update the total price of the goods getGoodsPriceAndUpdate() {
   //Get the subtotal let oGoodsSinglePrice = document.getElementsByClassName("goods-single-price");
   //Create a new element to accept the subtotal value (for the final assignment to the element that obtains the subtotal)
   let goodsTotalPrice = 0 ;
   //Loop through all subtotals for (let i = 0; i < oGoodsSinglePrice.length; i++) {
    //Add all subtotal quantities looped through goodsTotalPrice += Number(oGoodsSinglePrice[i].innerHTML);
   }
   //Get the total price of the summary column let oGoodsTotalPrice = document.getElementById("goods-total-price");
   //Assign the sum of the subtotal quantities obtained in the loop to the total price in the summary column oGoodsTotalPrice.innerHTML = goodsTotalPrice;
  }
  //2. Get the subtotal getSinglePrice(num, price) {
   //The subtotal of each row is equal to the product of the unit price and the product of this row return num * price;
  }
  // Plus button method addGoods(btn) {
   //Get the previous sibling element of the plus sign (the middle value)
   let oGoodsNum = btn.previousElementSibling;
   //1. After clicking, the value increases by one oGoodsNum.innerHTML = Number(oGoodsNum.innerHTML) + 1;
   //Get the unit price (the child element of the next element of the btn parent element)
   let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
   //Get the subtotal (the child element of the next element of the next element of the btn parent element)
   let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
   //2. Re-obtain the subtotal value and assign it to the subtotal oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML);
   //3. Get and update the total quantity of goods (call re-execute > refresh data)
   this.getGoodsNumAndUpdate();
   //4. Get and update the total price of the goods (call Re-execute > Refresh data)
   this.getGoodsPriceAndUpdate();
  }
  //Minus button method minGoods(btn) {
   //Get the next sibling element of the minus sign (the middle value)
   let oGoodsNum = btn.nextElementSibling;
   //Judge if the number of goods is greater than zero if (oGoodsNum.innerHTML > 0) {
    //1. After clicking, the value decreases by one oGoodsNum.innerHTML = oGoodsNum.innerHTML - 1;
    //Get the unit price (the child element of the next element of the btn parent element)
    let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
    //Get the subtotal (the child element of the next element of the next element of the btn parent element)
    let oSinglePrice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
    //2. Re-obtain the subtotal value and assign it to the subtotal oSinglePrice.innerHTML = this.getSinglePrice(oGoodsNum.innerHTML, oPrice.innerHTML);
    //3. Get and update the total quantity of goods (call re-execute > refresh data)
    this.getGoodsNumAndUpdate();
    //4. Get and update the total price of the goods (call Re-execute > Refresh data)
    this.getGoodsPriceAndUpdate();
   }
  }
  //Delete button method delGoods(btn) {
   //Get the shopping cart table element let god = document.getElementById("goods");
   //Get the parent element of this button's parent element let oTr = btn.parentNode.parentNode;
   //Then delete this element (here refers to the entire tr element selected by the button)
   oTr.remove();
   //Reorder the numbers (loop through all the tr sub-elements under the table element named god) (start from the second sub-element and remove the last subtotal row)
   for (let i = 1; i < god.firstElementChild.children.length - 1; i++) {
    //Assign the element value i after the loop to the first child element td under the child element tr under the table element named god
    god.firstElementChild.children[i].firstElementChild.innerHTML = i;
   }
   //3. Get and update the total quantity of goods (call re-execute > refresh data)
   this.getGoodsNumAndUpdate();
   //4. Get and update the total price of the goods (call Re-execute > Refresh data)
   this.getGoodsPriceAndUpdate();
  }
  
  //Add order method update() { 
   //Get all elements with class name update let btn = document.getElementsByClassName("update");
   //Get all elements with id name update-table let updateTable = document.getElementById("update-table");
   //Get the shopping cart table element let god = document.getElementById("goods"); 
   //Get all the child elements tr of the first child element tbody of the shopping cart table element
   let gods = god.firstElementChild.children;
   //The target element is assigned to false
   let flag = false;
   //This this is to avoid the cart object being overwritten in the event body let that = this;
   //Loop through all elements with class name update for (let i = 0; i < btn.length; i++) {
    //Click event with class name update btn[i].onclick = function() {
     //Loop through all the sub-elements tr of the first sub-element tbody of the shopping cart table element
     for (let j = 0; j < gods.length - 1; j++) {
      //Loop to determine whether there is this dish in the menu, if there is this dish, add 1;
      //The original intention is to find the product with the same name in the shopping cart. If there is one, execute the number of products in the shopping cart data + 1; if not, set the flag to true and jump out of the judgment //this is the class name of the update element input tag //The content of the first child element under the traversal of all child elements tr in the shopping cart table == the content of the previous sibling element of the parent element td with the class name update element input if (gods[j].children[1].innerHTML == this.parentNode.previousElementSibling.previousElementSibling.innerHTML) {
       //The content of the second sub-element under the traversal of all sub-elements tr in the shopping cart table (that is, the number of items in the shopping cart) + 1
       gods[j].children[2].children[1].innerHTML = " " + (Number(gods[j].children[2].children[1].innerHTML) + 1) + " ";
       //The content of the fourth sub-element under the traversal of all sub-elements tr in the shopping cart table (that is, the value of the subtotal in the shopping cart is assigned)
       gods[j].children[4].innerHTML = 'Subtotal: <span class="goods-single-price">' +
       gods[j].children[2].children[1].innerHTML * gods[j].children[3].firstElementChild.innerHTML + '</span>';
       //3. Get and update the total quantity of goods (call re-execute > refresh data)
       that.getGoodsNumAndUpdate();
       //4. Get and update the total price of the goods (call Re-execute > Refresh data)
       that.getGoodsPriceAndUpdate();
       //Assign flag value to false
       flag = false;
       //Jump out of this loop break;
      } else {
      //Execute when the content of the first child element of all child elements tr traversed in the shopping cart table!= the content of the previous sibling element of the parent element td with the class name update element input//Assign flag to true
       flag = true;
      }
     }
     if (flag) {
      //If there is no such dish, add //Create a node tr
      let tr = document.createElement("tr");
      //Add the content of this node tr.innerHTML=
       '<td>'+(gods.length-1)+'</td>'+
       '<td>'+this.parentNode.previousElementSibling.previousElementSibling.innerHTML+
       '</td><td><button type="button">-</button><span class="goods-num"> 1 </span><button type="button"> +</button></td><td>Unit price:<span class="goods-price">' +
       this.parentNode.previousElementSibling.innerHTML +
       '</span></td><td>Subtotal:<span class="goods-single-price">' + 
       this.parentNode.previousElementSibling.innerHTML +
       '</span></td><td><input type="button" class="deled" value="Delete" /></td>';
       //Add new elements to tbodygod.firstElementChild.insertBefore(tr, god.firstElementChild.lastElementChild);
      //Trigger event button that.eventBind();
      //3. Get and update the total quantity of goods (call re-execute > refresh data)
      that.getGoodsNumAndUpdate();
      //4. Get and update the total price of the goods (call Re-execute > Refresh data)
      that.getGoodsPriceAndUpdate();
     }
    }
    // Rearrange the order of the items in Guess You Like for (let i = 1; i < updateTable.firstElementChild.children.length; i++) {
     //Assign the sorted values to the newly added product serial number updateTable.firstElementChild.children[i].firstElementChild.innerHTML = i;
    }
   }
  }
  //Trigger event button eventBind() {
   //Get all buttons with tag name botton let oBtns = document.getElementsByTagName("button");
   //This this is to avoid the cart object being overwritten in the event body let that = this;
   //Loop all botton buttons for (let i = 0; i < oBtns.length; i++) {
    if (i % 2) {//Triggers addGoods() method when it is an odd number oBtns[i].onclick = function() {
      that.addGoods(this);
     }
    } else {//Trigger minGoods() method when it is an even number oBtns[i].onclick = function() {
      that.minGoods(this);
     }
    }
   }
   //Get all elements with class name deled let oDelBtns = document.getElementsByClassName("deled");
   //Loop through all deled elements for (let i = 0; i < oDelBtns.length; i++) {
    //Click event of deled element oDelBtns[i].onclick = function() {
     //Call delGoods() method to perform deletion effect that.delGoods(this);
    }
   }
   //Call to add order this.update();
  }
 }
 let c = new Cart();
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Understanding and application of JavaScript ES6 destructuring operator
JavaScript to implement the most complete code analysis of simple carousel (ES6 object-oriented)
Detailed explanation of the differences between var, let and const in JavaScript es6
Differences between ES6 inheritance and ES5 inheritance in js
Detailed explanation of how Node.js handles ES6 modules
Detailed explanation of JS ES6 coding standards
JS quickly master ES6 class usage
Detailed explanation of JS ES6 variable destructuring assignment
Several magical uses of JS ES6 spread operator
About front-end JavaScript ES6 details

<<: How to use the MySQL authorization command grant

>>: nginx solves the problem of slow image display and incomplete download