Shopping cart is certainly not new to most users. Every double 11 and double 12, we should add the things we want to buy in advance into the shopping cart, and wait until the early morning of November 11 to rush to order. For users, they can not only manage the items they want to buy, but also choose from the shopping cart. It is convenient and intuitive for all shopping users.
But some functions that are convenient and simple for users will be very complex for developers. In order to provide users with convenient functions, a lot of complex business logic is handled by developers. However, when developers see their achievements, they will have a sense of achievement, and they will not care about what they have paid.
The first step is to realize the style layout structure of shopping cart:
<body> <div class="header"> <div class="container clearfix"> <div class="header-logo fl"> <a class="logo ir" href="" title="">Shopping Cart</a> </div> <div class="header-title fl" id="J_miniHeaderTitle"> <h2 style="font-size: 30px;">My shopping cart</h2> </div> <div class="topbar-info fr" id="J_userInfo"> <a class="link" href="">Sign in</a><span class="sep">|</span><a class="link" href="">register</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"> Select all</div> <div class="name left">Commodity name</div> <div class="price left">Unit Price</div> <div class="number left">number</div> <div class="subtotal left">Subtotal</div> <div class="ctrl left">operation</div> </div> </div> <div id="sum_area"> <div id="pay">To settle</div> <div id="pay_amout">total:<span id="price_num">0</span>element</div> </div> <div id="box"> <h2 class="box_head"><span>The people who bought the goods in the shopping cart also bought them</span></h2> <ul> </ul> </div> </body>
The above example code completes the HTML structure of the whole shopping cart page. In the HTML structure, we extract the modules with the same style, and generate the goods list according to the quantity of goods by using js circulation. If it is in the process of interaction with the background, the background engineer will also combine the products into a list to our front-end engineer.
Next, you need to add style effects to the browser's pages, and the styles here let you do it by yourself. Cycle to assign values to the page, and finally generate the code of commodity list as follows:
window.onload = function() { var aData = [{ "imgUrl": "img/03-car-01.png", "proName": " Bracelet 4 NFC edition ", "proPrice": "229", "proComm": "1" }, { "imgUrl": "img/03-car-02.png", "proName": " AirDots True wireless Bluetooth headset ", "proPrice": "99", "proComm": "9.7" }, { "imgUrl": "img/03-car-03.png", "proName": " Bluetooth hygrometer ", "proPrice": "65", "proComm": "1.3" }, { "imgUrl": "img/03-car-04.png", "proName": " Xiaoai intelligent alarm clock ", "proPrice": "149", "proComm": "1.1" }, { "imgUrl": "img/03-car-05.png", "proName": "Electronic hygrometer Pro ", "proPrice": "750", "proComm": "0.3" }, { "imgUrl": "img/03-car-06.png", "proName": "Bracelet 3 NFC edition Pro ", "proPrice": "199", "proComm": "3.3" }, { "imgUrl": "img/03-car-07.png", "proName": " Bracelet 3 / 4 Universal wrist strap", "proPrice": "19.9", "proComm": "1.2" }, { "imgUrl": "img/03-car-08.png", "proName": "Temperature and humidity sensor ", "proPrice": "45", "proComm": "0.6" }, { "imgUrl": "img/03-car-09.png", "proName": "Electronic hygrometer Pro 3 A suit ", "proPrice": "207", "proComm": "0.3" }, { "imgUrl": "img/03-car-10.png", "proName": "Bracelet 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"] + 'element</p>'; oLi.innerHTML += '<p class="pro_rank">' + data["proComm"] + 'Well received by ten thousand people</p>'; oLi.innerHTML += '<div class="add_btn">add to cart</div>'; oUl.appendChild(oLi); } }
The static page effect of shopping cart is as follows:
Finally, the most complex part is to process the business logic of shopping cart. We need to click Add shopping cart to the goods. The goods will be automatically displayed in the shopping cart module, adding multiple goods. Check the check box before the goods to check the total price of the goods and settle. You can also delete items that have been added to the cart.
Code to implement the commodity price total method:
//Total price function getAmount() { // console.log(ys); ns = document.getElementsByClassName("i_acity"); console.log(ns); sum = 0; //Checkboxes document.getElementById("price_num").innerText = sum; for (y = 0; y < ns.length; y++) { //Subtotal amount_info = ns[y].parentElement.parentElement.lastElementChild.previousElementSibling; num = parseInt(amount_info.innerText); sum += num; document.getElementById("price_num").innerText = sum; } }
Whether we check the check box in the shopping cart, delete the goods in the shopping cart, or add or subtract the goods, we need to carry out price accounting. So this method is very important.
The final functions of the shopping cart are as follows:
