簡單的 PHP 購物車
[英]Simple PHP Shopping Cart
問題描述
我使用以下 PHP Session Shopping Cart（已准備好使用）
用法示例：
cart.php?action=add&id=1 = 在購物車中添加 ID 為 1 的新產品
cart.php?action=delete&id=1 = 刪除購物車中 ID 為 1 的新產品
cart.php?action=update&id=1&qty=5 = 更新 ID 為 1 的產品數量
一切都很好，但現在我想添加尺寸，例如：cart.php？ 動作=添加&id=1&size=XXXL
請幫助我，我很困惑如何做到這一點
2 個解決方案
解決方案1
2 2012-02-21 15:56:32
如果您想以更具可擴展性的方式構建它，您可以考慮將您的購物車設為一個對象。
然后我將項目變成具有不同屬性的對象。 這將處理不同的“產品屬性”（現在的尺寸，但以后的不同顏色呢？或可打印的文本？等）。
如果您將其抽象化，以便每個部分獨立於其他部分（正交編程）執行它應該做的事情，那么您現在和將來都會使您的生活更輕松。
由於您使用的是 PHP，我猜您也在使用 MySQL 進行存儲。 將對象存儲在$_SESSION通常效率低下，但將它們存儲在數據庫中並在該會話再次使用時（即下一頁加載）解壓縮/反序列化/喚醒它們更有效。
這些是未來的事情。 但是現在，我會好好看看你打算做這個的可擴展性如何，以及你是否真的打算在生產中使用它。 有一本名為“可用購物車”的書，您可以在 Amazon.com 上買到（以前很便宜！ http://www.amazon.com/Usable-Shopping-Carts-Jon-Stephens/dp/1904151140 ）。
這種類型的東西有很多不同的資源，但你總是會回到它最初的設計方式。 因為在那里你會發現自己要么通過 hack 來完成你想要的，要么正確地實現你想要的。
解決方案2
1 2015-10-29 11:22:46
只需使用此 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/
簡單的PHP購物車數量
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.