OpenCart header navigation (three level list)

Recently, I had a bite of Open Cart to build a new website for a client. Its still in development, but the outcome seems promising. I have to say, as much as I had heard about Open Cart, it really is a great piece of web application. My journey with shopping carts have been restless. I have had tough times with OSCommerce, played enough with ZenCart, dealt with the terrible NiagaKit, and even adventured on my favorite enterprise level Magento. While Magento is still the best for me, Open Cart is just the next one for me. Reason why Open Cart is behind Magento is only because of the number of features that it has. For my carts that need enterprise love, I use Magento for them. For all others, Open Cart is my choice now.

So, I was modding a custom made theme for a client who will be selling products on his very own Open Cart. I realized that it did not have header navigation. Actually, it did not have category list tables. The current category.tpl template file calls the categories available for the viewed page only. While Open Cart will be implementing listed categories in the next version, my client couldn’t wait. So I had to do what I had to do.

Google! Thats where I found Craig Murrays neat category list code. The code works, but apparently he limited it to two level navigation only. The parent and a child. I think for a shopping cart, the maximum navigation levels should be three rather than two. In my clients case who was selling hijabs, she needed three level navigation. eg: hijab -> the type of hijab -> the material. So I took Craig’s code and modified it into a three-level navigation. The generated list item will look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul>
   <li>First Level</li>
   <li>First Level
      <ul>
         <li>Second Level</li>
         <li>Second Level
            <ul>
               <li>Third Level</li>
               <li>Third Level</li>
            </ul>
         </li>
         <li>Second Level</li>
       </ul>
   </li>
   <li>First Level</li>
</ul>

Once you have this list, you can give it some CSS touch and use Superfish or most other jQuery scripts to add the animation effect for added functionality. Now here is the PHP code to generate this list (along with descriptions on what each line does):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php 
 
$this->load->model('tool/seo_url');
 
$results = $this->model_catalog_category->getCategories();  									// get the categories
 
if ($results) {$output = '<ul class="you-can-define-a-class-here-for-your-javascripts">';}  									// if there are categories available, start off with the unordered list tag
 
foreach ($results as $result) {																	// for each result
	$output .= '<li>';																			// put a list item tag
	$new_path = $result['category_id'];															// get the id of this category
	$unrewritten = HTTP_SERVER.'index.php?route=product/category&path=' . $new_path;			// if the seo url is disabled, this will be the path
	$rewritten = $this->model_tool_seo_url->rewrite($unrewritten);								// otherwise, it will be this one
	$output .= '<a href="' . $rewritten . '">' . $result['name'] . '</a>';						// finally, generate the category name and wrap its link
 
	$sub_results = $this->model_catalog_category->getCategories($new_path);						// if this result has a sub-list, get the set of new categories
 
	if ($sub_results) {$output .= '<ul>';}														// if this is a subresult, start off with an unordered list tag
 
	foreach ($sub_results as $sub_result) {														// for each of this subresult item
		$output .= '<li>';																		// put a list item tag
		$new_sub_path = $sub_result['category_id'];												// get its category
		$sub_unrewritten = $unrewritten.'_'. $new_sub_path;										// if the seo is disabled, this will be the path
		$sub_rewritten = $this->model_tool_seo_url->rewrite($sub_unrewritten);					// otherwise, it will be this one
		$output .= '<a href="' . $sub_rewritten . '">' . $sub_result['name'] . '</a>';			// now, generate the category name and wrap its link
 
		$third_sub_results = $this->model_catalog_category->getCategories($new_sub_path);		// if this result has a sub-list, get the set of new categories
 
		if ($third_sub_results) {$output .= '<ul>';}											// if this is a subresult, start off with an unordered list tag
 
		foreach ($third_sub_results as $third_sub_result) {										// for each of this third level item
			$output .= '<li>';																	// give it an opening list tag
			$third_sub_path = $third_sub_result['category_id'];									// get its category
			$third_sub_unrewritten = $sub_unrewritten.'_'.$third_sub_path;						// if seo is disabled, this is the path
			$third_sub_rewritten = $this->model_tool_seo_url->rewrite($third_sub_unrewritten);	// if its enabled, this will be the path
			$output .= '<a href="'.$third_sub_rewritten.'">'.$third_sub_result['name'].'</a>';	// call the category name and wrap with its link
			$output .= '</li>';																	// now close this list item
		}
 
		if ($third_sub_results) {$output .= '</ul>';}											// if this was the third list, clost the list
			$output .= '</li>';																	// then or otherwise, close the second level list tag
	}
	if ($sub_results) {$output .= '</ul>';}														// if all sub results have been listed, close the second level
		$output .= '</li>';																		// then or otherwise close first list parent
}
if ($results) {$output .= '</ul>';}																// then close the first level list table
echo $output; 																					// now produce the results
?>

I hope that helps for some of you guys looking forward to add this to your Open Carts. Open Source..ftw!

Shahz

Tags: , , , , , , , , ,