我使用以下PHP会话购物车（可以随时使用）
使用示例：
cart.php？action = add＆amp; id = 1 =在ID为1的购物车中添加新产品
cart.php？action = delete＆amp; id = 1 =在ID为1的购物车中删除新产品
cart.php？action = update＆amp; id = 1＆amp; qty = 5 =更新ID为1的产品数量
一切都很好，但现在我想要添加尺寸，例如：cart.php？ 行动=添加和ID = 1＆安培;大小= XXXL
请帮助我，我很困惑如何做到这一点
答案 0 :(得分：2)
如果您想以更具伸缩性的方式进行构建，可以考虑将购物车作为对象。
然后我将项目转换为具有不同属性的对象。这将考虑到不同的“产品属性”（现在的尺寸，但以后的不同颜色呢？或者可打印的文字？等）。
如果你抽象它以使每个部分完成它应该做的事情，独立于其他部分（正交编程），你将使你现在和未来的生活更轻松。
由于你使用PHP，我猜你也在使用MySQL进行存储。将对象存储在$_SESSION中通常效率低下，但更有效的方法是将它们存储在数据库中，并在该会话再次使用时解压缩/反序列化/唤醒它们（即下一页加载）。
这些都是未来的事情。但是现在，我会仔细研究一下你打算如何扩展它，以及你是否真的会在生产中使用它。有一本名为“Usable Shopping Carts”的书，您可以在Amazon.com上获得（过去便宜！http://www.amazon.com/Usable-Shopping-Carts-Jon-Stephens/dp/1904151140）。
这种类型的东西有很多不同的资源，但是你总是要回归的是它最初设计的方式。因为在那里，你会发现自己要么做一个黑客来完成你想要的东西，要么正确地实现你想要的东西。
答案 1 :(得分：1)
只需使用此JavaScript和jquery
即可
simpleCart({
checkout: {
type: "PayPal" ,
email: "sales@dermamor.com",
currency: "GBP" // set the currency to pounds sterling
},
cartStyle: 'table',
cartColumns: [{
attr: "name",
label: "Name"
},
{
attr: "price",
label: "Price",
view: 'currency'
},
{ attr: "quantity" ,
label: "Quantity" } ,
{
view: "remove",
text: "Remove",
label: false
}]
});
$(".btn").on('click', function(){
checkCart()
});
$(function() {
checkCart();
});
// simpleCart.grandTotal()
//simpleCart.total();
function checkCart(){
var sum = simpleCart.quantity();
$("#dLabel").html('<span class="glyphicon glyphicon-shopping-cart"></span> Cart '+ sum +' items <span class="caret"></span>')
if (simpleCart.items().length == 0) {
$("#dLabel").html('<span class="glyphicon glyphicon-shopping-cart"></span> Cart Empty<span class="caret"></span>');
}else{
$("#dLabel").html('<span class="glyphicon glyphicon-shopping-cart"></span> Cart '+ sum +' items <span class="caret"></span>')
}
}#existingDiv {
padding: 10px;
}
.simpleCart_items table{width:100%}
.test{color:brown;border-left:10px solid #ccc;margin-bottom:2px}
.simpleCart_items {background-color: #ffffff;}
.itemRow .item-remove a{
color:#ddd;
}
.simpleCart_shelfItem .item_Quantity {width:50px}
.headerRow{background-color:#c5c4be;color:#ffffff;padding:3px}
.simpleCart_quantity, .simpleCart_total{
font-size:25px;
color:#000;
}
.headerRow .item-name,
.headerRow .item-price,
.itemRow .item-name,
.itemRow .item-price,
.itemRow .item-remove,
.headerRow .item-quantity,
.itemRow .item-quantity
{
font-size:18px;
padding:10px;
color:#222222;
}
.menu-large {
position: static !important;
}
.megamenu{
padding: 20px 0px;
width:100%;
}
.megamenu> li > ul {
padding: 0;
margin: 0;
}
.megamenu> li > ul > li {
list-style: none;
}
.megamenu> li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
color: #999999;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}
@media (max-width: 768px) {
.megamenu{
margin-left: 0 ;
margin-right: 0 ;
}
.megamenu> li {
margin-bottom: 30px;
}
.megamenu> li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header{
color:#fff;
}
}<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JQuery CART Bootstrap Responsive Basket Dropdown - jsFiddle demo</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css">
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.js"></script>
<script type="text/javascript" src="http://www.dermamor.com/dev/js/simpleCart.js"></script>
<style type="text/css">
#existingDiv {
padding: 10px;
}
.simpleCart_items table{width:100%}
.test{color:brown;border-left:10px solid #ccc;margin-bottom:2px}
.simpleCart_items {background-color: #ffffff;}
.itemRow .item-remove a{
color:#ddd;
}
.simpleCart_shelfItem .item_Quantity {width:50px}
.headerRow{background-color:#c5c4be;color:#ffffff;padding:3px}
.simpleCart_quantity, .simpleCart_total{
font-size:25px;
color:#000;
}
.headerRow .item-name,
.headerRow .item-price,
.itemRow .item-name,
.itemRow .item-price,
.itemRow .item-remove,
.headerRow .item-quantity,
.itemRow .item-quantity
{
font-size:18px;
padding:10px;
color:#222222;
}
.menu-large {
position: static !important;
}
.megamenu{
padding: 20px 0px;
width:100%;
}
.megamenu> li > ul {
padding: 0;
margin: 0;
}
.megamenu> li > ul > li {
list-style: none;
}
.megamenu> li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
color: #999999;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}
@media (max-width: 768px) {
.megamenu{
margin-left: 0 ;
margin-right: 0 ;
}
.megamenu> li {
margin-bottom: 30px;
}
.megamenu> li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header{
color:#fff;
}
}
</style>
</head>
<div class="container">
<span class="simpleCart_quantity glyphicon glyphicon-shopping-cart"></span> items - <span class="simpleCart_total"></span>
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".derma">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">brand</a>
</div>
<div class="collapse navbar-collapse derma">
<ul class="nav navbar-nav">
<!-- place dynamic links here -->
<li class="dropdown menu-large">
<a href="#" class="dropdown-toggle" id="dLabel" data-toggle="dropdown"><span class="glyphicon glyphicon-shopping-cart"></span> Basket <b class="caret"></b></a>
<ul class="dropdown-menu megamenu">
<div class="col-sm-12 clearfix">
<div class="simpleCart_items"></div>
<ul id="cart" class='clearfix'></ul><li class="divider"></li>
<div class="btn-group pull-right">
<a href="#" class="simpleCart_empty btn btn-lg btn-danger">Clear Cart</a>
<a href="#" class="simpleCart_checkout btn btn-lg btn-success">Checkout Now</a>
</div>
</div>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<a class="btn btn-success btn-sm navbar-btn" style="margin-left:10px;" href="#">Sign in</a>
<a class="btn btn-danger btn-sm navbar-btn" href="#">Sign up</a>
<div class="btn-group ">
<button class="btn btn-info navbar-btn btn-sm">En</button>
<button class="btn dropdown-toggle navbar-btn btn-info btn-sm" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="min-width:30px;">
<!-- dropdown menu links -->
<li><a href="">es</a></li>
<li><a href="">en</a></li>
</ul>
</div>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<div class="row">
<div class="col-md-3 simpleCart_shelfItem">
<div class="panel panel-default">
<div class="panel-heading item_name">Product 1</div>
<div class="panel-body">
<img src="http://placehold.it/1000x1000/cecc00/" class="img-thumbnail img-responsive item_thumb"><br>
<p class='input-sm clearfix'>Description of this product is rather long and so we may need to trim it by using the fantabulous JQuery... again..</p><span class='row'></span>
</div>
<div class="panel-footer"> <p class="item_price">$ 88</p><span class='btn btn-danger btn-md item_add'>ADD</span>
<label>Qty: <input class="item_Quantity form-control" type="text" value="1"></label>
<select name="size" id="size" class="item_size">
<option value="#">120</option>
<option value="small"><240></240></option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</div>
</div>
</div><!-- end object -->
<div class="col-md-3 simpleCart_shelfItem">
<div class="panel panel-default">
<div class="panel-heading item_name">Product 2</div>
<div class="panel-body">
<img src="http://placehold.it/1000x1000/ffdc00/" class="img-thumbnail img-responsive item_thumb"><br>Description
</div>
<div class="panel-footer"><p class="item_price">$ 38</p> <span class='btn btn-danger btn-md item_add'>ADD</span> <label>Qty: <input class="item_Quantity form-control" type="text" value="1"></label></div>
</div>
</div><!-- end object -->
<div class="col-md-3 simpleCart_shelfItem">
<div class="panel panel-default">
<div class="panel-heading item_name">Product 3</div>
<div class="panel-body">
<img src="http://placehold.it/1000x1000/ffcc00/" class="img-thumbnail img-responsive item_thumb"><br>Description
</div>
<div class="panel-footer"><p class="item_price">$ 348</p> <span class='btn btn-danger btn-md item_add'>ADD </span> <label>Qty: <input class="item_Quantity form-control" type="text" value="1"></label></div>
</div>
</
<!-- begin snippet: js hide: false -->
http://jsfiddle.net/yrLZd/66/ 需要帮助只是ping Krishnpal singh chouhan http://krishnpal.com/