Shah Z
Building dreams on the Internet Highway
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
-
Pretty simple if you ask me..If you want to assign the same class to every list item, change these lines:
$output .= ‘< li >‘;
to:
$output .= ‘< li class="the-class-name" >‘;and if you want to assign dynamic classes to each of the list items, since each category has its own id, and since we are calling out each id using the $new_path variable, you can integrate the $new_path variable within the $output variable..
Hope that helps :)
-
#3 written by Patrick (2 years ago)
Oh thank you. But I only want to output the class “active” for that li-element which belongs to the current page/category.
For example: If I have a category called “shoes”, I just want to add the class (to that particular li which contents the link to cat. “shoes”) if a page of that category (or subcat.) is displayed.
Goal is to highlight the current/active category in the list-menue.
-
#4 written by Patrick (2 years ago)
Haha, I found the answer here: http://craigmurray.me.uk/opencart-mods/how-to-highlight-the-current-category-in-the-header-in-opencart/
Sorry, but thanks! ;)
-
-
-
#10 written by Tone (2 years ago)
-
-
#16 written by vishu (1 year ago)
sijo thomas:
i’m also getting this Error: Could not load model tool/seo_url!
I’m using Open Cart v1.5.0.5….Any help will be appreciatedwhen i put this code in header.tpl i’m getting this Error: Could not load model tool/seo_url!
I’m using Open Cart v1.5.0.5….Any help will be appreciated…. -
#18 written by Allen Conquest (1 year ago)
Ok, I got it working using a few modification. It’s not doing the SEO rewrites, I’m not sure how to do that at the moment:
//$this->load->model(‘tool/seo_url’);
$this->load->model(‘catalog/category’);$results = $this->model_catalog_category->getCategories(0);
if($results)
{
$output = ”;
}$output .= ‘Home‘;
$counter = 0;
foreach ($results as $result)
{
// HTML
$output .= ”;// Grab the specific category, reset each loop
$new_path = $result['category_id'];// Prepare the URL
$unrewritten = HTTP_SERVER.’index.php?route=product/category&path=’ . $new_path;// Pass it to the SEO URL tool
// $rewritten = $this->model_tool_seo_url->rewrite($unrewritten);// Output the path and category name
$output .= ‘‘ . $result['name'] . ‘‘;$counter++;
// Next level deep with the current category as the parameter.
// Children of
$sub_results = $this->model_catalog_category->getCategories($new_path);// If there are subs
if ($sub_results)
{
// HTML
$output .= ”;
}foreach ($sub_results as $sub_result)
{
// HTML
$output .= ”;// Allocate the new sub category
$new_sub_path = $sub_result['category_id'];// Get the raw URL and prepare it
$sub_unrewritten = $unrewritten.’_’. $new_sub_path;// Rewrite it
// $sub_rewritten = $this->model_tool_seo_url->rewrite($sub_unrewritten);// Output as usual
$output .= ‘‘ . $sub_result['name'] . ‘‘;// Grab the specific category, reset each loop
$new_sub_path = $sub_result['category_id'];// Next level deep with the current category as the parameter.
// Children of
$sub_sub_results = $this->model_catalog_category->getCategories($new_sub_path);// If there are subs
if ($sub_sub_results)
{
// HTML
$output .= ”;
}
else
{
$output .= ”;
}$counter2 = 0;
foreach ($sub_sub_results as $sub_sub_result)
{
// HTML
$output .= ”;// Allocate the new sub category
$new_sub_sub_path = $sub_sub_result['category_id'];// Get the raw URL and prepare it
$sub_sub_unrewritten = $unrewritten.’_’. $new_sub_path.’_’.$new_sub_sub_path;// Rewrite it
// $sub_rewritten = $this->model_tool_seo_url->rewrite($sub_unrewritten);// Rewrite it
// $sub_sub_rewritten = $this->model_tool_seo_url->rewrite($sub_sub_unrewritten);// Output as usual
$output .= ‘‘ . $sub_sub_result['name'] . ‘‘;
$output .= ”;
$counter2++;
}if ($sub_sub_results)
{
// Close off children UL
$output .= ”;
}
$output .= ”;
}if ($sub_results)
{
// Close off children UL
$output .= ”;
}}
if ($results)
{
// Close parent UL
$output .= ”;
}echo $output;
-
#22 written by Martin Vondracek (1 year ago)
-
-
-
#29 written by tarang (1 year ago)
Hi Shahz,
Thanks for replying. Like Wayne above, i also want it on my website and my product upload is pending due to this change..
I have searched opencart forums and php forums..even posted a request to Craig Murray, but m not getting any help :(
Really looking forward for your help…
Thanks in advance..!! -
- Comment Feed for this Post
Thanks! I really like your code but would like to add a feature:
I’d like to assign a class to that li-tag which is active.
Like:
Could you help me out?
Best, Patrick