ECommerce Menu Design with JSON Data.
Wall Script
Follow Me:
Wednesday, July 11, 2012

ECommerce Menu Design with JSON Data.

Now the right time to build an online selling portal, people started believing online shopping for buying things. This tutorial helps you to to speed up the most important product category navigation menu system for your ecommerce projects. I had implemented Amazon style menu with category image using PHP, MYSQL andj JQuery.

Menu Design with JSON Data.

Download Script     Live Demo

Database
Sample database categories table contains four columns cat_id, name, paren and media.
CREATE TABLE `categories`
(
`cat_id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(150) ,
`parent` int(11) ,
`media` varchar(100),
PRIMARY KEY (`cat_id`)
);

Category and Subcategory data stores like this format.
Category table design

categories.php
Contains PHP code generating JSON data out from categories table.
<?php
include('db.php');
$sql = mysqli_query($db,"select cat_id,name,media from categories where parent=0");
// parent categories node
$categories = array("Categories" => array());

while ($row = mysqli_fetch_array($sql,MYSQLI_ASSOC))
{
$cat_id = $row['cat_id'];
$ssql = mysqli_query($db,"select cat_id,name,media from categories where parent='$cat_id'");

// single category node
$category = array(); // temp array
$category["cat_id"] = $row["cat_id"];
$category["name"] = $row["name"];
$category["media"] = $row["media"];
$category["sub_categories"] = array(); // subcategories again an array

while ($srow = mysqli_fetch_array($ssql,MYSQLI_ASSOC))
{
$subcat = array(); // temp array
$subcat["cat_id"] = $srow['cat_id'];
$subcat["name"] = $srow['name'];
// pushing sub category into subcategories node
array_push($category["sub_categories"], $subcat);
}

// pushing sinlge category into parent
array_push($categories["Categories"], $category);
}
echo ((isset($_GET['callback'])) ? $_GET['callback'] : "") . '(' . json_encode($categories) . ')';
?>

JSON Output
Category table design

JavaScript & HTML
Now the most important part, reading the above JSON data using $.getJSON method and appending category data into UL #menu_ul. Subcategory data storing into hidden UL class hideul
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{

$.getJSON("categories.php?callback=?", function(data)
{
$.each(data.Categories, function(i, category)
{
var subjsondata='';
$.each(category.sub_categories, function(i, sub_categories)
{
subjsondata += "<li>"+sub_categories.name+"</li>";
});
var jsondata ="<li class="category" id=''"+category.cat_id+"'>"+category.name+"<ul class="hideul" id='hide"+category.cat_id+"' media='"+category.media+"'>"+subjsondata+"</ul>
</li>";
$(jsondata).appendTo("#menu_ul");
});
}
);

//MouseOver on Categories
$(".category").live('mouseover',function(event)
{
$("#menu_slider").show();
var D=$(this).html();
var id=$(this).attr('id');
var V=$("#hide"+id).html();
var M=$("#hide"+id).attr("media");
$("#submenu_ul").html(V);
$("#menu_slider h3").html(D);
//Background Image Check
if(M!='null')
{
$("#menu_slider").css({"width": "450px"});
}
else
{
$("#menu_slider").css({"width": "250px"});
}
$("#menu_slider").css('background', 'url(backgrounds/' + M + ') #ffffff no-repeat right bottom');
});

//Document Click
$(document).mouseup(function()
{
$("#menu_slider").hide();
});

//Mouse click on sub menu
$("#menu_slider").mouseup(function(){ return false });

//Mouse click on my account link
$("#menu_box").mouseup(function(){ return false });
});
</script>
$(".category").live('mouseover',function(event){}- category is the class name of category li tag. Using element.attr("id") calling category li value, based on the ID moving class .hideul subcategory values into $("#submenu_ul").html(V)

HTML Code
//HTML Code
<div id='menu_box' class='shadow'>
<ul id='menu_ul'></ul>
</div>
<div id='menu_slider'>
<h3></h3>
<ul id='submenu_ul'></ul>
</div>

db.php
Database configuration file, modify username, password and database values.
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>

CSS
#menu_box
{
border-top:solid 3px #333;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
min-height:400px;width:200px;
background-color:#fff;
margin-left:20px;
float:left;
position:relative;
z-index:300
}
#menu_slider
{
border-top:solid 3px #333;
border-left:solid 1px #dedede;
border-right:solid 1px #dedede;
border-bottom:solid 1px #dedede;
min-height:370px;background-color:#fff;margin-left:220px;
position:absolute;
width:250px;
position:relative;
z-index:200;
display:none;
padding:15px
}
.hideul{display:none}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


48 comments:

  1. how to include breadcrumbs for this jsonmenu..

    ReplyDelete
  2. hi..im chethan,intermediate in php.i want achive creating thumbnails from video uploading in php.plz can u tel me how to achive this..i asked you so many times..i didnt get any reply.. i checked in google,but i didnt found exact soloution.can plz tel me

    ReplyDelete
  3. @ Chethan Kumar said...
    http://stackoverflow.com/questions/2264840/thumbnail-of-video-in-php-while-uploading
    http://drupal.org/node/358221

    ReplyDelete
  4. Hi chethan kumar
    check this link to create thumbnails.
    Its my blog :)
    http://hacksandtrickz.blogspot.in/2011/09/script-for-image-resizing-image.html

    ReplyDelete
  5. @chetan: you can use ffmpeg to create auto thumbnails when upload video

    @srivinas: nice tutz like usually :)

    ReplyDelete
  6. Awesome. Good Work.I seen similar menus in many shopping sites

    ReplyDelete
  7. good example for ecommerce..can you tell me is it applicable to OsCommerce.

    ReplyDelete
  8. Thanks for this interesting tutorial...

    ReplyDelete
  9. hoooooooooooooooooooohaaa.. really nice example dude

    ReplyDelete
  10. great work... ;) thank you

    ReplyDelete
  11. Hi Chethan,
    You have to use ffmpeg to achieve this.

    ReplyDelete
  12. @chetan you can do it by using ffmpeg tool.
    You can get complete info about the video and you can limit the video duration in the output and also you can embeed a watermark of ur website using that tool.

    ReplyDelete
  13. thanks, is great !

    ReplyDelete
  14. Super.!! Thanks man, +10 points :)

    ReplyDelete
  15. Awesome,can we add loading part so we dont see the image as it loads?

    ReplyDelete
  16. How return string with breakline in JSON???

    ReplyDelete
  17. very nice post..... like the way you explain everything...

    ReplyDelete
  18. Wow, very good tutorial, I like!

    ReplyDelete
  19. Nice tutorial, but why do you use an ajax call to fill your menu ? Is'nt it better to fill menu with PHP than JS?

    ReplyDelete
  20. I think this is very bad for accessibility.
    Disable JavaScript in your browser and go see the demo again and see the horrible result.
    This is also very bad for SEO.
    @Srinivas Tamada I think you should do the same tutorial with a menu in the database with CSS and HTML but not Javascript and Ajax

    ReplyDelete
  21. It's not enough that you have a track record of success in ecommerce. This role requires that you know quite a bit about online and off-line retail strategy and strategic planning. You can't just wing it: An Amazon search for books on “strategic

    ReplyDelete
  22. Cool post. Would you mind elaborating a little on each step?

    ReplyDelete
  23. Excellent post, thanks for all your efforts.

    ReplyDelete
  24. Is there any way to make the menu close when not in use other than having to click outside the menu

    ReplyDelete
  25. postingan yang bagus tentang"ECommerce Menu Design with JSON Data"

    ReplyDelete
  26. Nicely rendered menu srinivas, looking for more posts like this. Keep up good work.

    ReplyDelete
  27. Really interesting post, thanks for sharing.......:-)

    ReplyDelete
  28. Please... editor
    desmotivaciones.es ....
    PLEASE , watermark! please please please!
    develope it!

    ReplyDelete
  29. Thanks for that article, please look forward to publish more of such useful posts.
    Covering popular techniques with articles like that is always appreciated :-)

    ReplyDelete
  30. very nice...please can u help me with the search php script. i mean when u select from category and enter the product name in the search form the corresponding products should be visible from mysql database
    girijeshc@ymail.com

    ReplyDelete
  31. can you help me in creating top drop down menu using the same code

    ReplyDelete
  32. Can you please tell me how to add link?
    Thank You

    ReplyDelete
  33. Hello,

    Good tutorial,

    Please can you tell me how to add link.

    Thanks

    ReplyDelete
  34. Is it possible to add this on Cs-Cart 3?

    ReplyDelete
  35. Thanks shrinivas
    I Have Requested Many Times For This Tutorial Thank You So Much

    ReplyDelete
  36. Hi Shrinivas, thanks a lot for this tutorial bcoz i've been searching for something like this from a very long time!!!!
    I also have one question, can this menu be created using ASP.NET instead of PHP and how should i go forward with it????
    Anyhelp would be appreciated!!!

    ReplyDelete
  37. NIce ...

    Can u pls give the method for jsp json mysql...

    ReplyDelete
  38. Very Nice and Good example.I want solutions to display data from json files with out using db . What are the methods we are having to display on HTML page .
    I will be really thankful to have your answer for this! :)

    ReplyDelete
  39. Please add the program event on

    //Mouse click on sub menu
    $("#menu_slider").mouseup(function() {
    return false
    });

    //Mouse click on my account link
    $("#menu_box").mouseup(function() {
    return false
    });

    ReplyDelete

Make in India