Skip to content

jQuery

Static CV for IT Graduate built with HTML, CSS, JavaScript, jQuery, Bootstrap

Share Button

Sooner or Later each IT graduate will be looking for a IT related job… At least most of them.

 

Live Demo

sharemywe_static_cv_about_section

As a Computer Science graduate I think that each person applying for IT related job should have an online CV up and ready so when applying for an actual job, a prospective/future employers could view your resume on desktop, laptop, mobile etc.

That’s  why I’ve decided to create an example of online resume that you could use as your own, adjust  content or change styling and functionality if you wish.

Below CV is a static webpage built with HTMl, CSS, JavaScript, jQuery and Bootstrap.

CV Consist of 4 main sections : About, Website, Experience and Contact.
If you wish you can add additional question or remove it. I have applied number of comments within files so you will have no difficulties when applying changes.

 

Download

sharemywe_static_cv_contact_section

Live Demo

 

Resume consists of 3 files:

index.html

style.css

font-awesome

 

Functionalities

  • Each time you click on navigation pane item, the color will change, indicating that you’re displaying this actual section.
  • In ‘about’ section next to a job title, you’ll notice certain technologies scrolling down. It’s a nice feature that will give an idea of technologies you’re using to the people viewing your resume.

 

I won’t discuss all functionalities within this section, I will let you to download and check the resume yourself 😉

 

sharemywe_static_cv_experience_section

 

That’s all for this post. I hope You’ve enjoyed it.
If you have any questions, ideas or improvement suggestions, don’t hesitate and let me know 😉

 

Share Button

Ajax Shopping Cart, PHP, jQuery and Bootstrap

Share Button

Ajax Shopping Cart, PHP, jQuery and Bootstrap

ajax_sharemyweb_shopping_cart_top

 

Download

Shopping cart applications are an integral part of e-commerce websites all over the internet, that drives the businesses profits, allowing for a wider range of customers. Most of the shopping cart out there, rely strictly on PHP, which seems to power most of the web. When I think of PHP I also think of page refresh on each single PHP request. Don’t get me wrong, but sometimes it may be a bit annoying when the page gets refresh all the time. AJAX allows to grab a data/content whatever… with no page refresh, so we can actually update the relevant part of page in a smooth way. Not mentioning that AJAX is FASTER indeed as it doesn’t need to start whole page over and over again and the changes or content requested shows up immediately.

ajax_sharemyweb_item_added

Today I present you and AJAX shopping cart, that comes with a nice functionalities + some extra to make it even better.

The Ajax shopping cart is made of following:  HTML, CSS, jQuery(Ajax), PHP, MySQL, Bootstrap

Let’s start:

First thing is to create a MySQL database, which will store all information about items like: item_id, item_name, image corresponding to specific item and also item category, which will be useful when we would like to display only items from specific category. Firstly, you will need to create a MySQL database, which I have called ‘shoppingCartDemo‘. In Download files(.zip) I have included a shoppingCartDemo.sql file, which  holds of 2 MySQL tables for shopping items and menu items, which are already populated with sample data that you can work with. You can import the file via phpMyAdmin or similar.

Before you import the shoppingCartDemo.sql file, create a shoppingCartDemo database. You can do it with following:

CREATE DATABASE IF NOT EXISTS shoppingCartDemo;

After you have a database in place, you can import shoppingCartDemo.sql

If you’re using phpMyAdmin:

  1. Click the name of newly crated database – > shoppingCartDemo
  2. Click on import to start the import process
  3. Browse for the shoppingCartDemo.sql and import it….. Done!!!!

 

import_SQL_file_phpMYAdmin

 

Both tables I have in my database looks like this:

shopping_items

items_table

 

menuItems

item_menu_table

 

Shopping cart consists of following files:

ajax_shopping_cart_files

All files comes with comments so it will be easy for you to alter them if needed.

I have arranged all above files and folders up to my preference but feel free to change it if you wish.

 

Download

 

dbConf.php

This file includes all MySQL credentials necessary for database connection like: database name, user, password and server. It’s purely up to you, but I always keep those credentials in separate file, which is later included by other file in order to make a database connection.

<?php

