SOURCE CODE DOWNLOAD

Click here to download all the source code in a zip file – I have released it under the MIT License, so feel free to build on top of it if you want to.

QUICK START

• Unzip the downloaded file into a folder.
• Import all the SQL (in the SQL folder) into your database.
• Change the database settings in lib/2a-config.php.
• Launch 3b-products.php in your browser.

404 ERRORS WITH AJAX?

Make sure that the server path is set correctly in all the AJAX calls in public/4a-cart.js. Do a quick search-and-replace for url : "4b-ajax-cart.php", try using the absolute URL instead. For example, url : "http://mysite.com/cart/4b-ajax-cart.php".

PROJECT FOLDERS

Here is a quick introduction to how the folders are being organized inside the zip file.

• images Where we store all the product images.
• lib Where we store all the PHP library files and configuration.
• public Where we put all the CSS, Javascript, and client-side scripts.
• SQL All the necessary SQL to build the database are put in here, please remember to delete this folder after you have imported all of them.

SEND ORDER VIA EMAIL

Need to send out a confirmation email to the customer? There are 2 different version of checkout, simply change req : "checkout" to req : "checkout-email" in public/4a-cart.js. You might want to customize the email message in 4b-ajax-cart.php though, it is nothing but a skeleton email with all the products.

TABLES OVERVIEW

PRODUCTS TABLE

