1、 概述
创建三个文件:d10-1.php、addcar.php、showcart.php
2、源代码
- d10-1.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品列表</title>
</head>
<body>
<?php
$proList=[
["id"=>"001","name"=>"奶茶","price"=>30],
["id"=>"002","name"=>"汉堡王","price"=>20],
["id"=>"003","name"=>"六个圈","price"=>10],
["id"=>"004","name"=>"咖啡","price"=>15]
];
?>
<style type="text/css">
.prolist{
margin-left: 400px;
margin-top: 50px;
}
.thead{
background-color: #aaffff;
}
thead tr th{
width: 150px;
}
.tbody{
text-align: center;
}
tbody tr:nth-of-type(2n){
background-color: #ddd;
}
tbody td a{
width: 20px;
height: 20px;
background-color: #aaa;
text-decoration-line: none;/*下划线*/
border-radius: 3px;/*圆角*/
display: inline-block;
text-align: center;
}
</style>
<div class="prolist">
<table>
<caption><h2>商品列表</h2></caption>
<thead class="thead">
<tr>
<th>商品编号</th><th>商品名称</th><th>价格</th><th>添加到购物车</th>
</tr>
</thead>
<tbody class="tbody">
<?php foreach ($proList as $v) { ?>
<tr>
<td><?=$v["id"]?></td>
<td><?=$v["name"]?></td>
<td><?=$v["price"]?></td>
<td><a href="addcart.php?id=<?=$v["id"]?>&name=<?=$v["name"] ?>&price=<?=$v["price"]?>&type=upd">+</a></td>
</tr>
<?php } ?>
</tbody>
<tfoot>
<tr>
<td><a href="showcart.php">显示购物车</a></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
- addcar.php
<?php
session_start();//临时存储数据(对话框)
$id = $_GET["id"];
$name = $_GET["name"];
$price = $_GET["price"];
$type = $_GET["type"];
if (empty($_SESSION["cart"])) {
$cart = [];
//添加商品
$cart[]=["id"=>$id,"name"=>$name,"price"=>$price,"count"=>1];
}else{
$cart = $_SESSION["cart"];
//添加商品给$cart
$idList = array_column($cart,"id");//获取id值
if (in_array($id,$idList)) {
//添加的商品已经存在时
switch ($type) {
case 'upd':
case 'add':
$k = array_search($id,$idList);//找出id的下标
$cart[$k]["count"]++;
break;
case 'sub':
$k = array_search($id,$idList);
$cart[$k]["count"]==0?0:$cart[$k]["count"]--;
break;
}
}else{
//添加的商品在购物车中不存在时
$cart[]=["id"=>$id,"name"=>$name,"price"=>$price,"count"=>1];
}
}
$_SESSION["cart"] = $cart;
echo "<script>window.history.back(-1);</script>";
?>
- showcart.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style type="text/css">
.cart{
margin-left: 300px;
margin-top: 50px;
}
.thead{
background-color: #aaffff;
}
thead tr th{
width: 150px;
}
.tbody{
text-align: center;
}
tbody tr:nth-of-type(2n){
background-color: #ddd;
}
tbody td a{
width: 20px;
height: 20px;
background-color: #aaa;
text-decoration-line: none;/*下划线*/
border-radius: 3px;/*圆角*/
display: inline-block;
text-align: center;
}
.total{
text-align: center;
}
tfoot tr td{
text-align: center;
}
</style>
</head>
<body>
<?php
session_start();
$cart = $_SESSION["cart"];
?>
<div class="cart">
<table>
<caption><h2>购物车</h2></caption>
<thead class="thead">
<tr>
<td><input type="checkbox" id="chk_all"></td>
<th>编号</th>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>金额</th>
</tr>
</thead>
<tbody class="tbody">
<?php foreach ($cart as $v): ?>
<tr>
<td><input type="checkbox" class="chk_item" name="<?=$v["id"] ?>"></td>
<td><?=$v["id"] ?></td>
<td><?=$v["name"] ?></td>
<td><?=$v["price"] ?></td>
<td><a href="addcart.php?id=<?=$v["id"] ?>&type=sub">-</a><?=$v["count"] ?><a href="addcart.php?id=<?=$v["id"] ?>&type=add">+</a></td>
<td class="amount"><?=$v["price"]*$v["count"] ?></td>
</tr>
<?php endforeach ?>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>总金额:</td>
<?php $s = 0 ?>
<td>
<?php foreach ($cart as $v) :?>
<?php $s += $v["price"]*$v["count"]?>
<?php endforeach ?>
<?php echo $s ?>
</td>
<!-- <td class="total">00</td> -->
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
const amounts = document.querySelectorAll(".amount");
let s = 0;
amounts.forEach(function(item){
const price = item.parentElement.querySelector(".price").textContent;
const count = item.parentElement.querySelector(".count").textContent;
item.textContent = price*count;
s+=price*count;
});
document.querySelector(".total").textContent = s;
const chkAll = document.querySelector('#chk_all');
const chkItems = document.querySelectorAll('.chk_item');
chkAll.onchange = function(ev){
chkItems.forEach(function(item){
item.checked = ev.target.checked;
})
}
chkItems.forEach(function(item){
item.onchange = function(){
chkAll.checked = [...chkItems].every(function(item){
return item.checked;
})
}
})
</script>
</body>
</html>
3、源代码截图
- d10-1.php
- addcar.php
- showcart.php