/**
 * The base configurations of MySQL settings.
 *  
 *  Database Constraints
 *  If constraints are defined : CONNECT if NOT defined :  DEFINE CONSTANTS
 *
 *  FILL BELOW VALUES : DB_SERVER       localhost OR 127.0.0.1
 *                      DB_NAME         your database name  
 *                      DB_USER         database username
 *                      DB_PASSWORD     database password
*/


/** MySQL Server / hostname .... optionally 127.0.0.1*/
defined("DB_SERVER") ? null : define("DB_SERVER", "localhost");

/** MySQL Database to be Connect to*/
defined("DB_NAME") ? null: define("DB_NAME", "shoppingCartDemo");

/** MySQL database username */
defined("DB_USER") ? null : define ("DB_USER", "Type your db user here...");

/** MySQL database password */
defined("DB_PASSWORD") ? null : define ("DB_PASSWORD", "type your db password here...");

/** Database Charset to use in creating database tables. */
defined('DB_CHARSET') ? null : define('DB_CHARSET', 'utf8');


?>

 

database.php

This is a simple MySQL database Class, that holds of methods that make the database connection, query database for content etc. Nothing difficult at all. I’d rather keep those in separate place so it’s much easier to handle MySQL calls and the code will look much neater.

<?php

/* This file contains methods to connect to DB, search for elements etc.....*/

/* Request MySQL Conf file with credentials */    
require_once("dbConf.php");

class MySQLDatabase
{
    private $connection;
    public $last_query;
     /*Table name*/
    private $dbMenuItems="menuItems";
    public $imageCategories = array('Funny','Facebook','Ofensive','Animals','Sexy');
    
    // Constructor
    function __construct(){
        $this->open_connection();
    }
    
    // Open MySQL Connection
    public function open_connection(){
        try{
            $this->connection = new mysqli(DB_SERVER, DB_USER, DB_PASSWORD, DB_NAME);
        }catch(Exception $except){
            die("Unable to connect to Database");
        }
    }
    
    // Close MySQL Connection
    public function close_connection(){
        if(isset($this->connection)){
            $this->connection->close();
            unset($this->connection);
        }
    }
    
    // Run MySQL Query
    public function query($sql){
        $this->last_query = $sql;
        $result = mysqli_query($this->connection, $sql);
        $this->confirm_query($result); 
        return $result;
    }
    
    // Confirm MySQL Query
    private function confirm_query($result){
        if(!$result){
            $output = "Database query failed: " . mysqli_error($this->connection) . "<br />";
            $output .= "Last MySQL Query: " . $this->last_query;
           die($output);  
        }
    }
   
    // Fetch array and return results
    public function fetch_array($result){
        return mysqli_fetch_array($result);
    }
    
    public function find_by_query($query=""){
        $result = $this->query($query);
        $arrayWithData = array();
        while($row = $this->fetch_array($result)){
            $arrayWithData[]=$row;
        }
        $this->close_connection();
        return $arrayWithData;   
    }
        
        /* Run query, find results, save results to $object_array, return $object_array */
    public function findMenuItem(){
        global $database;
        $result = $database->query("SELECT * FROM ".$this->dbMenuItems." ORDER BY id ASC");
        $object_array = array();
        /* Save results to object array */
        while($row = $database->fetch_array($result)){
            $object_array[]=$row;
        }
        /* Return object array*/
        return $object_array;          
        /* Close MySQL connection */
        $this->close_connection();
    }    
    
    /** Returns upload Categories*/
    public function getFileCategories(){
        $categories = $this->imageCategories;
        return $categories;
    }      
}

// Instantiate class - creates and Instance of the class under the $database var name
$database = new MySQLDatabase();

?>

 

header.php

Holds of… what header usually holds 😀 Apart from including .css file and starting php session, header also includes bootstrap file links and of course jQuery. Without jQuery script all the magic would not happen. header.php will be included by index.php file. I have decided to open a session in the header so it won’t be necessary to open in in all other files, as we’ll be saving shopping items in session variable.

<!DOCTYPE html>

<html>
    
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--    Page Title-->
<title>ShareMyWeb Ajax Shopping Cart : http://www.sharemyweb.com </title>    