CREATE TABLE `products` (
  `product_id` int(11) NOT NULL,
  `product_name` varchar(255) NOT NULL,
  `product_image` varchar(255) DEFAULT NULL,
  `product_description` text,
  `product_price` decimal(10,2) NOT NULL DEFAULT '0.00'
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `products`
  ADD PRIMARY KEY (`product_id`),
  ADD KEY `name` (`product_name`);

ALTER TABLE `products`
  MODIFY `product_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;

ORDERS TABLES

CREATE TABLE `orders` (
`order_id` int(11) NOT NULL,
`order_date` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
`order_name` varchar(255) NOT NULL,
`order_email` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `orders`
ADD PRIMARY KEY (`order_id`),
ADD KEY `name` (`order_name`),
ADD KEY `email` (`order_email`),
ADD KEY `order_date` (`order_date`);

ALTER TABLE `orders`
MODIFY `order_id` int(11) NOT NULL AUTO_INCREMENT;

ORDER ITEMS TABLES

CREATE TABLE `orders_items` (
`order_id` int(11) NOT NULL,
`product_id` int(11) NOT NULL,
`quantity` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ALTER TABLE `orders_items`
ADD PRIMARY KEY (`order_id`,`product_id`);

DUMMY PRODUCTS AND IMAGES

INSERT INTO `products` (`product_id`, `product_name`, `product_image`, `product_description`, `product_price`) VALUES
(1, 'Car', 'car.jpg', 'It\'s a car. Batteries not included, not required. Powered by hand.', '6.00'),
(2, 'Dangerous Bear', 'dangerous-bear.jpg', 'Beware. This bear is extremely dangerous.', '8.00'),
(3, 'Fish', 'fish.jpg', 'There is something fishy going on here...', '7.50'),
(4, 'Chill Gorilla', 'gorilla.jpg', 'Unlike the dangerous bear, this one is chill.', '8.80'),
(5, 'Rubber Duck', 'rubber-duck.jpg', 'Best partner in the bath tub.', '9.75'),
(6, 'Rubiks Cube', 'rubiks-cube.jpg', 'Some say that this cube trains your intelligence. Some others claim that it\'s just frustration.', '9.30');

As for this final one, it contains some dummy products, and you can totally choose to not import them; You can create some of your own actual products instead. I have also placed all the dummy product images in the /images folder, so feel free to delete those if you are not using it.

CONFIG FILE

This one should be very straightforward, just a script to hold all our settings. Just remember to change the database settings to your own. Also, take note that I have silenced the notification messages in error_reporting. They are non-critical “errors” that will not break the code, but serve very well in scaring away beginners and users… So just keep it muted for the sake of world peace.

THE DATABASE LIBRARY

pdo = new PDO(
        $str, DB_USER, DB_PASSWORD, [
          PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
          PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
          PDO::ATTR_EMULATE_PREPARES => false
        ]
      );
      return true;
    }

    // ERROR - DO SOMETHING HERE
    // THROW ERROR MESSAGE OR SOMETHING
    catch (Exception $ex) {
      print_r($ex);
      die();
    }
  }

  function __destruct() {
  // __destruct() : close connection when done

    if ($this->stmt !== null) { $this->stmt = null; }
    if ($this->pdo !== null) { $this->pdo = null; }
  }

  function start() {
  // start() : auto-commit off

    $this->pdo->beginTransaction();
  }

  function end($commit=1) {
  // end() : commit or roll back?

    if ($commit) { $this->pdo->commit(); }
    else { $this->pdo->rollBack(); }
  }
 
  function exec($sql, $data=null) {
  // exec() : run insert, replace, update, delete query
  // PARAM $sql : SQL query
  //       $data : array of data
 
    try {
      $this->stmt = $this->pdo->prepare($sql);
      $this->stmt->execute($data);
      $this->lastID = $this->pdo->lastInsertId();
    } catch (Exception $ex) {
      $this->error = $ex;
      return false;
    }
    $this->stmt = null;
    return true;
  }

  function fetch($sql, $cond=null, $key=null, $value=null) {
  // fetch() : perform select query
  // PARAM $sql : SQL query
  //       $cond : array of conditions
  //       $key : sort in this $key=>data order, optional
  //       $value : $key must be provided, sort in $key=>$value order

    $result = false;
    try {
      $this->stmt = $this->pdo->prepare($sql);
      $this->stmt->execute($cond);
      if (isset($key)) {
        $result = array();
        if (isset($value)) {
          while ($row = $this->stmt->fetch(PDO::FETCH_NAMED)) {
            $result[$row[$key]] = $row[$value];
          }
        } else {
          while ($row = $this->stmt->fetch(PDO::FETCH_NAMED)) {
            $result[$row[$key]] = $row;
          }
        }
      } else {
        $result = $this->stmt->fetchAll();
      }
    } catch (Exception $ex) {
      $this->error = $ex;
      return false;
    }
    $this->stmt = null;
    return $result;
  }
}
?>

This is just a nifty PDO database library that I have used all over my other projects. Please feel free to use this to build your future projects, if you want.

THE PRODUCTS LIBRARY

fetch(
      "SELECT * FROM `products`", null, 
      "product_id"
    );
  }

  function add ($name, $img, $desc, $price) {
  // add () : add new product

    return $this->exec(
      "INSERT INTO `products` (`product_name`, `product_image`, `product_description`, `product_price`) VALUES (?, ?, ?, ?)",
      [$name, $img, $desc, $price]
    );
  }

  function edit ($id, $name, $img, $desc, $price) {
  // pEdit () : update product

    return $this->exec(
      "UPDATE `products` SET `product_name`=?, `product_image`=?, `product_description`=?, `product_price`=? WHERE `product_id`=?",
      [$name, $img, $desc, $price, $id]
    );
  }

  function del ($id) {
  // del () : delete product

    return $this->exec(
      "DELETE FROM `products` WHERE `product_id`=?",
      [$id]
    );
  }
}
?>

With the power of the database library – All we need is nothing more than a couple of SQL queries to create this products library.

THE PRODUCTS PAGE

get();

/* [HTML] */ ?>


  
    Simple Cart Demo 
      
      

        🛒 0
      
    
 $row) { ?>
          

            
= $row['product_name'] ?>
            
$= $row['product_price'] ?>
            
= $row['product_description'] ?>
            
        

    
    

  

• We load the library files at the top, use it to fetch the products from the database.
• A cart button in the  section to show the total number of items, and to toggle between the shopping cart/products when clicked.
• Products display in the middle.
• Finally, a hidden cart 
  element at the bottom, which we will use to load the shopping cart via AJAX.

  Please do feel free to change the structure of this page as you see fit.

  THE CSS

  public/3c-theme.css

  /* [HEADER + CART ICON] */
  html, body {
    max-width: 1200px;
    font-family: arial, sans-serif;
    padding: 0;
    margin: 0 auto;
  }
  #page-header {
    background: #f0f0f0;
    padding: 20px;
    position: relative;
  }
  #page-cart-icon {
    padding: 8px;
    border-radius: 10px;
    font-size: 20px;
    background: #fafafa;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
  }
  
  /* [PRODUCTS LIST] */
  #page-products {
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
  }
  .pdt {
    flex-grow: 1;
    width: 30%;
    background: #f0f0f0;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
    box-sizing: border-box;
  }
  @media all and (max-width: 768px) {
    .pdt { width: 45% }
  }
  .pdt-img {
    max-width: 100%;
    object-fit: contain;
  }
  .pdt-name {
    font-size: 18px;
    margin: 5px 0;
  }
  .pdt-price {
    color: #a82828;
    font-weight: 700;
  }
  .pdt-desc {
    font-size: 16px;
    color: #777;
  }
  .pdt-add {
    width: 100%;
    background: #3e70c1;
    font-size: 16px;
    color: #fff;
    border: 0;
    padding: 10px 0;
    margin-top: 10px;
    cursor: pointer;
  }
  
  /* [SHOPPING CART] */
  .ninja {
    display: none !important;
  }
  #page-cart {
    padding: 10px;
  }
  #cart-table {
    border-collapse: collapse;
    width: 100%;
  }
  #cart-table th {
    text-align: left;
  }
  #cart-table th, #cart-table td {
    padding: 10px;
  }
  #cart-table tr:nth-child(odd) {
    background: #f2f2f2;
  }
  #cart-table input[type=number] {
    width: 60px;
    padding: 5px;
  }
  .cart-remove {
    background: #d63b3b;
    color: #fff;
    border: 0;
    padding: 10px;
    cursor: pointer;
  }
  
  /* [CHECKOUT FORM] */
  #cart-checkout {
    margin-top: 10px;
    max-width: 320px;
  }
  #cart-checkout input {
    box-sizing: border-box;
    padding: 5px;
    margin: 5px;
    width: 100%;
  }
  #cart-checkout input[type=submit] {
    background: #3e70c1;
    color: #fff;
    border: 0;
    padding: 10px 0;
    cursor: pointer;
    font-size: 16px;
  }

  Holy cow! That is a lot of CSS code, but keep calm and analyze – There are only 4 sections.

  • The overall and shopping cart icon at the top.
  • Followed by styles for the products list.
  • The shopping cart.
  • Finally, the checkout form.

  That’s it. Feel free to change the styles to fit your own website’s theme.

  STEP 4
  CART SCRIPTS

  For this final step, we shall deal with the scripts of the shopping cart itself.

  SHOPPING CART JAVASCRIPT

  public/4a-cart.js

  // @TODO -
  // There is literally little to no interface in this script.
  // Feedback meesage such as "item added to cart" uses raw Javascript alert
  // Bootstrap, jQuery, Angular, or vanilla CSS - Implement your own interface.
  
  var cart = {
    ajax : function (opt) {
    // ajax() : helper function, do AJAX request
    // PARAM opt.data : data to be sent, an object with key-value pairs
    //       opt.url : target URL
    //       opt.target : (optional) ID of HTML element, put server response in here if provided
    //       opt.load : (optional) function to call when AJAX load is complete
  
      // DATA
      var data = null;
      if (opt.data) {
        data = new FormData();
        for (var d in opt.data) {
          data.append(d, opt.data[d]);
        }
      }
  
      // AJAX
      var xhr = new XMLHttpRequest();
      xhr.open('POST', opt.url, true);
      xhr.onload = function(){
        if (xhr.status!=200) {
          console.log(xhr);
          alert("AJAX error. Server responded with error code " + xhr.status + " " + xhr.statusText);
        } else {
          if (opt.target) {
            document.getElementById(opt.target).innerHTML = this.response;
          }
          if (typeof opt.load == "function") {
            opt.load(this.response);
          }
        }
      };
      xhr.send(data);
    },
  
    add : function (id) {
    // add () : add item to cart
    // PARAM id : product ID
  
      cart.ajax({
        url : "4b-ajax-cart.php",
        data : {
          req : "add",
          product_id : id
        },
        load : function (res) {
          cart.count();
          // @TODO
          alert(res);
        }
      });
    },
  
    count : function () {
    // count() : update items count
  
      cart.ajax({
        url : "4b-ajax-cart.php",
        data : { req : "count", },
        target : "page-cart-count"
      });
    },
  
    toggle : function (reload) {
    // toggle() : show/hide cart
    // PARAM reload : force cart reload?
  
      var pgPdt = document.getElementById("page-products"),
          pgCart = document.getElementById("page-cart");
  
      if (reload || pgCart.classList.contains("ninja")) {
        cart.ajax({
          url : "4b-ajax-cart.php",
          data : { req : "show", },
          target : "page-cart",
          load : function () {
            pgPdt.classList.add("ninja");
            pgCart.classList.remove("ninja");
          }
        });
      } else {
        pgPdt.classList.remove("ninja");
        pgCart.classList.add("ninja");
      }
    },
  
    change : function (id) {
    // change() : change quantity
  
      var qty = document.getElementById("qty_"+id).value;
      cart.ajax({
        url : "4b-ajax-cart.php",
        data : {
          req : "change",
          product_id : id,
          qty : qty
        },
        load : function (res) {
          cart.count();
          cart.toggle(1);
          // @TODO
          alert(res);
        }
      });
    },
  
    remove : function (id) {
    // remove() : remove item from cart
  
      document.getElementById("qty_"+id).value = 0;
      cart.change(id);
    },
  
    checkout : function () {
    // checkout () : checkout
  
      cart.ajax({
        url : "4b-ajax-cart.php",
        data : {
          req : "checkout",
          // @TODO
          // Change to checkout-email if you want an email to be sent on checkout
          // req : "checkout-email",
          name : document.getElementById("co_name").value,
          email : document.getElementById("co_email").value
        },
        load : function (res) {
          if (res=="OK") {
            window.location = "4d-thank-you.php";
          } else {
            gen.nShow(res);
          }
        }
      });
      return false;
    }
  };
  window.addEventListener("load", cart.count);

  Yep, this Javascript will pretty much do most of the shopping cart magic on the HTML page. It may seem pretty complicated, but it is actually nothing more than a bunch of AJAX calls to the server.

  Function	Description
  cart.ajax	Helper function, does an AJAX call.
  cart.add	Add an item to the cart.
  cart.count	Update the total number of items in the cart.
  cart.toggle	Show/hide the shopping cart contents.
  cart.change	Change the quantity of an item in the cart.
  cart.remove	Remove an item from the cart.
  cart.checkout	Check out the current order.

  AJAX HANDLER

  4b-ajax-cart.php

  0) {
        foreach ($_SESSION['cart'] as $id => $qty) {
          $total += $qty;
        }
      }
      echo $total;
      break;
  
    /* [SHOW CART] */
    case "show":
      // Fetch products
      require PATH_LIB . "2b-lib-db.php";
      require PATH_LIB . "4c-lib-cart.php";
      $cartLib = new Cart();
      $products = $cartLib->details();
  
      // Cart contents in HTML
      $sub = 0;
      $total = 0; ?>
      
  MY CART
      0) {
        foreach ($_SESSION['cart'] as $id => $qty) {
          $sub = $qty * $products[$id]['product_price'];
          $total += $sub; ?>
        
  Remove
          
  Qty
          
  Item
          
  Price
        
  
            
          
  
          
  = $products[$id]['product_name'] ?>
          
  = sprintf("$%0.2f", $sub) ?>
        
  Cart is empty
  
          
  Grand Total
          
  = sprintf("$%0.2f", $total) ?>
        
   0) { ?>
      
  
        Name
        Email
        
      checkout($_POST['name'], $_POST['email'])) {
        $_SESSION['cart'] = [];
        echo "OK";
      } else {
        echo $cartLib->error;
      }
      break;
  
    /* [ALTERNATIVE CHECKOUT] */
    // This version sends an email to the customer on successful checkout
    case "checkout-email":
      require PATH_LIB . "2b-lib-db.php";
      require PATH_LIB . "4c-lib-cart.php";
      if ($cartLib->checkout($_POST['name'], $_POST['email'])) {
        $_SESSION['cart'] = [];
        // @TODO
        // Format this email message as you see fit
        $order = $cartLib->get($cartLib->lastID);
        $to = $_POST['email'];
        $subject = "Order Received";
        $message = "";
        foreach ($order['items'] as $pid=>$p) {
          $message .= $p['product_name'] . " - " . $p['quantity'] . "
  ";
        }
        $headers = implode("\r\n", [
          'MIME-Version: 1.0',
          'Content-type: text/html; charset=utf-8',
          'From: [email protected]'
        ]);
        echo @mail($to, $subject, $message, $headers) ? "OK" : "ERROR sending email!" ;
      } else {
        echo $cartLib->error;
      }
      break;
  }
  ?>

  On the receiving end of the AJAX calls, is a PHP script that will do the processing. How this handler work is pretty easy – All we have to do is to post the service request $_POST['req'], followed by the required parameters.

  Req	Description
  count	Get the total number of items in the cart.
  add	Add a new item to the cart. Parameters: product_id
  show	Show the current shopping cart.
  change	Change the quantity of an item in the cart. A quantity of 0 will remove the product from the cart. Parameters: product_id, qty
  checkout	Check out the current cart. Parameters: name, email
  checkout-email	An alternative checkout that will send out an email to the customer. Parameters: name, email

  SHOPPING CART SESSION

  Apart from the POST parameters, another important thing that you need to know is how the shopping cart is being kept in the user session.

  • All the selected items and quantity are kept in $_SESSION['cart'].
  • It is actually nothing but a simple array that goes PRODUCT ID => QUANTITY.
  • So for example, if we have quantity 12 of product id 8 in the cart, that will result in $_SESSION['cart'][8] = 12.

  THE CART LIBRARY

  lib/4c-lib-cart.php

  fetch($sql, array_keys($_SESSION['cart']), "product_id");
    }
   
    function checkout ($name, $email) {
    // checkout() : checkout, create new order
    // PARAM $name : customer's name
    //       $email : customer's email address
  
      // Init
      $this->start();
  
      // Create the order entry first
      $pass = $this->exec(
        "INSERT INTO `orders` (`order_name`, `order_email`) VALUES (?, ?)",
        [$name, $email]
      );
  
      // Insert the items
      if ($pass) {
        $sql = "INSERT INTO `orders_items` (`order_id`, `product_id`, `quantity`) VALUES ";
        $cond = [];
        foreach ($_SESSION['cart'] as $id=>$qty) {
          $sql .= "(?, ?, ?),";
          array_push($cond, $this->lastID, $id, $qty);
        }
        $sql = substr($sql, 0, -1) . ";";
        $pass = $this->exec($sql, $cond);
      }
  
      // Finalize
      $this->end($pass);
      return $pass;
    }
  
    function get ($id) {
    // get () : get order
    // PARAM $id : order ID
  
      $order = $this->fetch(
        "SELECT * FROM `orders` WHERE `order_id`=?", [$id]
      );
      $order['items'] = $this->fetch(
        "SELECT * FROM `orders_items` LEFT JOIN `products` USING (`product_id`) WHERE `orders_items`.order_id=?", 
        [$id], "product_id"
      );
      return $order;
    }
  }
  ?>

  Function	Description
  details	Get all the products in the cart.
  checkout	Create a new order.
  get	Get a specified order.

  THANK YOU PAGE

  4d-thank-you.php

  
  
    
      
  THANK YOU!
      
  
        We have received your order, and will get back to you as soon as possible.
      
    
  

  Finally, a simple thank you page for the users after they check out, and that’s the end of the project!

  EXTRA
  USEFUL BITS & LINKS

  That’s all for this project, and here is a small section on some extras that may be useful to you.

  ADDING MORE FIELDS

  Need to capture more fields such as the address or telephone number from the user? Well, remember that there are 3 parts to the system? You just need to modify them accordingly:

  • Database – Add your required fields to the orders table accordingly.
  • Server-side scripts – Update the cart library, and the AJAX handler scripts to properly capture the additional fields.
  • Client-side scripts – Update the HTML form, and the Javascript to include your new fields accordingly.

  FUTURE EXPANSIONS

  This tutorial has barely covered a small part of a possibly massive system. It is still missing a user system, an administrator’s panel, and so much more. Here are a few links to my other guides that may be useful:

  • How to create a user registration form.
  • Simple administration panel.
  • Import/export CSV, if you need to do reports.

  PAYMENT GATEWAYS

  Looking to add online payment methods?

  • Paypal smart payment buttons.
  • Stripe card payments.

  FULL-FLEDGED SHOPPING CARTS

  Changed your mind? Don’t want to do so much coding? Try:

  • Good old Magento
  • WordPress and Woocommerce
  • Shopify
  • XCart

  CLOSING
  WHAT NEXT?

  Congratulations, you have completed a long and tiring tutorial. But this is still a very rough shopping cart, and there are plenty of improvements to be made – The visuals of the pages, a proper checkout and thank you page, an administrator’s panel, restricting the number of items that can be ordered, error handling, no response from AJAX call, SQL error, etc…

  But for now, rest easy knowing that you are able of creating fully functional shopping carts. Good luck with your future projects and happy coding!

  The post 4 Steps Simple PHP MYSQL Shopping Cart (Free Source Code) appeared first on Code Boxx.