简单的 PHP 购物车

Question

I use the following PHP Session Shopping Cart (it's ready to use)

http://pastebin.com/vzJy6pkD

Example of usage:

1. cart.php?action=add&id=1 = Adding a new product in the cart with ID 1

2. cart.php?action=delete&id=1 = Deleting a new product in the cart with ID 1

3. cart.php?action=update&id=1&qty=5 = Updating the quantity of product with ID 1

Everything is fine, but now I want to add sizes , something like: cart.php? action=add&id=1&size=XXXL

Please help me, I'm very confused how this can be done

Answer 1

If you want to build this up in a more scalable way, you might consider making your cart an object.

Then I'd turn the items into objects, with different properties. That would take care of the different "product attributes" (sizes for now, but what about different colors for later? Or printable text? etc).

If you abstract it so that each part does what it's supposed to do, independent of the other parts (orthogonal programming), you'll make your life easier now, and in the future.

Since you're using PHP, I'm guessing you're also using MySQL for storage. It's typically inefficient to store objects in the $_SESSION , but more efficient to store them in the database and unpack/unserialize/wake them up when that session is in use again (ie next page load).

Those are things for down the road. But right now, I'd take a good look at how scalable you intend on making this, and if you're seriously going to use it in production. There's a book called 'Usable Shopping Carts' that you can get on Amazon.com (it used to be cheap! http://www.amazon.com/Usable-Shopping-Carts-Jon-Stephens/dp/1904151140 ).

There are tons of different resources for this type of thing out there, but what you're always going to come back to is how it was originally designed. Because that's where you'll find yourself either making a hack to accomplish what you want, or implementing properly what you want.

Answer 2

Just use this JavaScript and 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/ Need help just ping Krishnpal singh chouhan http://krishnpal.com/