<!-- jQuery: Latest minified jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<!-- BOOTSTRAP: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="bootstrap-3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" media="screen"> 
<!-- BOOTSTRAP: Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    
<!-- Main jQuery / AJAX script -->
<script type="text/javascript" src="js/mainJSscript.js"></script>
    
<!--Logo/favicon/icon-->
<link rel="shortcut icon" type="image/x-icon" href="http://sharemyweb.com/wp-content/uploads/2016/01/ShareMyWeb_Favicon.png" />    

<!--Main CSS-->
<link href="style/style.css" rel="stylesheet" type="text/css">

</head>
    
<?php
/* Start session in a header so you don't need to start it on each single page....maybe on some :p*/
if(session_status()==PHP_SESSION_NONE){session_start();}
/* Require / request database file with methods and actions to be performed */
require_once("database.php");    
?>

 

footer.php

Same as header.php above, footer.php will be included by a index.php file. It’s just a sample footer that does nothing in particular.

 

index.php

ajax_sharemyweb_general

 

This file fetches available products from database and lists them. As it includes the header.php, which includes of database.php file, we can use ready methods to get our items:

$items = $database->find_by_query("SELECT * FROM shopping_items");    

Above fetches all from shopping_items  database so we can foreach() through and display it any way we want. On top of the files I have also included some extras so the AJAX shopping application looks a bit nicer: navigation_bar.php contains of navigation menu, that you can see in the screenshot below. Currently it contains only 3 categories(T-shirt, Jumper and Jacket). You can add any categories you want. All you need to do is to go to database table menuItems  and add additional category. navigation_bar.php will automatically detect categories and display them. Also make sure that at least one items category  row form shopping includes the category placed in menuItems as otherwise no items will be displayed. Another extra I have added is a bootstrap carousel/slider -> carousel.php. It gives a nice look to the webpage and can serve for advertising purposes.

When an item is added to the cart the shopping cart bar count is being updated in a real time:

ajax_sharemyweb_item_count_update

Entire file below:

<?php 
    /* Get header */
    require_once("header.php");
?>
<body>
         
    <?php
        /* Get Navigation Bar */
        require_once('navigation_bar.php');
        /* Get Carousel/slider */
        require_once("carousel.php");
    ?>
    
    <div class='shopping_cart_info_holder'>
        <div class="col-xs-12">
            <a href="#" class="shopping_cart_info" title="Shopping cart item total">             
                <i class='glyphicon glyphicon-shopping-cart' style='color:#008cba; font-size:25px;'></i>            
                <span id='items_in_shopping_cart' style='color:#ff5500; font-size:25px;'>
                    <?php 
                        /* If there are items in the basket display total of items, else display 'empty'*/
                        if(isset($_SESSION["items"])){   
                            if(count($_SESSION["items"]) > 0){
                                echo count($_SESSION["items"]);
                            }else{
                                echo "empty";
                            }
                        }else{
                            echo "empty";
                        }
                    ?>
                </span>
            </a>
        </div>
    </div>

    <!-- Holds shopping cart info with selected items -->
    <div class="shopping_cart_holder">
        <a href="#" class="close_shopping_cart_holder" >Close Cart</a>
        <h2>Shopping Cart</h2>
        <div id="shopping_cart_output">
        </div>
    </div>
    
    <!--    Display Item here-->
    <div class="item_display_holder"></div>

    <!-- Display info about cart update in the middle of the screen -->
    <div id='cart_update_info'></div>

    <?php    
        /* FETCH ITEMS ACCORDING TO CATEGORIES CHOSEN BY USER */
        if(isset($_GET['menu'])){
            $menuCategory = $_GET['menu'];        
            /* If you want to display all items click on ShareMyWeb Logo */
            if($menuCategory =="main"){
                $items = $database->find_by_query("SELECT * FROM shopping_items");    
            /* Categories accordingly */
            }else{            
                $items = $database->find_by_query("SELECT * FROM shopping_items WHERE category='{$menuCategory}'");    
            }
        }else{
            $items = $database->find_by_query("SELECT * FROM shopping_items");    
        }
    ?>  
    
    <div class='container' style='padding:10px;'>
    <!--Display Items in the List -->
        <ul class="list_of_items">
            <?php foreach($items as $item) { ?>
                <div class="col-xs-12 col-sm-4">    
                    <li>                                      
                        <form class="item_form">                            
                            <div class='item_disp_img_holder'>                                            
                                <img class="item_disp_image" src="images/<?php echo $item["item_image"]; ?>" item_id="<?php echo $item["item_id"]; ?>" alt="<?php echo $item["item_name"]; ?>">
                                <div class='item_title_holder'>
    <span class='item_disp_title'><?php echo $item["item_name"]; ?></span>
                                </div>
                            </div>                    
                            <div style='width:235px; text-align:center; margin:0 auto;'>
                                <span style='font-size:25px;'><?php echo "£".$item["item_price"]; ?></span>
                            </div>
                            <div class="item_disp_values">
                                <div>Quantity:
                                    <select name="item_qty">
                                        <?php
                                            // Choose itemquantity
                                            $maxQty=5;
                                            for($i=1;$i<=$maxQty;$i++){
                                                echo "<option value='{$i}'>$i</option>";
                                            }
                                        ?>
                                    </select>
                                </div>
                                <div>Size:
                                    <select name="item_size">
                                        <?php 
                                            /* Specify size option in array below */
                                            $options=array("XS","S","M","XL","XXL");
                                            foreach($options as $option){
                                                echo "<option value='{$option}'>$option</option>";
                                            }
                                        ?>
                                    </select>
                                </div>
                                <input name="item_id" type="hidden" value="<?php echo $item["item_id"]; ?>">
                                <button class='add_item_to_cart' type="submit">Add Item</button>
                            </div>
                        </form>
                    </li>
                </div>
            <?php } ?>
        </ul>
    </div>
     <div class="push"></div>
    
