在wamp环境下,用PHP的session会话控制完成购物车的效果,数据存放在数组里练习,没有连接数据库,效果不错,简单易懂,以下是各部分的代码
common.php
header("content-type:text/html;charset=utf-8");
$arrPro = array(
array('id'=>1,'img'=>'img/1.jpg','title'=>'小米移动电源5000mAh','price'=>49),
array('id'=>2,'img'=>'img/2.jpg','title'=>'20000mAh小米移动电源2','price'=>149),
array('id'=>3,'img'=>'img/3.jpg','title'=>'小米圈铁耳机Pro','price'=>129),
array('id'=>4,'img'=>'img/4.jpg','title'=>'小米家电动滑板车','price'=>1999),
array('id'=>5,'img'=>'img/5.jpg','title'=>'小米笔记本','price'=>3499),
array('id'=>6,'img'=>'img/6.jpg','title'=>'米家LED智能台灯','price'=>169),
array('id'=>7,'img'=>'img/7.jpg','title'=>'小米体重秤','price'=>99),
array('id'=>8,'img'=>'img/8.png','title'=>'小米电视3s 48英寸','price'=>2599)
);
index.php
content-type:text/html;charset=utf-8");
require 'common.php';
session_start();
$sum = 0;
$class = "";
//判断左上角购物车的样式显示
if(!empty($_SESSION['shopcar'])){
$data = $_SESSION['shopcar'];
$sum = array_sum($data[4]);
$class = "on";
//右上角圆点
if(empty($data[0])){
$class = "";
}
}
?>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商品展示title>
<style type="text/css">
section{
width:1032px;
height: 700px;
margin: 40px auto;
}
.top{
float: right;
position: relative;
width: 190px;
height: 34px;
border: 1px solid #ccc;
margin-right: 32px;
text-align: center;
line-height: 34px;
border-radius: 4px;
transition: all .3s linear;
-moz-transition: all .3s linear;
-webkit-transition: all .3s linear;
}
.top a{
color: #d00;
}
.top:hover{
width: 210px;
color: #fff;
font-weight: bold;
background-color: #d00;
border-radius: 6px;
}
.top:hover a{
color: #fff;
}
.top:hover span{
background-color: #fff;
color: #d00;
}
.top:hover .star{
right:150px;
top: 0;
font-size: 14px;
color: #ff0;
transform: rotate(1080deg);
}
.top span{
position: absolute;
top:2px;
right: 40px;
width: 18px;
height: 18px;
font-weight: bold;
border-radius: 9px;
line-height: 18px;
text-align: center;
font-size: 12px;
font-weight: border;
color: #fff;
}
.star{
color: #fff;
font-size: 48px;
font-style: normal;
position: absolute;
right:530px;
top:186px;
transform: rotate(60deg);
transition: all .3s ease;
}
.on{
background-color: #e00;
}
.list{
margin: 20px 20px;
padding: 36px 0;
list-style: none;
}
a{
display: block;
color: #757575;
text-decoration: none;
}
.list li{
float: left;
height: 246px;
width: 234px;
padding: 10px 0 20px;
margin-right:12px;
margin-top: 20px;
border: 1px solid #ccc;
background: #fff;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
.list li:hover{
box-shadow: 2px 4px 5px #aaa;
}
.figure{
width: 150px;
height: 150px;
margin: 0 auto 18px;
}
.title{
color: #222;
font-size: 14px;
font-weight: normal;
text-align: center;
}
.price{
margin: 0 10px 10px;
text-align: center;
color: #ff6700;
}
.cart{
margin: 0 15px 5px;
text-align: center;
}
.cart a{
color: #a34;
width: 190px;
height: 24px;
border-radius: 4px;
margin: 0 8px 5px;
text-align: center;
}
.cart a:hover{
color: #eee;
box-shadow: 0 2px 1px #333,0 2px 1px #666;
background-color: #ccc;
background-image: linear-gradient(#33a6b8,#0089a7)
}
.num{
text-align: center;
color: #ff6700;
}
style>
head>
<body>
<section>
<div class='top'>
<a href="spcar.php">我的购物车a><span class="">span>
<em class='star'>★em>
div>
<ul class="list">
$value):?>
<li>
<div class="figure">
<a href=""><img src="" width="150" height="150" alt="小米移动电源5000mAh">a>
div>
<h3 class="title">
<a href="">a>
h3>
<p class="price"><span class="num">¥span>p>
<p class='cart'><a href="action.php?id=">加入购物车a>p>
li>
ul>
<div style='clear:both'>div>
section>
body>
html>
action.php
if(!empty($_GET['id'])){
require 'common.php';
session_start();
$id = $_GET['id'];
//把所选ID的商品信息遍历出来
foreach ($arrPro as $key => $value) {
if($id == $value['id']){
$arrData = $arrPro[$key];
}
}
//用一个新的二维数组把商品信息存起来
$arrDatax[0][$arrData['id']] = $arrData['id'];
$arrDatax[1][$arrData['id']] = $arrData['img'];
$arrDatax[2][$arrData['id']] = $arrData['title'];
$arrDatax[3][$arrData['id']] = $arrData['price'];
$arrDatax[4][$arrData['id']] = 1;
//判断是否有SESSION存在,有则在数组后添加,没有则直接存
if(empty($_SESSION['shopcar'])){
$_SESSION['shopcar'] = $arrDatax;
header('Location:index.php');
}else{
//第一次购物之后的购物
//重新取出来,防止数据覆盖
$arrDataz = $_SESSION['shopcar'];
if(in_array($id,$arrDataz[0])){
$arrDataz[4][$arrData['id']] += 1;
$_SESSION['shopcar'] = $arrDataz;
header('Location:index.php');
}else{
$arrDataz[0][$arrData['id']] = $arrData['id'];
$arrDataz[1][$arrData['id']] = $arrData['img'];
$arrDataz[2][$arrData['id']] = $arrData['title'];
$arrDataz[3][$arrData['id']] = $arrData['price'];
$arrDataz[4][$arrData['id']] = 1;
$_SESSION['shopcar'] = $arrDataz;
header('Location:index.php');
}
}
}else{
echo "购物车没有商品!";
}
spcar.php
if(!empty($_GET['id'])){
require 'common.php';
session_start();
$id = $_GET['id'];
//把所选ID的商品信息遍历出来
foreach ($arrPro as $key => $value) {
if($id == $value['id']){
$arrData = $arrPro[$key];
}
}
//用一个新的二维数组把商品信息存起来
$arrDatax[0][$arrData['id']] = $arrData['id'];
$arrDatax[1][$arrData['id']] = $arrData['img'];
$arrDatax[2][$arrData['id']] = $arrData['title'];
$arrDatax[3][$arrData['id']] = $arrData['price'];
$arrDatax[4][$arrData['id']] = 1;
//判断是否有SESSION存在,有则在数组后添加,没有则直接存
if(empty($_SESSION['shopcar'])){
$_SESSION['shopcar'] = $arrDatax;
header('Location:index.php');
}else{
//第一次购物之后的购物
//重新取出来,防止数据覆盖
$arrDataz = $_SESSION['shopcar'];
if(in_array($id,$arrDataz[0])){
$arrDataz[4][$arrData['id']] += 1;
$_SESSION['shopcar'] = $arrDataz;
header('Location:index.php');
}else{
$arrDataz[0][$arrData['id']] = $arrData['id'];
$arrDataz[1][$arrData['id']] = $arrData['img'];
$arrDataz[2][$arrData['id']] = $arrData['title'];
$arrDataz[3][$arrData['id']] = $arrData['price'];
$arrDataz[4][$arrData['id']] = 1;
$_SESSION['shopcar'] = $arrDataz;
header('Location:index.php');
}
}
}else{
echo "购物车没有商品!";
}
delete.php
session_start();
if(!empty($_GET['id'])){
$arrData = $_SESSION['shopcar'];
//判断对应的商品ID信息
if(in_array($_GET['id'],$arrData[0])){
unset($arrData[0][$_GET['id']]);
unset($arrData[1][$_GET['id']]);
unset($arrData[2][$_GET['id']]);
unset($arrData[3][$_GET['id']]);
unset($arrData[4][$_GET['id']]);
$_SESSION['shopcar'] = $arrData;
}
header('Location:spcar.php');
}