[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

Name: Học Lập Trình Từ A - Z (HTML/CSS/JS - Bootstrap/JQuery - AngularJS - PHP/Laravel - Java v.v)
Address: Số 8, Tôn Thất Thuyết, Mỹ Đình, Từ Liêm, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0762103668
Price range: $$$
<!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>
Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)
[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

Tags:

Phản hồi từ học viên

5