<!--  Get footer-->
    <?php
        require_once("footer.php");
    ?>

 

shoppingCartData.php

ajax_sharemyweb_cart_content

 

This file consists of shopping cart. After item is added to the cart, the cart is being updated. All the data in the file is being updated via AJAX call so there’s no need for a page refresh.

When we click on the total item count bar, the data from shoppingCartData.php will be loaded and items display accordingly. I did not go to crazy with shopping cart options so it has the basic functionalities in the form of: update cart in a real time, open and close cart, update item quantity, remove item and go to Checkout.

 

Download

Once the item is added to the cart by clicking on ‘Add item’ button in index.php, the data is being sent via AJAX to shoppingCartData.php, processed there and returned. Simple as that. As we’re dealing with PHP(server site) and JS(client site), we need some alternative to transmit/return the data, which comes in the solution of JSON. Simply speaking JSON returns transmitted data in a PHP format. Sample JSON

exit(json_encode(array('items_in_cart'=>count($_SESSION['items']))));

 

All item added to the shopping cart will be stored in $_SESSION[‘items’] so it’s accessible in other files as well.

All shoppingCartData.php file below:

<?php

/* If session is not started, start session */
if(session_status()==PHP_SESSION_NONE){session_start();}
require_once("database.php");  // request database connection with its objects 

