By GokiSoft.com|
14:44 12/01/2021|
Học JQuery
[Share Code] Hướng dẫn tạo dự án POS bán hàng - Lập trình HTML/CSS/JS - Bootstrap/jQuery
#pos.html
<!DOCTYPE html>
<html>
<head>
<title>POS Page</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.item {
padding: 10px;
}
.item:hover {
background-color: #eceef1;
}
</style>
</head>
<body>
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-primary">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<input type="text" name="s" class="form-control" placeholder="Enter searching ..." style="width: 350px">
</li>
</ul>
</nav>
<div class="container">
<div class="row">
<div class="col-md-5" style="background-color: #eceef1">
<table class="table table-bordered table-striped bg-white">
<thead>
<tr>
<th>Thumbnail</th>
<th>Title</th>
<th>Num</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody id="card_list">
</tbody>
</table>
<div class="row bg-white" style="margin: 5px;">
<div class="col-md-8">
Total Money:
</div>
<div class="col-md-4" style="float: right; margin-bottom: 20px;" id="total_money">
</div>
<div class="col-md-8">
Total Money:
</div>
<div class="col-md-4" style="float: right; margin-bottom: 20px;">
<input type="number" name="cash" value="" class="form-control">
</div>
<div class="col-md-8">
Cashback:
</div>
<div class="col-md-4" style="float: right; margin-bottom: 20px;" id="cashback">
</div>
</div>
</div>
<div class="col-md-7">
<div class="row" id="data_list">
</div>
</div>
</div>
</div>
<script type="text/javascript">
var dataList = [
{
'thumbnail': 'https://images5.fanpop.com/image/photos/31000000/Strawberry-strawberries-31082783-460-360.jpg',
'title': 'San pham 1',
'price': '10000'
}, {
'thumbnail': 'https://baoquocte.vn/stores/news_dataimages/lananh/012020/12/11/in_article/viet-nam-la-thi-truong-tiem-nang-cho-trai-cay-tuoi-my.jpg',
'title': 'San pham 2',
'price': '20000'
}, {
'thumbnail': 'https://vnn-imgs-a1.vgcloud.vn/images.kienthuc.net.vn/zoom/800/uploaded/trucchinh2/2019_12_31/meo-don-gian-chon-hoa-qua-tuoi-ngon-an-toan-tuyet-doi.jpg',
'title': 'San pham 1',
'price': '10000'
}, {
'thumbnail': 'https://baoquocte.vn/stores/news_dataimages/lananh/012020/12/11/in_article/viet-nam-la-thi-truong-tiem-nang-cho-trai-cay-tuoi-my.jpg',
'title': 'San pham 2',
'price': '20000'
}, {
'thumbnail': 'https://images5.fanpop.com/image/photos/31000000/Strawberry-strawberries-31082783-460-360.jpg',
'title': 'San pham 1',
'price': '10000'
}, {
'thumbnail': 'https://baoquocte.vn/stores/news_dataimages/lananh/012020/12/11/in_article/viet-nam-la-thi-truong-tiem-nang-cho-trai-cay-tuoi-my.jpg',
'title': 'San pham 2',
'price': '20000'
}, {
'thumbnail': 'https://images5.fanpop.com/image/photos/31000000/Strawberry-strawberries-31082783-460-360.jpg',
'title': 'San pham 1',
'price': '10000'
}, {
'thumbnail': 'https://baoquocte.vn/stores/news_dataimages/lananh/012020/12/11/in_article/viet-nam-la-thi-truong-tiem-nang-cho-trai-cay-tuoi-my.jpg',
'title': 'San pham 2',
'price': '20000'
}, {
'thumbnail': 'https://images5.fanpop.com/image/photos/31000000/Strawberry-strawberries-31082783-460-360.jpg',
'title': 'San pham 1',
'price': '10000'
}, {
'thumbnail': 'https://baoquocte.vn/stores/news_dataimages/lananh/012020/12/11/in_article/viet-nam-la-thi-truong-tiem-nang-cho-trai-cay-tuoi-my.jpg',
'title': 'San pham 2',
'price': '20000'
}, {
'thumbnail': 'https://images5.fanpop.com/image/photos/31000000/Strawberry-strawberries-31082783-460-360.jpg',
'title': 'San pham 1',
'price': '10000'
}, {
'thumbnail': 'https://baoquocte.vn/stores/news_dataimages/lananh/012020/12/11/in_article/viet-nam-la-thi-truong-tiem-nang-cho-trai-cay-tuoi-my.jpg',
'title': 'San pham 2',
'price': '20000'
}, {
'thumbnail': 'https://images5.fanpop.com/image/photos/31000000/Strawberry-strawberries-31082783-460-360.jpg',
'title': 'San pham 1',
'price': '10000'
}, {
'thumbnail': 'https://baoquocte.vn/stores/news_dataimages/lananh/012020/12/11/in_article/viet-nam-la-thi-truong-tiem-nang-cho-trai-cay-tuoi-my.jpg',
'title': 'San pham 2',
'price': '20000'
}, {
'thumbnail': 'https://images5.fanpop.com/image/photos/31000000/Strawberry-strawberries-31082783-460-360.jpg',
'title': 'San pham 1',
'price': '10000'
}, {
'thumbnail': 'https://baoquocte.vn/stores/news_dataimages/lananh/012020/12/11/in_article/viet-nam-la-thi-truong-tiem-nang-cho-trai-cay-tuoi-my.jpg',
'title': 'San pham 2',
'price': '20000'
}
]
var totalMoney = 0
var cardList = []
/**card => {
index: vi tri san pham trong dataList (0, 1, 2, 3, ...)
num: so san pham trong card
}*/
$(function() {
json = localStorage.getItem('cardList')
if(json != null && json != '') {
cardList = JSON.parse(json)
}
//Hien thi danh sach san pham
for (var i = 0; i < dataList.length; i++) {
$('#data_list').append(`<div class="col-md-3 item" style="cursor: pointer;" onclick="addCart(${i})">
<img src="${dataList[i].thumbnail}" style="width: 100%">
<p>${dataList[i].title} - ${i+1}</p>
<p>Price: ${dataList[i].price} VND</p>
</div>`)
}
cash = localStorage.getItem('cash')
$('[name=cash]').val(cash)
showCart()
})
function addCart(index) {
isFind = false
for (var i = 0; i < cardList.length; i++) {
if(cardList[i].index == index) {
//san pham da ton tai => tang num
cardList[i].num++;
isFind = true
break;
}
}
if(!isFind) {
cardList.push({
'index': index,
'num': 1
})
}
//save localStorage
localStorage.setItem('cardList', JSON.stringify(cardList))
showCart()
}
function showCart() {
$('#card_list').empty()
totalMoney = 0
for (var i = 0; i < cardList.length; i++) {
item = dataList[cardList[i].index]
money = item.price * cardList[i].num
totalMoney += money
$('#card_list').append(`<tr>
<td>
<img src="${item.thumbnail}" style="width: 100%">
</td>
<td>${item.title}</td>
<td><input type="num" name="num" class="form-control" value="${cardList[i].num}" style="width: 60px"></td>
<td>${item.title} VND</td>
<td>${money} VND</td>
</tr>`)
}
$('#total_money').html(totalMoney + ' VND')
cash = parseInt($('[name=cash]').val())
cashBack = -totalMoney + cash
$('#cashback').html(cashBack + ' VND')
}
$('[name=cash]').keyup(function() {
cash = parseInt($(this).val())
cashBack = -totalMoney + cash
$('#cashback').html(cashBack + ' VND')
localStorage.setItem('cash', cash)
})
// item = {
// 'thumbnail': 'https://images5.fanpop.com/image/photos/31000000/Strawberry-strawberries-31082783-460-360.jpg',
// 'title': 'San pham 1',
// 'price': '10000'
// }
// dataList.push(item)
// item = {
// 'thumbnail': 'https://baoquocte.vn/stores/news_dataimages/lananh/012020/12/11/in_article/viet-nam-la-thi-truong-tiem-nang-cho-trai-cay-tuoi-my.jpg',
// 'title': 'San pham 2',
// 'price': '20000'
// }
// dataList.push(item)
</script>
</body>
</html>Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
