https://www.codeofaninja.com/2013/04/shopping-cart-in-php.html
Last updated
Was this helpful?
Last Update: July 14, 2019•Date Posted: April 6, 2013•by Mike Dalisay➜Get FREE Updates Here
Previously, we learned how to build a Shopping Cart with PHP & MySQL where we used a database to store cart items. Today, we will learn another version of it. We will use PHP session variables to store cart items.
This tutorial have the following contents:
1.0 Overview 2.0 Tutorial Output Preview 3.0 File Structure
4.0 Prepare the database 4.1 Database design 4.2 Create a database 4.3 Create “products” table 4.4 Create “categories” table 4.5 Download sample data and images 4.6 Extract and import data 4.7 Database connection file 4.8 Output
5.0 Create the layout files 5.1 Create header layout file 5.2 Create footer layout file 5.3 Create navigation layout file 5.4 Create Custom CSS file 5.5 Output
6.0 Display Products 6.1 Create product page 6.2 Include PHP Classes 6.3 Create "product" object 6.4 Create "product image" object 6.5 Connect to the database 6.6 Initialize action and pagination 6.7 Display messages based on action 6.8 Request data from the database 6.9 Add "read" and "count" methods 6.10 Template to display products 6.11 Add "readFirst()" method 6.12 Make "add to cart" button work 6.13 Create pagination file 6.14 Output
7.0 How to add to cart? 7.1 Create add_to_cart.php 7.2 Create cart page 7.3 Display message based on action 7.4 Display cart items 7.5 Read products by IDs 7.6 Output
8.0 How to update cart? 8.1 Update cart quantity with JavaScript 8.2 PHP script to update cart 8.3 How to remove product on cart? 8.4 Create the checkout page 8.5 Create place_order.php 8.6 Output
9.0 How to make the product page? 9.1 Create product.php 9.2 Read product details 9.3 Read one product method 9.4 Display product thumbnails 9.5 Read images related to product 9.6 Display product image 9.7 Make image hover work 9.8 Display product details 9.9 Render 'Cart' button 9.10 Output
10.0 What people say about this code? 11.0 How to run the source code?
12.0 Download LEVEL 1 source code 13.0 Download LEVEL 2 source code
14.0 PHP Shopping Cart Module 15.0 PHP Shopping Cart System
16.0 What’s Next? 17.0 Related Tutorials 18.0 Some Notes
Before we start, we want to let you know that your feedback is important to us!
If you have a positive feedback about our work, please let us know. If there's a section in this tutorial that is confusing or hard to understand, we consider it as a problem. Please let us know as well.
Write your positive feedback or detailed description of the problem in the comments section below. Before you write a comment, please read this guide and our code of conduct. Thank you!
If you want to build your own online shopping cart from scratch, we have good news for you!
This post can help you get it done because we will build a simple shopping cart script today.
We will use PHP, MySQL and PHP sessions to complete this task.
A lot of people use a ready-made software for this.
But for coders like us, it is important to learn and experience how to do it. We can create more features like making the system more secured, add some unique functionality and more.
Your imagination can be the only limit.
The source codes in this page is NOT for you if:
You are already an expert in PHP & MySQL programming.
You have a lot of time to code a shopping cart system from scratch.
You are not that interested in learning PHP & MySQL programming.
But, this SOURCE CODE is FOR YOU if:
You want to SAVE huge amount of development time.
You want to develop your own shopping cart system from scratch.
You determined to learn how to make a web application in PHP & MySQL.
But if you are an expert in PHP & MySQL programming and would like to take a look at our code, please do so! We'd love to hear your response and great insights! The comments section below is always open for anyone with questions and suggestions.
This tutorial is already working. You can proceed to the instructions below.
But we are recording a video demo about how to use this tutorial.
It is coming soon! Please subscribe here so you will be updated.
Below are some screenshots of our script’s output. You can click an image to view the larger version of it. Use the left and right arrow to navigate through the screenshots.
Please note that the following images are just output previews. New features might be added already the time you are reading this.
The LEVEL 2 source code output proves that you can add and customize more features. It will be easier and faster if you will learn by following our tutorial below.
Downloading our source codes is your huge advantage as well.
If you need more features like product variations, admin features and user login, see our PHP Shopping Cart Module and PHP Shopping Cart System.
For now, let's proceed to the step by step tutorial of our LEVEL 1 source code. Enjoy!
The following folders and files are included in the final source code of this tutorial. It will have more meaning if you will see the code inside the folders and files as we go through this tutorial.
The branch with backslash represents a folder. Everything else represents a file. It can be a PHP file, SQL file, text file, CSS file or JavaScript file.
├─ config/ ├─── database.php ├─ dev/ ├─── shop_cart_sessions_1.sql ├─── readme.txt ├─ images/ ├─ libs/ ├─── css/ ├────── bootstrap/ ├─── js/ ├────── jquery.js ├─ objects/ ├─── product_image.php ├─── product.php ├─ uploads/ ├─── images/ ├─ .htaccess ├─ add_to_cart.php ├─ cart.php ├─ checkout.php ├─ layout_footer.php ├─ layout_header.php ├─ navigation.php ├─ paging.php ├─ place_order.php ├─ product.php ├─ products.php ├─ read_products_template.php ├─ remove_from_cart.php ├─ update_quantity.php
Make sure your Apache and MySQL servers are running.
Open your PhpMyAdmin (http://localhost/phpmyadmin)
Create a new database.
Put "shop_cart_sessions_1" as database name.
Click "Create" button.
In this section, we will create the "products" table (using PhpMyAdmin) on the database we just created. This table will hold the product records.
Here's how to run an SQL statement using PhpMyAdmin.
Click "shop_cart_sessions_1" database.
Click "SQL" tab.
Copy the SQL statement below and paste it in the text area.
Click the "Go" button.
CREATE TABLE IF NOT EXISTS `products` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(512) NOT NULL, `description` text NOT NULL, `price` decimal(10,2) NOT NULL, `created` datetime NOT NULL, `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=latin1 COMMENT='products that can be added to cart' AUTO_INCREMENT=41 ;
This table will hold images related to product.
Run the following SQL statement using your PhpMyAdmin.
CREATE TABLE IF NOT EXISTS `product_images` ( `id` int(11) NOT NULL AUTO_INCREMENT, `product_id` int(11) NOT NULL, `name` varchar(512) NOT NULL, `created` datetime NOT NULL, `modified` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='image files related to a product' AUTO_INCREMENT=105 ;
The products and product_images table will not fully work without the sample data and related image files.
To make things easier, I decided to create a ZIP file with shop_cart_sessions_1.sql and 28 image files inside (1.30 MB).
Use the following button to download the ZIP file.DOWNLOAD SQL FILE AND IMAGES
Once downloaded, please extract the files.
Import the SQL file using PhpMyAdmin.
Put the image files in "php-shopping-cart-using-sessions-level-1/uploads/images/" directory. That directory does not exist yet. We need to create it now.
Create "php-shopping-cart-using-sessions-level-1" folder and open it. This is our project's main folder.
Create "uploads" folder and open it.
Create "images" folder and open it.
Copy and paste the images on this directory.
This file will be used to get connection to the database.
Open "php-shopping-cart-using-sessions-level-1" folder.
Create "config" folder and open it.
Create "database.php" file and open it.
Place the following code.
<?php// used to get mysql database connectionclass Database{ // specify your own database credentials private $host = "localhost"; private $db_name = "shop_cart_sessions_1"; private $username = "root"; private $password = ""; public $conn; // get the database connection public function getConnection(){ $this->conn = null; try{ $this->conn = new PDO("mysql:host=" . $this->host . ";dbname=" . $this->db_name, $this->username, $this->password); }catch(PDOException $exception){ echo "Connection error: " . $exception->getMessage(); } return $this->conn; } }?>
Our PhpMyAdmin should look like the image below. A database with two tables.
We don't have an actual program output yet because we only set up the database. Let's continue our tutorial below to achieve more outputs.
This “layout_header.php” file will be included at the beginning of the PHP files that will need it. This way, we won’t have to write the same header codes every time.
We use the Bootstrap framework to make our project look good. If you’re not yet familiar with you, please learn our Bootstrap tutorial here.
Bootstrap CSS asset will be included inside the head tags.
Open "php-shopping-cart-using-sessions-level-1" folder.
Create "layout_header.php" file.
Place the following code.
<?php$_SESSION['cart']=isset($_SESSION['cart']) ? $_SESSION['cart'] : array();?><!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></title> <!-- Latest compiled and minified Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <!-- our custom CSS --> <link rel="stylesheet" href="libs/css/custom.css" /> </head><body> <?php include 'navigation.php'; ?> <!-- container --> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="page-header"> <h1><?php echo isset($page_title) ? $page_title : "The Code of a Ninja"; ?></h1> </div> </div>
This "layout_footer.php" will be included at the end of the PHP files that will needs it. This way, we won’t have to write the same footer codes every time.
The assets used in this file are:
jQuery – needed by Bootstrap JavaScript.
Bootstrap JavaScript – to make cool UI components work.
Let’s go on and create the footer layout file.
Open "php-shopping-cart-using-sessions-level-1" folder.
Create "layout_footer.php" file.
Place the following code.
</div> <!-- /row --> </div> <!-- /container --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <!-- Latest compiled and minified Bootstrap JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- custom script will be here --> </body></html>
This file will render the "Products" and "Cart" links that the user can click.
Open "php-shopping-cart-using-sessions-level-1" folder.
Create "navigation.php" file.
Place the following code.
<!-- navbar --><div class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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="products.php">XYZ Webstore</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <!-- highlight if $page_title has 'Products' word. --> <li <?php echo $page_title=="Products" ? "class='active'" : ""; ?>> <a href="products.php" class="dropdown-toggle">Products</a> </li> <li <?php echo $page_title=="Cart" ? "class='active'" : ""; ?> > <a href="cart.php"> <?php // count products in cart $cart_count=count($_SESSION['cart']); ?> Cart <span class="badge" id="comparison-count"><?php echo $cart_count; ?></span> </a> </li> </ul> </div><!--/.nav-collapse --> </div></div><!-- /navbar -->
This custom.css file is where our custom styles are located.
Open "php-shopping-cart-using-sessions-level-1" folder.
Open "libs" folder.
Open "css" folder.
Create "custom.css" file.
Place the following code.
.text-align-center{ text-align:center; }.f-w-b{ font-weight:bold; }.display-none{ display:none; } .w-5-pct{ width:5%; }.w-10-pct{ width:10%; }.w-15-pct{ width:15%; }.w-20-pct{ width:20%; }.w-25-pct{ width:25%; }.w-30-pct{ width:30%; }.w-35-pct{ width:35%; }.w-40-pct{ width:40%; }.w-45-pct{ width:45%; }.w-50-pct{ width:50%; }.w-55-pct{ width:55%; }.w-60-pct{ width:60%; }.w-65-pct{ width:65%; }.w-70-pct{ width:70%; }.w-75-pct{ width:75%; }.w-80-pct{ width:80%; }.w-85-pct{ width:85%; }.w-90-pct{ width:90%; }.w-95-pct{ width:95%; }.w-100-pct{ width:100%; } .m-t-0px{ margin-top:0px; }.m-b-10px{ margin-bottom:10px; }.m-b-20px{ margin-bottom:20px; }.m-b-30px{ margin-bottom:30px; }.m-b-40px{ margin-bottom:40px; } .stock-text { font-weight: bold; color: #008a00;} .stock-text-red{ font-weight:bold; color:#b12704;} .product-detail { font-weight: bold; margin: 0 0 5px 0;} .blueimp-gallery>.prev, .blueimp-gallery>.next{ border:none; } .update-quantity-form { width: 150px; float: left; margin: 0 10px 0 0;} .cart-row { border-bottom: thin solid #f1f1f1; overflow: hidden; width: 100%; padding: 20px 0 20px 0;} .product-link{ color:#000000;} .product-link:hover{ color:#000000; text-decoration:none;} .product-img-thumb { margin: 0 0 10px 0; width: 100%; cursor: pointer;}
The files we created in this section is meant to be used within another PHP file. If we will try to run the files, we won't see anything meaningful yet.
The footer.php is blank. Let's continue on the next section to see something meaningful.
Now we are going to start displaying products from the database. Create products.php with the following basic code.
<?php// start sessionsession_start(); // set page title$page_title="Products"; // page header htmlinclude 'layout_header.php'; // contents will be here // layout footer codeinclude 'layout_footer.php';?>
Put the following code after "session_start();" code of the previous section.
// connect to databaseinclude 'config/database.php'; // include objectsinclude_once "objects/product.php";include_once "objects/product_image.php"; // class instances will be here
Create "objects" folder. Inside it, create product.php file with the following code.
<?php// 'product' objectclass Product{ // database connection and table name private $conn; private $table_name="products"; // object properties public $id; public $name; public $price; public $description; public $category_id; public $category_name; public $timestamp; // constructor public function __construct($db){ $this->conn = $db; }}
Create product_image.php file inside "objects" folder.
<?php// 'product image' objectclass ProductImage{ // database connection and table name private $conn; private $table_name = "product_images"; // object properties public $id; public $product_id; public $name; public $timestamp; // constructor public function __construct($db){ $this->conn = $db; }}
Open products.php file. Replace // class instances will be here comment with the following code.
// get database connection$database = new Database();$db = $database->getConnection(); // initialize objects$product = new Product($db);$product_image = new ProductImage($db);
Put the following code after the code on the previous section.
// to prevent undefined index notice$action = isset($_GET['action']) ? $_GET['action'] : ""; // for pagination purposes$page = isset($_GET['page']) ? $_GET['page'] : 1; // page is the current page, if there's nothing set, default is page 1$records_per_page = 6; // set records or rows of data per page$from_record_num = ($records_per_page * $page) - $records_per_page; // calculate for the query LIMIT clause
We'll display messages basedon given action.
Put the following code after include 'layout_header.php'; code.
echo "<div class='col-md-12'>"; if($action=='added'){ echo "<div class='alert alert-info'>"; echo "Product was added to your cart!"; echo "</div>"; } if($action=='exists'){ echo "<div class='alert alert-info'>"; echo "Product already exists in your cart!"; echo "</div>"; }echo "</div>";
Request data from the database. Put the following code after the code on the previous section.
// read all products in the database$stmt=$product->read($from_record_num, $records_per_page); // count number of retrieved products$num = $stmt->rowCount(); // if products retrieved were more than zeroif($num>0){ // needed for paging $page_url="products.php?"; $total_rows=$product->count(); // show products include_once "read_products_template.php";} // tell the user if there's no products in the databaseelse{ echo "<div class='col-md-12'>"; echo "<div class='alert alert-danger'>No products found.</div>"; echo "</div>";}
The previous section will not work without the following code inside "objects/product.php" object file.
// read all productsfunction read($from_record_num, $records_per_page){ // select all products query $query = "SELECT id, name, description, price FROM " . $this->table_name . " ORDER BY created DESC LIMIT ?, ?"; // prepare query statement $stmt = $this->conn->prepare( $query ); // bind limit clause variables $stmt->bindParam(1, $from_record_num, PDO::PARAM_INT); $stmt->bindParam(2, $records_per_page, PDO::PARAM_INT); // execute query $stmt->execute(); // return values return $stmt;} // used for paging productspublic function count(){ // query to count all product records $query = "SELECT count(*) FROM " . $this->table_name; // prepare query statement $stmt = $this->conn->prepare( $query ); // execute query $stmt->execute(); // get row value $rows = $stmt->fetch(PDO::FETCH_NUM); // return count return $rows[0];}
The products.php won't work without "read_products_template.php", so create that file and put the following code.
<?phpif(!isset($_SESSION['cart'])){ $_SESSION['cart']=array();} while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){ extract($row); // creating box echo "<div class='col-md-4 m-b-20px'>"; // product id for javascript access echo "<div class='product-id display-none'>{$id}</div>"; echo "<a href='product.php?id={$id}' class='product-link'>"; // select and show first product image $product_image->product_id=$id; $stmt_product_image=$product_image->readFirst(); while ($row_product_image = $stmt_product_image->fetch(PDO::FETCH_ASSOC)){ echo "<div class='m-b-10px'>"; echo "<img src='uploads/images/{$row_product_image['name']}' class='w-100-pct' />"; echo "</div>"; } // product name echo "<div class='product-name m-b-10px'>{$name}</div>"; echo "</a>"; // add to cart button echo "<div class='m-b-10px'>"; if(array_key_exists($id, $_SESSION['cart'])){ echo "<a href='cart.php' class='btn btn-success w-100-pct'>"; echo "Update Cart"; echo "</a>"; }else{ echo "<a href='add_to_cart.php?id={$id}&page={$page}' class='btn btn-primary w-100-pct'>Add to Cart</a>"; } echo "</div>"; echo "</div>";} include_once "paging.php";?>
Add "readFirst()" method in "objects/product_image.php" file. The previous section will not work without it.
// read the first product image related to a productfunction readFirst(){ // select query $query = "SELECT id, product_id, name FROM " . $this->table_name . " WHERE product_id = ? ORDER BY name DESC LIMIT 0, 1"; // prepare query statement $stmt = $this->conn->prepare( $query ); // sanitize $this->id=htmlspecialchars(strip_tags($this->id)); // bind prodcut id variable $stmt->bindParam(1, $this->product_id); // execute query $stmt->execute(); // return values return $stmt;}
Open layout_footer.php file. Replace <!-- custom script will be here --> comment with the following code.
<script>$(document).ready(function(){ // add to cart button listener $('.add-to-cart-form').on('submit', function(){ // info is in the table / single product layout var id = $(this).find('.product-id').text(); var quantity = $(this).find('.cart-quantity').val(); // redirect to add_to_cart.php, with parameter values to process the request window.location.href = "add_to_cart.php?id=" + id + "&quantity=" + quantity; return false; });});</script>
The read_products_template.php file won't work without the paging.php file. Create paging.php with the following code.
<?phpecho "<div class='col-md-12'>"; echo "<ul class='pagination m-b-20px m-t-0px'>"; // button for first page if($page>1){ echo "<li><a href='{$page_url}' title='Go to the first page.'>"; echo "First Page"; echo "</a></li>"; } $total_pages = ceil($total_rows / $records_per_page); // range of links to show $range = 2; // display links to 'range of pages' around 'current page' $initial_num = $page - $range; $condition_limit_num = ($page + $range) + 1; for ($x=$initial_num; $x<$condition_limit_num; $x++) { // be sure '$x is greater than 0' AND 'less than or equal to the $total_pages' if (($x > 0) && ($x <= $total_pages)) { // current page if ($x == $page) { echo "<li class='active'><a href=\"#\">$x <span class=\"sr-only\">(current)</span></a></li>"; } // not current page else { echo "<li><a href='{$page_url}page=$x'>$x</a></li>"; } } } // button for last page if($page<$total_pages){ echo "<li>"; echo "<a href='" . $page_url . "page={$total_pages}' title='Last page is {$total_pages}.'>"; echo "Last Page"; echo "</a>"; echo "</li>"; } echo "</ul>";echo "</div>";?>
Run your products.php file on the browser http://localhost/php-shopping-cart-using-sessions-level-1/products.php. You should see an output like the image below.
Create add_to_cart.php file because when 'Add to cart' button was clicked, that file with the following code inside will be executed.
<?php// start sessionsession_start(); // get the product id$id = isset($_GET['id']) ? $_GET['id'] : "";$quantity = isset($_GET['quantity']) ? $_GET['quantity'] : 1;$page = isset($_GET['page']) ? $_GET['page'] : 1; // make quantity a minimum of 1$quantity=$quantity<=0 ? 1 : $quantity; // add new item on array$cart_item=array( 'quantity'=>$quantity); /* * check if the 'cart' session array was created * if it is NOT, create the 'cart' session array */if(!isset($_SESSION['cart'])){ $_SESSION['cart'] = array();} // check if the item is in the array, if it is, do not addif(array_key_exists($id, $_SESSION['cart'])){ // redirect to product list and tell the user it was added to cart header('Location: products.php?action=exists&id=' . $id . '&page=' . $page);} // else, add the item to the arrayelse{ $_SESSION['cart'][$id]=$cart_item; // redirect to product list and tell the user it was added to cart header('Location: products.php?action=added&page=' . $page);}?>
Create cart.php with the following basic code.
<?php// start sessionsession_start(); // connect to databaseinclude 'config/database.php'; // include objectsinclude_once "objects/product.php";include_once "objects/product_image.php"; // get database connection$database = new Database();$db = $database->getConnection(); // initialize objects$product = new Product($db);$product_image = new ProductImage($db); // set page title$page_title="Cart"; // include page header htmlinclude 'layout_header.php'; // contents will be here // layout footerinclude 'layout_footer.php';?>
We'll display message on cart.php based on given action.
Put the following code after include 'layout_header.php'; of the previous section.
$action = isset($_GET['action']) ? $_GET['action'] : ""; echo "<div class='col-md-12'>"; if($action=='removed'){ echo "<div class='alert alert-info'>"; echo "Product was removed from your cart!"; echo "</div>"; } else if($action=='quantity_updated'){ echo "<div class='alert alert-info'>"; echo "Product quantity was updated!"; echo "</div>"; }echo "</div>";
Put the following code after the code of the previous section.
if(count($_SESSION['cart'])>0){ // get the product ids $ids = array(); foreach($_SESSION['cart'] as $id=>$value){ array_push($ids, $id); } $stmt=$product->readByIds($ids); $total=0; $item_count=0; while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){ extract($row); $quantity=$_SESSION['cart'][$id]['quantity']; $sub_total=$price*$quantity; // ================= echo "<div class='cart-row'>"; echo "<div class='col-md-8'>"; echo "<div class='product-name m-b-10px'><h4>{$name}</h4></div>"; // update quantity echo "<form class='update-quantity-form'>"; echo "<div class='product-id' style='display:none;'>{$id}</div>"; echo "<div class='input-group'>"; echo "<input type='number' name='quantity' value='{$quantity}' class='form-control cart-quantity' min='1' />"; echo "<span class='input-group-btn'>"; echo "<button class='btn btn-default update-quantity' type='submit'>Update</button>"; echo "</span>"; echo "</div>"; echo "</form>"; // delete from cart echo "<a href='remove_from_cart.php?id={$id}' class='btn btn-default'>"; echo "Delete"; echo "</a>"; echo "</div>"; echo "<div class='col-md-4'>"; echo "<h4>$" . number_format($price, 2, '.', ',') . "</h4>"; echo "</div>"; echo "</div>"; // ================= $item_count += $quantity; $total+=$sub_total; } echo "<div class='col-md-8'></div>"; echo "<div class='col-md-4'>"; echo "<div class='cart-row'>"; echo "<h4 class='m-b-10px'>Total ({$item_count} items)</h4>"; echo "<h4>$" . number_format($total, 2, '.', ',') . "</h4>"; echo "<a href='checkout.php' class='btn btn-success m-b-10px'>"; echo "<span class='glyphicon glyphicon-shopping-cart'></span> Proceed to Checkout"; echo "</a>"; echo "</div>"; echo "</div>"; } // no products were added to cartelse{ echo "<div class='col-md-12'>"; echo "<div class='alert alert-danger'>"; echo "No products found in your cart!"; echo "</div>"; echo "</div>";}
The previous section will not work without the following "readByIds()" method inside "objects/product.php" file.
// read all product based on product ids included in the $ids variable// reference http://stackoverflow.com/a/10722827/827418public function readByIds($ids){ $ids_arr = str_repeat('?,', count($ids) - 1) . '?'; // query to select products $query = "SELECT id, name, price FROM " . $this->table_name . " WHERE id IN ({$ids_arr}) ORDER BY name"; // prepare query statement $stmt = $this->conn->prepare($query); // execute query $stmt->execute($ids); // return values from database return $stmt;}
We have the 'update' button on cart.php file. When that button was clicked, a javascript code is triggered.
Place the following code inside $(document).ready(function(){ of layout_footer.php file.
// update quantity button listener$('.update-quantity-form').on('submit', function(){ // get basic information for updating the cart var id = $(this).find('.product-id').text(); var quantity = $(this).find('.cart-quantity').val(); // redirect to update_quantity.php, with parameter values to process the request window.location.href = "update_quantity.php?id=" + id + "&quantity=" + quantity; return false;});
The previous section will not work without this file.
Create update_quantity.php file. Place the following code and save it.
<?phpsession_start(); // get the product id$id = isset($_GET['id']) ? $_GET['id'] : 1;$quantity = isset($_GET['quantity']) ? $_GET['quantity'] : ""; // make quantity a minimum of 1$quantity=$quantity<=0 ? 1 : $quantity; // remove the item from the arrayunset($_SESSION['cart'][$id]); // add the item with updated quantity$_SESSION['cart'][$id]=array( 'quantity'=>$quantity); // redirect to product list and tell the user it was added to cartheader('Location: cart.php?action=quantity_updated&id=' . $id);?>
We have the 'remove' button on cart.php file. When that button was clicked, it will trigger remove_from_cart.php file.
Create remove_from_cart.php file. Place the following code and save it.
<?php// start sessionsession_start(); // get the product id$id = isset($_GET['id']) ? $_GET['id'] : "";$name = isset($_GET['name']) ? $_GET['name'] : ""; // remove the item from the arrayunset($_SESSION['cart'][$id]); // redirect to product list and tell the user it was added to cartheader('Location: cart.php?action=removed&id=' . $id);?>
The checkout page looks like the cart page but the items cannot be updated or removed. It just like the summary of orders. Create checkout.php with the following code.
<?php// start sessionsession_start(); // connect to databaseinclude 'config/database.php'; // include objectsinclude_once "objects/product.php";include_once "objects/product_image.php"; // get database connection$database = new Database();$db = $database->getConnection(); // initialize objects$product = new Product($db);$product_image = new ProductImage($db); // set page title$page_title="Checkout"; // include page header htmlinclude 'layout_header.php'; if(count($_SESSION['cart'])>0){ // get the product ids $ids = array(); foreach($_SESSION['cart'] as $id=>$value){ array_push($ids, $id); } $stmt=$product->readByIds($ids); $total=0; $item_count=0; while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){ extract($row); $quantity=$_SESSION['cart'][$id]['quantity']; $sub_total=$price*$quantity; //echo "<div class='product-id' style='display:none;'>{$id}</div>"; //echo "<div class='product-name'>{$name}</div>"; // ================= echo "<div class='cart-row'>"; echo "<div class='col-md-8'>"; echo "<div class='product-name m-b-10px'><h4>{$name}</h4></div>"; echo $quantity>1 ? "<div>{$quantity} items</div>" : "<div>{$quantity} item</div>"; echo "</div>"; echo "<div class='col-md-4'>"; echo "<h4>$" . number_format($price, 2, '.', ',') . "</h4>"; echo "</div>"; echo "</div>"; // ================= $item_count += $quantity; $total+=$sub_total; } // echo "<div class='col-md-8'></div>"; echo "<div class='col-md-12 text-align-center'>"; echo "<div class='cart-row'>"; if($item_count>1){ echo "<h4 class='m-b-10px'>Total ({$item_count} items)</h4>"; }else{ echo "<h4 class='m-b-10px'>Total ({$item_count} item)</h4>"; } echo "<h4>$" . number_format($total, 2, '.', ',') . "</h4>"; echo "<a href='place_order.php' class='btn btn-lg btn-success m-b-10px'>"; echo "<span class='glyphicon glyphicon-shopping-cart'></span> Place Order"; echo "</a>"; echo "</div>"; echo "</div>"; } else{ echo "<div class='col-md-12'>"; echo "<div class='alert alert-danger'>"; echo "No products found in your cart!"; echo "</div>"; echo "</div>";} include 'layout_footer.php';?>
We'll use this file to show a "thank you" message and remove all items in the cart.
Create place_order.php file. Place the following code.
<?php// start sessionsession_start(); // remove items from the cartsession_destroy(); // set page title$page_title="Thank You!"; // include page header HTMLinclude_once 'layout_header.php'; echo "<div class='col-md-12'>"; // tell the user order has been placed echo "<div class='alert alert-success'>"; echo "<strong>Your order has been placed!</strong> Thank you very much!"; echo "</div>"; echo "</div>"; // include page footer HTMLinclude_once 'layout_footer.php';?>
Create product.php with the following basic code.
<?php// start sessionsession_start(); // include classesinclude_once "config/database.php";include_once "objects/product.php";include_once "objects/product_image.php"; // get database connection$database = new Database();$db = $database->getConnection(); // initialize objects$product = new Product($db);$product_image = new ProductImage($db); // include page header HTMLinclude_once 'layout_header.php'; // content will be here // include page footer HTMLinclude_once 'layout_footer.php';?>
Put the following code after "$product_image = new ProductImage($db);" code of the previous section.
// get ID of the product to be edited$id = isset($_GET['id']) ? $_GET['id'] : die('ERROR: missing ID.'); // set the id as product id property$product->id = $id; // to read single record product$product->readOne(); // set page title$page_title = $product->name; // product thumbnail will be here
The previous section will not work without the "readOne()" method. Add the following method inside "objects/product.php" file.
// used when filling up the update product formfunction readOne(){ // query to select single record $query = "SELECT name, description, price FROM " . $this->table_name . " WHERE id = ? LIMIT 0,1"; // prepare query statement $stmt = $this->conn->prepare( $query ); // sanitize $this->id=htmlspecialchars(strip_tags($this->id)); // bind product id value $stmt->bindParam(1, $this->id); // execute query $stmt->execute(); // get row values $row = $stmt->fetch(PDO::FETCH_ASSOC); // assign retrieved row value to object properties $this->name = $row['name']; $this->description = $row['description']; $this->price = $row['price'];}
When these product thumbnails were hovered, it displayes a larger version of the image. It is Amazon-style.
Open product.php file. Replace // product thumbnail will be here comment with the following code.
// set product id$product_image->product_id=$id; // read all related product image$stmt_product_image = $product_image->readByProductId(); // count all relatd product image$num_product_image = $stmt_product_image->rowCount(); echo "<div class='col-md-1'>"; // if count is more than zero if($num_product_image>0){ // loop through all product images while ($row = $stmt_product_image->fetch(PDO::FETCH_ASSOC)){ // image name and source url $product_image_name = $row['name']; $source="uploads/images/{$product_image_name}"; echo "<img src='{$source}' class='product-img-thumb' data-img-id='{$row['id']}' />"; } }else{ echo "No images."; }echo "</div>"; // product image will be here
The previous section section will not work without the "readByProductId()" method inside "objects/product_image.php" file.
// read all product image related to a productfunction readByProductId(){ // select query $query = "SELECT id, product_id, name FROM " . $this->table_name . " WHERE product_id = ? ORDER BY name ASC"; // prepare query statement $stmt = $this->conn->prepare( $query ); // sanitize $this->product_id=htmlspecialchars(strip_tags($this->product_id)); // bind prodcut id variable $stmt->bindParam(1, $this->product_id); // execute query $stmt->execute(); // return values return $stmt;}
Only one product image are displayed at a time. This part displays the larger product image based on the hovered product thumbnail.
Open product.php file. Replace // product image will be here comment with the following code.
echo "<div class='col-md-4' id='product-img'>"; // read all related product image $stmt_product_image = $product_image->readByProductId(); $num_product_image = $stmt_product_image->rowCount(); // if count is more than zero if($num_product_image>0){ // loop through all product images $x=0; while ($row = $stmt_product_image->fetch(PDO::FETCH_ASSOC)){ // image name and source url $product_image_name = $row['name']; $source="uploads/images/{$product_image_name}"; $show_product_img=$x==0 ? "display-block" : "display-none"; echo "<a href='{$source}' target='_blank' id='product-img-{$row['id']}' class='product-img {$show_product_img}'>"; echo "<img src='{$source}' style='width:100%;' />"; echo "</a>"; $x++; } }else{ echo "No images."; }echo "</div>"; // product details will be here
Put the following jQuery code inside "$(document).ready(function(){" of layout_footer.php file.
// change product image on hover$(document).on('mouseenter', '.product-img-thumb', function(){ var data_img_id = $(this).attr('data-img-id'); $('.product-img').hide(); $('#product-img-'+data_img_id).show();});
This part display product price, description and category.
Open product.php file. Replace // product details will be here comment with the following code.
echo "<div class='col-md-5'>"; echo "<div class='product-detail'>Price:</div>"; echo "<h4 class='m-b-10px price-description'>$" . number_format($product->price, 2, '.', ',') . "</h4>"; echo "<div class='product-detail'>Product description:</div>"; echo "<div class='m-b-10px'>"; // make html $page_description = htmlspecialchars_decode(htmlspecialchars_decode($product->description)); // show to user echo $page_description; echo "</div>"; echo "<div class='product-detail'>Product category:</div>"; echo "<div class='m-b-10px'>{$product->category_name}</div>"; echo "</div>";
Now we will display 'Add to cart' button if the product is not yet added to cart. Else, we will display 'update cart' button.
Place the following code after the previous section's code.
echo "<div class='col-md-2'>"; // if product was already added in the cart if(array_key_exists($id, $_SESSION['cart'])){ echo "<div class='m-b-10px'>This product is already in your cart.</div>"; echo "<a href='cart.php' class='btn btn-success w-100-pct'>"; echo "Update Cart"; echo "</a>"; } // if product was not added to the cart yet else{ echo "<form class='add-to-cart-form'>"; // product id echo "<div class='product-id display-none'>{$id}</div>"; echo "<div class='m-b-10px f-w-b'>Quantity:</div>"; echo "<input type='number' value='1' class='form-control m-b-10px cart-quantity' min='1' />"; // enable add to cart button echo "<button style='width:100%;' type='submit' class='btn btn-primary add-to-cart m-b-10px'>"; echo "<span class='glyphicon glyphicon-shopping-cart'></span> Add to cart"; echo "</button>"; echo "</form>"; }echo "</div>";
When user click on any product image in products.php page, he will land to a product page that looks like the image below.
I'm so glad that this code delights other people. The following are some of them from the comments section!
★★★★★ "Hey Mike, my name is Leonardo from Argentina. I've been reading your blog since like 4 months from now, and I really must say: your tutorials are very good, they has helped me in many of my works... Well, thank you very much man. I really admire your work." ~ Leonardo
★★★★★ "Man, your tut's are awesome. Im so glad ive found your blog. Big respect!" ~ Milos
★★★★★ "I bought your level-2 source code and it was so good, very big help for me. It was worth it. Thank you very much!" ~ Ashley Deanna Plata
★★★★★ "Hello, This is a great script and I have paid for your work (it Worth it)." ~ Louis Blais
★★★★★ "Words can't express how grateful I am for the work and the articles you post, had some troubles with doing somethings but your articles as per usual hit the hammer right on the head. They are a great way for expanding upon later too!" ~ Jeremy Smith
We highly recommend for you to follow and study our well-detailed, step-by-step tutorial above first. Nothing beats experience when it comes to learning.
But we believe you will learn faster if you’ll see the final source code as well. We consider it as your additional guide.
Imagine the value or skill upgrade it can bring you. The additional income you can get from your work, projects or business. The precious time you save. Isn’t that what you want?
By now, you need to download our source codes. To do it, use any download buttons in the next few sections below.
Once you downloaded the source codes, here’s how you can run it.
Extract the files to your server directory.
Go to your PhpMyAdmin, create a database with a name "shop_cart_sessions_1".
Import the "shop_cart_sessions_1.sql" file located in the "README" folder.
You might need to change database credentials in /config/database.php
Run "products.php", this is the main PHP file. We do not have index.php
FEATURE
LEVEL 1
Learn to code a simple cart function
YES
List all products from MySQL database
YES
Pagination on products list page
YES
Add to cart action button
YES
Remove from cart action button
Yes
Update cart quantity
YES
Checkout Page
YES
Place order / Thank you page
YES
Amazon-style product details page
YES
Change image on hover of thumbnail
YES
Show message about a product added to cart
YES
Show message about a product removed from cart
YES
Navigation bar highlights which page is selected
YES
Cart link shows count of products added in the cart
YES
Show message if no products found in database
YES
Show message if no product found in cart
YES
Bootstrap enabled UI
YES
Cart page that lists all products added to cart
YES
Auto-compute total cost of all products added to cart
YES
PDO extension used
YES
Step by step tutorial
YES
Free source code updates
YES
Free support for 6 months
YES
FEATURE
LEVEL 2
All features of LEVEL 1 source code
YES
Navigation bar has drop down of product categories
YES
Highlight selected category in drop down
YES
Categories are retrieved from the database
YES
Show products by category
YES
List products under a category with pagination
YES
Search product
YES
Search results with pagination
YES
Search box located on upper right corner of navigation bar
YES
Search box requires search term before clicking the search button
YES
Add to cart action button
YES
Quantity text box beside the add to cart button
YES
Quantity text box required to be a number
YES
Quantity text box required to have a minimum value of 1, negative value not allowed
YES
Remember the page number where the user clicked the "Add to cart" button
YES
Quantity drop down options based on available stock
YES
Well formatted money value
YES
Check out button with cart icon
YES
Product image viwable in lightbox
YES
Shows number of stock left
YES
Stock decreases once checked out
YES
Order saved in orders and order_items table in the database
YES
Emtpy cart button
YES
Emtpy cart confirmation pop up
YES
Bootstrap enabled UI
YES
Cart page that lists all products added to cart
YES
Quantity text box beside update quantity button
YES
Show price, category and stocks left in product list page
YES
Auto-compute total cost of all products added to cart
YES
Used PDO bindParam() to prevent SQL injection in MySQL queries
YES
Used PHP htmlspecialchars() to prevent XSS attacks
YES
SQL file is in the "dev" folder
YES
PDO extension used
YES
Free code updates
YES
Free support for 6 months
YES
You can download our "PHP Shopping Cart & Ordering Module" source code. It has several features you need to learn more about how to handle the users, shopping cart, and ordering using the PHP & MySQL technology. CLICK HERE TO LEARN MORE
You can download our "PHP Shopping Cart System" source code as well. Many of you requested this type of source code and not it is here!
You needed a shopping cart system with user management (merchant and customer), product management, order management, security and more features based on our source codes here in codeofaninja.com. CLICK HERE TO LEARN MORE.
You have two options:
Option #1: We just learned how to code an online shopping cart from scratch using PHP SESSIONS. But did you know that we can create the almost the same functions using another PHP mechanism called COOKIES?
If you're excited to learn this new concept, let us go to the next tutorial: PHP Shopping Cart Tutorial Using COOKIES
Option #2: This next tutorial is the start of our JavaScript programming journey. Go to our next tutorial: How To Create a Simple REST API in PHP – Step By Step Guide!
GETTING STARTED
Learn the basics of web programming.
PHP PROGRAMMING TUTORIALS
Start something awesome with PHP!
REST API TUTORIALS
Welcome to the new world of web development!
PHP WEB APP SOURCE CODES
Scripts that will help you build a web app.
Download By Modules:
MORE SCRIPTS
More code examples that can be useful for you!
If you found a problem with this code, please write a comment below. Please be descriptive about your issue. Please provide the error messages, screenshots (or screencast) and your test URL. Thanks!
Before you write a comment, remember to read this guide and our code of conduct.
We constantly add new tutorials and improve our existing tutorials and source codes. Be one of the first to know an update by subscribing to our FREE newsletter. CLICK HERE TO SUBSCRIBE FOR FREE!
Thank you for studying our tutorial about PHP Shopping Cart Tutorial using SESSIONS!
Share
Before you write a comment, please read this guide and our code of conduct.
Our database name will be called "shop_cart_sessions_1", and we will have two (2) tables. The image below is a visual representation of our database tables and how they are related.
If you will run layout_header.php file, it will look like this.
The custom.css looks like this.
The navigation.php looks like this.
When user click the "Add to cart" button.
Go to the cart page by clicking the "Cart" option on the navigation bar.
When user click the "Update" button in the cart page.
If user click the "Delete" button.
The checkout page.
When user click the "Place Order" button.
If user hovers on any of those thumbnail or small images, the big image will change as well. The "Add to cart" button is working as well.
Here's the output when the product is already added to cart. If user click the "Update Cart" button, he will land on the cart page where he can update the cart quantity.