if(isset($_POST["item_id"]) && isset($_POST['item_qty'])){
    /* Get $_POST data and place it in array */
    $added_item["item_id"]=$_POST['item_id'];
    $added_item["item_qty"]=$_POST['item_qty'];
    $added_item["item_size"]=$_POST['item_size'];

    /* Fetch all items from database that matches $_POST['item_id'] 
        Limit 1 at the end so only one item is fetched. */
    $items = $database->find_by_query("SELECT * FROM shopping_items WHERE item_id='{$added_item["item_id"]}' LIMIT 1");
    
    /* Foreach item -> Remaining data about items fetched from database */
    foreach($items as $item){
        $added_item["item_name"] = $item['item_name']; 
        $added_item["item_price"] = $item['item_price'];
        $added_item["item_image"] = $item['item_image'];
        
        /* Update item session array with newly added items - items that already exist in the basket will be overwritten */
        $_SESSION["items"][$added_item['item_id']] = $added_item;        
    }    
    /* Calculate number of items in cart and output it in json format */
    exit(json_encode(array('items_in_cart'=>count($_SESSION['items']))));  
    
}
/* Display aded products in the shopping cart */
if(isset($_POST["load_cart_items"])){

    /* If item session is already set and if there are any items added to the session */
    if(isset($_SESSION["items"]) && count($_SESSION["items"])>0){
    ?>
        <table class='table'> <!--Start table that will holds all data in the shopping cart --> 
        <?php
        $total=0; // define total so the script won't throw silly error of a type 'Undefined variable: total in....'
        
        /* Loop through item session array and display data */        
        foreach($_SESSION["items"] as $item){         
        ?>            
            <tr class='itemInCardRow'>            
                <td class='itemInCartDisplay'>
                    <img class='img-responsive item_disp_image' style='max-width:80px; float:left;' src="images/<?php echo $item["item_image"]; ?>">
                </td>

                <td class='itemInCartDisplay'>
                    <?php echo $item["item_name"] .", size ". $item["item_size"]; ?>            
                </td>

                <td class='itemInCartDisplay'>
                    <a href='#' class='subtruct_itm_qty quantity_change' item_id="<?php echo $item["item_id"]; ?>">-</a>  
                        <?php echo "<span class='quantity'>Qty ".$item["item_qty"]."</span>"; ?>    
                    <a href='#' class='add_itm_qty quantity_change' item_id="<?php echo $item["item_id"]; ?>">+</a>        
                </td>

                <td class='itemInCartDisplay'>
                    <?php echo "£".sprintf("%.2f", ($item["item_price"] * $item["item_qty"])); ?>
                </td>
                <td class='itemInCartDisplay'>
                    <a href="#" class="remove_item_from_cart" item_id="<?php echo $item["item_id"]; ?>">x</a>            
                </td>            
            </tr>
            
        <?php
            /* Calculate Total */
            $total += ($item["item_price"] * $item["item_qty"]);            
            }  // Close foreach loop
        ?>
            <!-- This part displays Checkout button and price total -->
            <tr>                 
                <td class='itemInCartDisplay' colspan='4'>
                    <div>
                        <a href='checkOut.php' title="Review Cart and Check-Out"><button type="button" class="btn checkoutButton">CHECKOUT</button></a>
<!--                        <a class="checkoutButton" href="view_cart.php" CHECKOUT</a>            -->
                    </div>
                </td>                
                 <td class='itemInCartDisplay' style='text-align:right;'>
                    <div class="cart-products-total">                        
                        <span>Total : <span style='font-size:20px; color:#008cba;'></span>
                            <?php
                                // Return a total price with 2 decimals 
                                echo "£".sprintf("%.2f",$total); 
                            ?>
                        </span>
                    </div>
                </td>
            </tr>
        </table>
    
    <?php 
       
    }else{
        /*  Information about empty shopping cart  - exit() function prints a message and exits current script
            Can be used as die() */
        exit("Your have no items in your Shopping Cart");
    }    
}

/* Add item quantity - Allow maximum 5 of each item to be added  */
if(isset($_GET["add_itm_qty"]) && isset($_SESSION["items"])){
    if(isset($_SESSION['items'][$_GET["add_itm_qty"]])){
        if($_SESSION['items'][$_GET["add_itm_qty"]]["item_qty"] <= 4){
            $_SESSION['items'][$_GET["add_itm_qty"]]["item_qty"]+=1;
        }else{
            $_SESSION['items'][$_GET["add_itm_qty"]]["item_qty"]=5;    
        }          
    }        
    unset($_GET["add_itm_qty"]);
    exit(json_encode(array('items_in_cart'=>count($_SESSION['items']),(array('all_items'=>$_SESSION["items"])))));     
}

/* Subtract item quantity - deduct qty ONLY if item_qty is NOT smaller than 0  */
if(isset($_GET["subtruct_itm_qty"]) && isset($_SESSION["items"])){
    if(isset($_SESSION['items'][$_GET["subtruct_itm_qty"]])){
        if($_SESSION['items'][$_GET["subtruct_itm_qty"]]["item_qty"] >= 2){
            $_SESSION['items'][$_GET["subtruct_itm_qty"]]["item_qty"]-=1;    
        }else{
            $_SESSION['items'][$_GET["subtruct_itm_qty"]]["item_qty"]=1;    
        }        
    }
    unset($_GET["subtruct_itm_qty"]);
    /* Get item quantity and output it in json format */
    exit(json_encode((array('item_qty'=>$_SESSION["items"]))));     
}

