PHP购物车

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
    在这里插入图片描述

4、运行结果截图

在这里插入图片描述


在这里插入图片描述

  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值