Native js realizes shopping cart function
- 2021-08-28 07:17:59
- OfStack
In this paper, we share the specific code of js shopping cart function for your reference, the specific contents are as follows
Using html with native js to realize shopping cart function
* Realize the addition and subtraction of the quantity of shopping cart goods, note that the minimum quantity is 1, and the quantity input can only be numbers
* Realize the removal of shopping cart items
* You can design several more product information on the same page. Each product has price, picture, name and Add to Shopping Cart button. Click the button and add to the shopping cart
* Realize the calculation of the total price of shopping cart goods
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Commodity </title>
<style>
html,body{ margin: 0;}
.row{
width:100%;
height:300px;
}
.col{
width:200px;
height:216px;
margin: 0px 1px 0px 1px; padding-top: 2px;
border:solid black 1px;
float:left;
text-align:center;
}
.col img { width: 150px;}
</style>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
function calculate() {
var tbody = document.getElementById("tb");
var prices = tbody.querySelectorAll("td:nth-child(4)");
var numbers = tbody.querySelectorAll("td:nth-child(5)>input[type=number]");
var checkboxes = tbody.querySelectorAll("th:nth-child(1)>input");
//console.log(prices);
//console.log(numbers);
//console.log(checkboxes);
var total=0;
for(var i = 0; i < prices.length; i++) {
console.log(" Price: " +parseInt(prices[i].innerText)+" Quantity: "+parseInt(numbers[i].value) + " Whether to check :" + checkboxes[i].checked);
if(checkboxes[i].checked){
total += parseInt(prices[i].innerText)*parseInt(numbers[i].value);
}
}
console.log(" Total price: " + total);
document.getElementById("total").innerText = total;
}
// Remove merchandise
function del(me) {
var tr = me.parentNode.parentNode;
var tbody = tr.parentNode;
tbody.removeChild(tr);
calculate();
}
// Increase the quantity of goods
function jia(me) {
var td = me.parentNode;
var inputs = td.getElementsByTagName("input"); // Find this td Under all input Label
// inputs[1].value = inputs[1].value - 0 + 1; // Use -0 Convert the method into numbers
// parseInt Turn a string to an integer parseFloat Convert a string to a decimal
inputs[1].value = parseInt(inputs[1].value) + 1;
calculate();
}
// Reduce the quantity of goods
function jian(me) {
var td = me.parentNode;
var num = td.querySelector("input[type=number]");// Find only those with type=number Property of input Label
var r = num.value - 1;
if( r >= 1) { // Only the result of subtraction is greater than or equal to 1 You need to change the value of the text box when the
num.value = r;
calculate();
}
}
// Change the selected state of the check box
function check(me) {
var tbody = document.getElementById("tb");
var inputs = tbody.querySelectorAll("th input");
for(var i = 0; i <inputs.length; i++) {
inputs[i].checked = me.checked; // According to me Adj. checked Status to modify each of the following checked Status
}
calculate();
}
// Add merchandise to shopping cart
function add(me) {
var tbody = document.getElementById("tb");
var div = me.parentNode;
var spans = div.getElementsByTagName("span"); // Obtaining the name and price of the product span
var name = spans[0].innerText; // Get the name of the product
var col_1 = tbody.querySelectorAll("td:nth-child(2)"); // nth-child As what child
var found = null; // found Variable represents the value found in the shopping cart td
for(var i = 0; i<col_1.length; i++) {
if( col_1[i].innerText == name) {
found = col_1[i];
break;
}
}
if(found != null) { // Commodity name exists
// Number of modifications found It was found td
var tr = found.parentNode;
var input = tr.querySelector("td:nth-child(5)>input:last-child");
console.log(input);
jia(input);
} else { // Product name does not exist
// Add merchandise
var tr = document.createElement("tr");
var th = document.createElement("th");
th.innerHTML = '<input type="checkbox" checked onclick="calculate()">';
var td1 = document.createElement("td");
td1.innerText = spans[0].innerText;
var td2 = document.createElement("td");
var img = document.createElement("img");
img.src = div.getElementsByTagName("img")[0].src;
img.width = "100";
td2.appendChild(img);
var td3 = document.createElement("td");
td3.innerText = spans[1].innerText;
var td4 = document.createElement("td");
td4.innerHTML = '<input type="button" value="-" onclick="jian(this)"><input type="number" value="1"><input type="button" value="+" onclick="jia(this)">';
var td5 = document.createElement("td");
td5.innerHTML = '<input type="button" value=" Remove " onclick="del(this)">';
tr.appendChild(th);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tbody.appendChild(tr);
calculate();
}
}
</script>
</head>
<body>
<!-- Write the shopping cart code here -->
<div>
<table border="1" width="100%">
<thead>
<tr>
<th><input type="checkbox" onclick="check(this)"></th>
<th> Picture </th>
<th> Name </th>
<th> Price </th>
<th> Quantity </th>
<th> Remove </th>
</tr>
</thead>
<tbody id="tb">
<tr>
<th><input type="checkbox" onclick="calculate()"></th>
<td> Commodity 1</td>
<td><img src="images/5a0cf6bfN92a5a597.jpg" width="100"></td>
<td>3000.00</td>
<td>
<input type="button" value="-" onclick="jian(this)">
<input type="number" value="1">
<input type="button" value="+" onclick="jia(this)">
</td>
<td><input type="button" value=" Remove " onclick="del(this)"></td>
</tr>
<tr>
<th><input type="checkbox" onclick="calculate()"></th>
<td> Commodity 2</td>
<td><img src="images/5a0cf672N3c785b7a.jpg" width="100"></td>
<td>2000.00</td>
<td>
<input type="button" value="-" onclick="jian(this)">
<input type="number" value="1">
<input type="button" value="+" onclick="jia(this)">
</td>
<td><input type="button" value=" Remove " onclick="del(this)"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6"> Total price <span id="total">0</span> Yuan </td>
</tr>
</tfoot>
</table>
</div>
<!-- Commodity list -->
<div class="row">
<div class="col">
<p><span> Commodity 1</span> Price :<span>3000.00</span></p>
<img src="images/5a0cf6bfN92a5a597.jpg">
<input type="button" value=" Add to shopping cart " onclick="add(this)">
</div>
<div class="col">
<p><span> Commodity 2</span> Price :<span>2000.00</span></p>
<img src="images/5a0cf672N3c785b7a.jpg">
<input type="button" value=" Add to shopping cart " onclick="add(this)">
</div>
<div class="col">
<p><span> Commodity 3</span> Price :<span>4000.00</span></p>
<img src="images/5a1f5ed3Nfa577958.jpg">
<input type="button" value=" Add to shopping cart " onclick="add(this)">
</div>
<div class="col">
<p><span> Commodity 4</span> Price :<span>3500.00</span></p>
<img src="images/5a1f5664Nfa934fac.jpg">
<input type="button" value=" Add to shopping cart " onclick="add(this)">
</div>
</div>
</body>
</html>