/* Remove item from shopping cart */
if(isset($_GET["remove_item_from_cart"]) && isset($_SESSION["items"])){
    $item_id = $_GET["remove_item_from_cart"];
    /* Check if item is ina item session array */
    if(isset($_SESSION["items"][$item_id])){
        unset($_SESSION["items"][$item_id]);  // Remove/unset item
    }
    /* Calculate total number of items in cart and output it in json format */
    exit(json_encode(array('items_in_cart'=>count($_SESSION['items']))));    
}

 

js/mainJSscript.php

This is the script that contains of jQuery functions including AJAX requests. Below is the simple AJAX requests. It contains the webpage to which we’re sending the request, request method, data we’re passing, and how we could like the data to be organized.

   /* Action on form submit */
    $(".item_form").submit(function(e){
        var form_data = $(this).serialize();            
        /* AJAX request  - shoppingCartData.php */
        $.ajax({
            url: "shoppingCartData.php",
            type: "POST",
            dataType:"json", 
            data: form_data
        }).done(function(data){ //if AJAX request if succesfull .....
            var totalItemInCart = $("#items_in_shopping_cart").html(data.items_in_cart); // get Json data                   
            var new_item_qty = $("#items_in_shopping_cart").html(data.all_items); // get Json data                   
            /* Empty the update info bar before calling it. Otherwise appended content will duplicate. */
            $('#cart_update_info').empty();
            /* append data/info to cart_update_info bar */
            $("#cart_update_info").append("<div id='new_item_added'><i class='glyphicon glyphicon-ok' style='color:green;'></i> Item added to the cart</div>").fadeIn('fast').delay(2000).fadeOut('fast');
            /* If shopping cart is still open, items will appear on it at the same time of adding them */
            if($(".shopping_cart_holder").css("display") == "block"){ // Check if shopping cart is open 
                $(".shopping_cart_info").click( "click" );  // update cart on event
            }
        })
        e.preventDefault();
    });

This script also contains of functions that update cart in a real time wit data, open and close cart, update item quantity, remove items etc. I have left 1 or 2 functionalities that you can if you feel like(commented out at the bottom of the script). All functions are more less described with some comments, do you won’t be lost 😉

The jQuery/AJAX Script below(mainJSscript.js):

