Blogs Hub

by AskGif | Aug 26, 2019 | Category :coding

Implementing ECommerce Menu Design Using JSON Data.

Implementing ECommerce Menu Design Using JSON Data.

<p>Now the right time to build an online selling portal, people started believing online shopping for buying things. This tutorial helps you to speed up the most important product category navigation menu system for your e-commerce projects. I had implemented the Amazon-style menu with category image using PHP, MYSQL and JQuery.</p> <p>&nbsp;</p> <p>Database</p> <p>Sample database categories table contains four columns cat_id, name, paren and media.</p> <pre class="language-javascript"><code>CREATE TABLE `categories` ( `cat_id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(150) , `parent` int(11) , `media` varchar(100), PRIMARY KEY (`cat_id`) );</code></pre> <p>&nbsp;</p> <p>categories.php</p> <p>Contains PHP code generating JSON data out from categories table.&nbsp;</p> <pre class="language-javascript"><code>&lt;?php include('db.php'); $sql = mysqli_query($db,"select cat_id,name,media from categories where parent=0"); // parent categories node $categories = array("Categories" =&gt; 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) . ')'; ?&gt;</code></pre> <p>&nbsp;</p> <p>JavaScript &amp; HTML</p> <p>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</p> <pre class="language-javascript"><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" &gt; $(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 += "&lt;li&gt;"+sub_categories.name+"&lt;/li&gt;"; }); var jsondata ="&lt;li class="category" id=''"+category.cat_id+"'&gt;"+category.name+"&lt;ul class="hideul" id='hide"+category.cat_id+"' media='"+category.media+"'&gt;"+subjsondata+"&lt;/ul&gt; &lt;/li&gt;"; $(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 }); }); &lt;/script&gt;</code></pre> <p>$(".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)&nbsp;</p> <p>&nbsp;</p> <p>HTML Code</p> <pre class="language-markup"><code>//HTML Code &lt;div id='menu_box' class='shadow'&gt; &lt;ul id='menu_ul'&gt;&lt;/ul&gt; &lt;/div&gt; &lt;div id='menu_slider'&gt; &lt;h3&gt;&lt;/h3&gt; &lt;ul id='submenu_ul'&gt;&lt;/ul&gt; &lt;/div&gt;</code></pre> <p>&nbsp;</p> <p>db.php</p> <p>The database configuration file, modify username, password and database values.&nbsp;</p> <pre class="language-javascript"><code>&lt;?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); ?&gt;</code></pre> <p>&nbsp;</p> <p>CSS</p> <pre class="language-css"><code>#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}</code></pre>

read more...