Простая корзина покупок PHP - PullRequest
Новая
       66

Простая корзина покупок PHP

1 голос
/ 21 февраля 2012

Я использую следующую корзину PHP Session (она готова к использованию)

http://pastebin.com/vzJy6pkD

Пример использования:

  1. cart.php? Action = add & id = 1 = Добавление нового товара в корзину с идентификатором 1

  2. cart.php? Action = delete & id = 1 = Удаление нового товара в корзине с идентификатором 1

  3. cart.php? Action = update & id = 1 & qty = 5 = Обновление количества товара с идентификатором 1

Все хорошо, но теперь я хочу добавить размеры , что-то вроде: cart.php? Действие = добавить & ID = 1 & размер = XXXL

Пожалуйста, помогите мне, я очень запутался, как это можно сделать

Ответы [ 2 ]

2 голосов
/ 21 февраля 2012

Если вы хотите построить это более масштабируемым образом, вы можете подумать о том, чтобы сделать вашу корзину объектом.

Тогда я бы превратил элементы в объекты с различными свойствами.Это позаботится о различных «атрибутах товара» (размеры на данный момент, но как насчет других цветов на потом? Или текста для печати? И т. Д.).

Если вы абстрагируете это так, что каждая часть делает то, что должнаделайте, независимо от других частей (ортогональное программирование), вы сделаете вашу жизнь проще и в будущем.

Поскольку вы используете PHP, я полагаю, что вы также используете MySQL дляместо хранения.Как правило, неэффективно хранить объекты в $_SESSION, но более эффективно хранить их в базе данных и распаковывать / десериализовывать / пробуждать их при повторном использовании сеанса (т. Е. При загрузке следующей страницы).

Тевещи для будущегоНо сейчас я бы внимательно посмотрел на то, насколько масштабируемым вы намерены сделать это, и серьезно ли вы собираетесь использовать его в производстве.Есть книга под названием «Полезные корзины покупок», которую вы можете получить на Amazon.com (раньше она была дешевой! http://www.amazon.com/Usable-Shopping-Carts-Jon-Stephens/dp/1904151140).

Существует множество различных ресурсов для этого типа вещей, но вымы всегда будем возвращаться к тому, как он был изначально спроектирован, потому что именно здесь вы обнаружите, что делаете хак, чтобы выполнить то, что вы хотите, или правильно реализуете то, что вы хотите.

1 голос
/ 29 октября 2015

Просто используйте этот 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/ Нужна помощь просто пинг Кришнпал Сингх Чухан http://krishnpal.com/

...