+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] Amazon like Product Category Tree (/thread-100005.html)
[Tut] Amazon like Product Category Tree - xSicKxBot - 09-30-2022
Amazon like Product Category Tree
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/09/amazon-like-product-category-tree.jpg" width="550" height="776" title="" alt="" /></div><div><div class="modified-on" readability="7.1666666666667"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on September 29th, 2022.</div>
<p>This PHP script will help if you want to display an Amazon-like product category tree. It will be useful for displaying the category menu in a hierarchical order, just like a tree.</p>
<p>The specialty of this PHP code is that it builds <strong>a multi-level category tree with infinite depth</strong>. It uses the recursion method to obtain this.</p>
<p>In a previous tutorial, we have to see a <a href="https://phppot.com/css/multilevel-dropdown-menu-with-pure-css/">multi-level dropdown menu</a> with a fixed depth.</p>
<p>Let’s look into the upcoming sections to see how the code is built to display the category tree in a page.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-19606" src="https://phppot.com/wp-content/uploads/2022/09/category-tree-550x776.jpg" alt="category tree" width="550" height="776" srcset="https://phppot.com/wp-content/uploads/2022/09/category-tree-550x776.jpg 550w, https://phppot.com/wp-content/uploads/2022/09/category-tree-213x300.jpg 213w, https://phppot.com/wp-content/uploads/2022/09/category-tree-768x1083.jpg 768w, https://phppot.com/wp-content/uploads/2022/09/category-tree.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>Category Database</h2>
<p>This script contains the category database with data. The insert query creates category records which are mapped with its parent appropriately.</p>
<p>The category records containing <em>parent=0</em> are known as the main category. Each record has the sort order to set the display priority on the UI.</p>
<p class="code-heading">structure.sql</p>
<pre class="prettyprint"><code class="language-sql">CREATE TABLE `category` ( `id` int(10) UNSIGNED NOT NULL, `category_name` varchar(50) COLLATE utf8mb4_unicode_ci NOT NULL, `parent` int(10) UNSIGNED NOT NULL DEFAULT 0, `sort_order` int(11) NOT NULL DEFAULT 0
); --
-- Dumping data for table `category`
-- INSERT INTO `category` (`id`, `category_name`, `parent`, `sort_order`) VALUES
(1, 'Features', 0, 0),
(2, 'Domain', 0, 1),
(3, 'Digital', 0, 2),
(4, 'Gift cards', 1, 0),
(5, 'International', 1, 1),
(6, 'Popular', 1, 2),
(7, 'e-Gift cards', 4, 0),
(8, 'Business gift cards', 4, 1),
(9, 'In offer', 5, 0),
(10, 'Shipping', 5, 1),
(11, 'Celebrity favourites', 6, 0),
(12, 'Current year hits', 6, 1),
(13, 'Electronics', 2, 0),
(14, 'Arts', 2, 1),
(15, 'Gadgets', 2, 2),
(16, 'Camera', 13, 0),
(17, 'Car electronic accessories', 13, 1),
(18, 'GPS', 13, 2),
(19, 'Handcrafted', 14, 0),
(20, 'Gold enameled', 14, 1),
(21, 'Jewelry', 14, 2),
(22, 'Fabric', 19, 0),
(23, 'Needle work', 19, 1),
(24, 'PSP', 15, 0),
(25, 'Smart phones', 15, 1),
(26, 'Apps', 3, 0),
(27, 'Music', 3, 1),
(28, 'Movies', 3, 2),
(29, 'Dev apps', 26, 0),
(30, 'App Hardwares', 26, 1),
(31, 'Podcasts', 27, 0),
(32, 'Live', 27, 1),
(33, 'Recently viewed', 28, 0),
(34, 'You may like', 28, 1),
(35, 'Blockbusters', 28, 2); --
-- Indexes for dumped tables
-- --
-- Indexes for table `category`
--
ALTER TABLE `category` ADD PRIMARY KEY (`id`); --
-- AUTO_INCREMENT for dumped tables
-- --
-- AUTO_INCREMENT for table `category`
--
ALTER TABLE `category` MODIFY `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=36;
</code></pre>
<h2>Category menu rendering in HTML</h2>
<p>This is an initiator that calls the PHP recursive parsing to get the Category Tree HTML. In the <a href="https://phppot.com/php/php-create-zip-ziparchive-files-download/">PHP ZipArchive post</a>, we used the same recursion concept to compress the contents of the enclosed directories.</p>
<p>Also, it has a UI holder to render the HTML hierarchical category menu.</p>
<p>A PHP class CategoryTree is created to read and parse the category array from the database.</p>
<p class="code-heading">index.php</p>
<pre class="prettyprint"><code class="language-php-template"><!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<?php
require_once __DIR__ . '/CategoryTree.php';
$categoryTree = new CategoryTree();
$categoryResult = $categoryTree->getCategoryResult();
?>
<h1>Choose category</h1> <div class="category-menu">
<?php
echo $categoryTree->getCategoryTreeHTML($categoryResult);
?>
</div>
</body>
</html>
</code></pre>
<p>This styles gives the category tree a pleasing look. Since it displays an infinite level of child categories, this CSS will help to rectify the default UI constraints.</p>
<pre class="prettyprint"><code class="language-css">body { font-family: Arial; margin-left: 10px; margin-right: 20px;
} ul.category-container li { list-style: none; padding-left: 10px; width: 100%;
} .category-container a { text-decoration: none; color: #000;
} .parent-depth-0 { font-size: 22px; font-weight: bold; border-bottom: #ccc 1px solid; padding: 15px 0px 15px 0px;
} .parent-depth-all { font-size: 16px; padding-top: 15px; font-weight: normal;
} .no-child { font-size: 16px; font-weight: normal; padding: 15px 0px 0px 0px;
} .category-menu { width: 270px; overflow-y: scroll; max-height: 800px; background: #fffcf2; padding: 0px;
} ul.category-container { padding: 10px;
}
</code></pre>
<h2>Read category data and build in tree format</h2>
<p>This is the main PHP class that reads the dynamic categories from the database.</p>
<p>The <code class="language-php">getCategoryTreeHTML</code> the function parses the category result array. It recursively calls and parses the levels of category by its parent.</p>
<p>In WordPress, there is a category walker to parse the terms and taxonomies. We have created a <a href="https://phppot.com/wordpress/wordpress-custom-walker/">custom WordPress walker</a> to parse categories efficiently.</p>
<p>It sets the argument parent=0 to build parent-level category menu items.</p>
<p>The resultant category tree HTML will be a nested UL-LI list to show the multi-level menu.</p>
<p class="code-heading">CategoryTree.php</p>
<pre class="prettyprint"><code class="language-php"><?php class CategoryTree
{ private $connection; function __construct() { $this->connection = mysqli_connect('localhost', 'root', '', 'db_category_tree'); } function getCategoryTreeHTML($category, $parent = 0) { $html = ""; if (isset($category['parentId'][$parent])) { $html .= "<ul class='category-container'>\n"; foreach ($category['parentId'][$parent] as $cat_id) { if (! isset($category['parentId'][$cat_id])) { $child = ""; if ($category['categoryResult'][$cat_id]['parent'] != 0) { $child = "no-child"; } $html .= "<li class= '$child " . "parent-" . $category['categoryResult'][$cat_id]['parent'] . "' >\n" . $category['categoryResult'][$cat_id]['category_name'] . "</li> \n"; } if (isset($category['parentId'][$cat_id])) { $parentDepth0 = "parent-depth-all"; if ($category['categoryResult'][$cat_id]['parent'] == 0) { $parentDepth0 = "parent-depth-0"; } $html .= "<li class= '$parentDepth0 " . 'parent-' . $category['categoryResult'][$cat_id]['parent'] . "'>\n " . $category['categoryResult'][$cat_id]['category_name'] . " \n"; $html .= $this->getCategoryTreeHTML($category, $cat_id); $html .= "</li> \n"; } } $html .= "</ul> \n"; } return $html; } function getCategoryResult() { $query = "SELECT * FROM category ORDER BY parent, sort_order"; $result = mysqli_query($this->connection, $query); $category = array(); while ($row = mysqli_fetch_assoc($result)) { $category['categoryResult'][$row['id']] = $row; $category['parentId'][$row['parent']][] = $row['id']; } return $category; }
}
?>
</code></pre>
<h2>Where category tree code can be used?</h2>
<p>The category tree is used in many places. For example, most <strong>shopping cart websites</strong> have a category filter or menu to classify the showcase products.</p>
<p>The Amazon shop’s category menu ads value to the end user to narrow down the vast area to find their area of interest.</p>
<p>Also, <strong>tutorial websites</strong> display the table of contents in the form of a tree order.</p>
<p><a class="download" href="https://phppot.com/downloads/php/category-tree.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/php/amazon-like-product-category-tree/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/09/29/amazon-like-product-category-tree/