The examples on this site are currently tested to work on Phalcon V3.4 and Phalcon Devtools V3.2 Some issues may arise when using later versions.

Please get in touch or post a comment below the post if you encounter a problem.

A shopping cart is probably the most regularly requested functionality for any website. The requirements are as follows:

There are a wide range of shopping cart plugins available in a variety of different technologies. Having conducted a review of these I decided the best approach would be to build a simple cart from scratch. This will show off some of the easy-to-use features of both PhalconPHP and Twitter Bootstrap.

The application will be built on a "minimum viable product" basis. This should make it easy to understand and straightforward to adapt.

To get started with the example we need a database that will handle a many to many relationship between orders and products. The product in this example is sportswear. The following script will create the database and some test data.

drop database if exists shoppingCart;
create database shoppingCart;
use shoppingCart;

create table product (
id int auto_increment,
name varchar(30),
description varchar(30),
colour varchar(30),
price decimal(18,3),
image varchar(30),
primary key(id)
);

create table scOrder (
id int auto_increment,
orderDate datetime,
deliveryStreet varchar(30),
deliveryCity varchar(30),
deliveryCounty varchar(30),
primary key(id)
);

create table orderDetail (
id int auto_increment,
productid int,
orderid int,
quantity int,
subtotal decimal(18,3),
primary key(id),
foreign key(productid) references product(id),
foreign key(orderid) references scOrder(id)
);

insert into product(name, description, colour, price, image) values ("T-Shirt", "Crew Neck", "Green", 8.00, "greenCrewNeckTshirt.jpg");
insert into product(name, description, colour, price, image) values ("Sweatshirt", "V Neck", "Blue", 20.00, "blueVNecksweatshirt.jpg");
insert into product(name, description, colour, price, image) values ("Hoodie", "Comfort Fit", "Red", 25.00, "redHoodie.jpg");
insert into product(name, description, colour, price, image) values ("T-Shirt", "Crew Neck", "Red", 8.00, "redCrewNeckTshirt.jpg");
insert into product(name, description, colour,price, image) values ("Sweatshirt", "V Neck", "Yellow", 20.00, "yellowVNeckSweatshirt.jpg");	
insert into product(name, description, colour,price, image) values ("Hoodie", "Comfort Fit", "Blue", 25.00, "blueHoodie.jpg");
insert into product(name, description, colour, price,image) values ("T-Shirt", "Crew Neck", "Purple", 8.00, "purpleCrewNeckTshirt.jpg");
insert into product(name, description, colour, price,image) values ("Sweatshirt", "V Neck", "Red", 20.00, "redVNeckSweatshirt.jpg");
insert into product(name, description, colour,price, image) values ("Hoodie", "Comfort Fit", "Orange", 25.00, "orangeHoodie.jpg");

insert into scOrder(orderDate,deliveryStreet,deliveryCity,deliveryCounty) values ("2018-01-05 10:05:00","1 Main Street", "Blanchardstown", "Dublin");
insert into scOrder(orderDate,deliveryStreet,deliveryCity,deliveryCounty) values ("2018-01-07 17:15:00","25 High Street", "Lucan", "Dublin");
insert into scOrder(orderDate,deliveryStreet,deliveryCity,deliveryCounty) values("2018-01-05 10:05:00","19 New Road", "Finglas", "Dublin");

insert into orderDetail(productid,orderid,quantity) values (1,2,2);
insert into orderDetail(productid,orderid,quantity) values (1,2,2);

The following zip archive contains sample pictures of sportswear to accompany the example. Download the file. Save all the pictures inside the archive to the public/img folder within your application folder.

https://www.learnphalcon.com/resources/imgs.zip

To get the grid working - edit the file app/controllers/ProductController.php and add the following displayGridAction() funciton to the controller.


public function displayGridAction()
{
	$this->view->products = Product::find();
}

Now save the following code as displayGrid.phtml to app/views/product

<?php $j=0;//set a counter for the number of columns in the grid col-sm-3 means 4 columns wide?>
<?php foreach($products as $product): ?>
	<?php if ($j==0) echo "<div class='row'>"; //if the counter is zero start a new row?>
	   <div class="col-sm-3">
		  <div class="panel panel-primary">  
			<div class="panel-heading"><?php echo $product->getName() ."  " . $product->getDescription();?></div>
			<div class="panel-body"><img style="width:80%;height:200px;" class="img-responsive center-block" 
				src="<?php echo $this->url->getBaseUri() . '/img/' . $product->getImage();?>"/></div>
			<div class="panel-footer">
				<button id="addItem" type="button" class="btn btn-default center-block addItem" value="<?php echo $product->getID();?>">Add To Cart</button>
			</div>
		  </div>
		</div>
	<?php $j++; if ($j==4) { echo "</div>"; $j=0;} //if we have 4 cols then close the div for the row and reset the counter?>
<?php endforeach; ?>

The grid should now display as follows when you visit http://localhost/shoppingCart/product/displayGrid


This code uses bootstrap's 12 box grid model to arrange the grid as 4 columns with each one three units wide (col-sm-3). The counter $j will control the when the end of the row is reached. To better understand this - change the containers to 4 units wide by altering the fourth line so that each grid container is col-sm-4. Then change then change the second last line so the counter $j only goes up to 3 rather than 4 before ending the row. Now your grid is 3 panels wide instead of 4. In this way you can adapt the example to arrange the grid in anything from 1 to 12 boxes. For a more detailed explanation of bootstrap's 12-box model see here: https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

The beauty of a responsive stacking grid system like bootstrap is that the boxes in the grid will stack one underneath the other if the shopper happens to be viewing the system from a smaller screen.

Each item in the grid is in standard bootstrap panel. To change the look of your grid you could read up on adding custom css to bootstrap to change the look of the panel. The gutter size is also important to the look of the grid. There are many articles and posts available on how to change the gutter size.