©2020-2024 ioDraw All rights reserved
Shopping cart is no stranger to most users , Every double eleven , Double Twelve , We all want to buy what we want , Add to cart ahead of time , wait until 11 month 11 Rush to order in the morning . This is for users , You can manage what you want to buy , You can choose from the shopping cart . It's very convenient for all users to shop , visual .
But some are convenient for users , Simple function , It can be complicated for developers . In order to provide users with convenient functions , A lot of complex business logic is handled by developers . However, after the developers see their own achievements , It will be very fulfilling , Will not care about those who have paid those .
The first step , 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"> Trade 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"> Go to the settlement </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 entire shopping cart page HTML structure , stay HTML In structure , We will extract modules with the same style , through the use of js The way of circulation , According to the quantity of goods, the product list is generated by circulation . If it is in the process of interaction with the background , Back office engineers will also combine products into one list List to our front-end engineers .
next , You need to add style effects to your browser's page , The style here is for everyone to finish by themselves . Loop to assign values to the page , The code for the final product list is 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 smart alarm clock ", "proPrice": "149", "proComm": "1.1" }, { "imgUrl":
"img/03-car-05.png", "proName": " Electronic Thermohygrometer 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 Wristband ", "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 Thermohygrometer Pro 3 Individual clothes ", "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"] + ' Ten thousand people praise </p>'; oLi.innerHTML += '<div
class="add_btn"> add to cart </div>'; oUl.appendChild(oLi); } }
The static page effect of shopping cart is as follows ：
last , And the most complicated part , It's the business logic of shopping cart , We need to click on the product to add to the shopping cart , Items are automatically displayed in the shopping cart module , Add multiple items , Check the select box before the item , The total price of goods can be calculated , Go to the settlement . You can also delete items that have been added to the cart .
Code to implement the total method of commodity price :
// Total the price function getAmount() { // console.log(ys); ns =
document.getElementsByClassName("i_acity"); console.log(ns); sum = 0; // Check box
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; } }
It doesn't matter if we check the check box in the shopping cart , Or the delete item function of shopping cart , Or add or subtract goods , Price accounting is needed . So this method is very important .
Finally, the functions of the shopping cart are as follows ：
Technology