$(document).ready(function(){    
    
    /* Action on form submit */
    $(".item_form").submit(function(e){
        var form_data = $(this).serialize();            
        /* AJAX request  - shoppingCartData.php */
        $.ajax({
            url: "shoppingCartData.php",
            type: "POST",
            dataType:"json", 
            data: form_data
        }).done(function(data){ //if AJAX request if succesfull .....
            var totalItemInCart = $("#items_in_shopping_cart").html(data.items_in_cart); // get Json data                   
            var new_item_qty = $("#items_in_shopping_cart").html(data.all_items); // get Json data                   
            /* Empty the update info bar before calling it. Otherwise appended content will duplicate. */
            $('#cart_update_info').empty();
            /* append data/info to cart_update_info bar */
            $("#cart_update_info").append("<div id='new_item_added'><i class='glyphicon glyphicon-ok' style='color:green;'></i> Item added to the cart</div>").fadeIn('fast').delay(2000).fadeOut('fast');
            /* If shopping cart is still open, items will appear on it at the same time of adding them */
            if($(".shopping_cart_holder").css("display") == "block"){ // Check if shopping cart is open 
                $(".shopping_cart_info").click( "click" );  // update cart on event
            }
        })
        e.preventDefault();
    });
    
    /* Display shopping cart content when clicking on shopping_cart_info bar */
    $(".shopping_cart_info").click(function(e) {
        e.preventDefault();         
        $(".shopping_cart_holder").fadeIn(); // how to cart displays - you can change to any event you wish.
        /* Ajax call for shoppingCartData.php if $_POST['load_cart_items'] */
        $("#shopping_cart_output" ).load( "shoppingCartData.php", {"load_cart_items":"true"});
    });    
    
    /* Close Cart by clicking 'close' button */
    $( ".close_shopping_cart_holder").click(function(e){
        e.preventDefault(); 
        $(".shopping_cart_holder").fadeOut(500); // close cart of fadeOut ... or any event you wish 
    });
    
    //Remove items from cart
    $("#shopping_cart_output").on('click', 'a.remove_item_from_cart', function(e) {
        e.preventDefault(); 
        var item_id = $(this).attr("item_id"); // get item id        
        /* This part make sure tha the removed item disappears from shopping cart and is being removed */
        /* json gets the item_id */
        $.getJSON( "shoppingCartData.php", {"remove_item_from_cart":item_id} , function(data){ //get Item id
            $("#items_in_shopping_cart").html(data.items_in_cart); //update Item count in cart-info bar
            // update shopping cart content
            $(".shopping_cart_info").trigger( "click" ); 
        });
    });  

    /* Change item quantity - ADD */
    $("#shopping_cart_output").on("click", "a.add_itm_qty", function(e){
        e.preventDefault(); 
        var item_id = $(this).attr("item_id");   
        $.getJSON( "shoppingCartData.php", {"add_itm_qty":item_id} , function(data){ 
            // update specific item quantity on event
            $(".shopping_cart_info").click(); 
        });
    }); 

    /* Change item quantity - SUBTRUCT */
     $("#shopping_cart_output").on("click", "a.subtruct_itm_qty", function(e){
        e.preventDefault(); 
        var item_id = $(this).attr("item_id");   
        $.getJSON( "shoppingCartData.php", {"subtruct_itm_qty":item_id} , function(data){ 
            // update specific item quantity on event
            $(".shopping_cart_info").click(); 
        });
    }); 
        
    /* Display image on click */
    $(".item_disp_image").click(function(e){
        e.preventDefault(); 
        var item_id = $(this).attr("item_id");
        $.post('displayItem.php',{item_id: item_id}, function(data) { // send post data to displayItem.php
            var item_display_id = $(".item_display_holder").html(data); // update the data in .item_displa_holder
        });
    }); 
    /* Close image on click */
    $(".item_display_holder").on("click",".close_image", function(e){
        e.preventDefault();
        $("#item_display").hide();
    });    
    
    /* Show image title on item hover */
    $('.item_disp_img_holder').hover( function() {
        $(this).find('.item_disp_title').css("display","block","width","inherit");
    }, function() {
        $(this).find('.item_disp_title').fadeOut(200);
    });
        
    /*   ADDITIONAL OPTIONS YOU COULD USE    */
        
    /* Close Cart when mouse leaves shopping_cart_holder area - ADDITIONAL OPTION */
//    $( ".shopping_cart_holder").on("mouseleave",function(e){ // how to cart closes - you can change to any event you wish.
//        e.preventDefault();            
//        $(".shopping_cart_holder").fadeOut();
//    });    
    
    // Enlarge image on hoover 
//    $('.item_disp_image').hover(function() {
//    $(this).css("cursor", "pointer");  // Shows a pointer type
//    $(this).animate({
//        width: "100%",
//        height: "100%"
//    }, 'fast');

    // Go back to default image size
//    }, function() {
//        $(this).animate({
//            width: "80%"
//        }, 'fast');
//    });
     
});

 

displayItem.php

This checks for image of item being clicked and returns it. After the image is returned we can do anything we want with it. I went simple way and just displayed the image(adding small image enlarge with css). You can take it even further if you want and display item description or create simple gallery…. whatever you wish.

 

ajax_sharemyweb_image_enlarge

 

checkOut.php

Takes you to check-out page, displaying items in the cart and giving two additional options: continue shopping or pay for items.

ajax_sharemyweb_checkout

 

Images

I have included some images in the image/ folder from publicly available source – asos.com, so you don’t need to waste time to put your own images.

 

That’s all. Now, download the AJAX cart application and play with it and change it as much as you wish. If you have any questions or ideas, don’t hesitate let me know. Thx

 

Download

Share Button