Show Only Subcategories on Sidebar v1.5.1.3 [SOLVED]

I believe I understand now.

I have now updated the topic: http://forum.opencart.com/viewtopic.php ... 87#p231887

You may also restore the category.tpl file from the template's module since it is no longer needed to edit in this case.

Oh my goodness...i am so happy! We are almost there.

As i click down the Horizontal Menu, the rest of the Main Categories appear in the side bar.

When i clicked the First Category, it appeared alone on the side bar.

When i clicked the Second Category, it appeared second to the First Category on the sidebar. (kind of like a building order.)

(...)

When i got to the last Horizontal Menu Category, all of the categories appeared on the side bar.

Is there a way to only have One category appear on the sidebar when clicked on the horizonal menu bar?

Thank you for all your help thus far...it is greatly appreciated.

Instructions re-updated. Try again.

I had to re-update because I forgot to remove the counters. Sorry.

Not working for me. I remplace the code in the php and mantain the same in .tpl file and show me the category active only this one without any subcategory. And I want to show all the subcategories of the active category without the name of this category.

Hello

I have followed through this post because I would like to accomplish the same thing as Opencartnewbie2011. When customer clicks on horizontal menu, I would like only the sub-categories of a main category to be displayed in a vertical menu in the left side bar for the specific main category choice. If they choose another category from the horizontal main menu bar the corresponding sub-catagory(s) would appear in the vertical side bar menu and nothing else (Including the Category heading would be ok but not necessary)

I read the entire thread to the end before trying anything and it seemed that only one change was necessary. On page 2 of the thread it says corrections were reposted to accomodate small glitsches. I assumed the post on the second page which had a link referring to coding on the first page of the thread was the final "solved" coding to (catalog/controller/module/category.php file) and nothing else was to be changed on any other php or tpl files.

I made this change to coding and experienced the same problem as opencartnewbie wherein the main catagory headings showed up one by one on the sidebar menu as you clicked them on the horizontal menu bar but no sub-categories were displayed at all. Did I misinterpret the comments in the final posts of the thread and miss something and require updating another file?

If it is of any assistance, I am using the lastest opencart v1.5.1.3 along with the "Ecart" template which is great because no core files are modified so I am able to upgrade Opencart with no hiccups to my theme. The "solve" posted here changes what I am assuming is a core file so will I have to modify this file each time whenever there is a future OC update?

If I could get any assistance with this it would be greatly appreciated. I am very close to go live with my website and this is one of the last stumbling blocks I have.

Susan

Hi all,

Like ELDecors, I'm wanting this exact functionality as well. If anyone can provide guidance it would be greatly appreciated!

John

Hi everyone

I have figured out how to do this in a very uncomplicated way (I think...I only learned coding in the last 1.5 months so I am a big Newb). I will go back to my templates and do a step by step for everyone and try to post in next day or so. I am still working on my website on my computer setup as a local host so I can't show a live version except on skype. I know that because I showed my son who is away at university and I was so excited to show him my accomplishment.

Susan

I have created this tutorial to help others like myself who are looking for an uncomplicated straight forward way to remove all the menu clutter from the default or template versions of Opencart from a beginners viewpoint

I knew absolutely nothing about coding or being able to decipher templates but decided to take on the challenge of customizing my website. The internet is a wonderful thing. I have taught myself quite a bit through fantastic learning websites, youtube and a lot experimentation (the refresh button on my keyboard is almost worn out...LOL) and dumb luck.

Currently, I am using version 1.5.1.3 of opencart, the latest version of VQmod 2.2 and the ECART template by Sokepedian. The one thing that was extremely important to me was "NOT" to change any core files. The ECART template I purchased accomplished this goal and was it's own complete stand alone template. From there I choose vQmods that would behave in the same manner so that upgrading my Opencart would never become an issue or conflict with my template or any of my modifications (at least that's the plan...LOL).

My objective was to create a menu system so that when you choose a category it would display only the subcategories for that choice in a list within the content container. This would continue the same for all child categories. I scoured the opencart forums and found a few threads but none were successful in accomplishing the task as I visioned it and believe me I tried all of them. The following are the steps I took to achieve my menu modifications.

My first step was to utilize the "Refine Search" menu and turn the listing from a horizontal presentation into a vertical menu which I could then place in the left side column. The extension below is assuming that you have a standalone template like ECART that doesn't change core files. I am going to use my file paths so you will need to adjust to your own accordingly. Within my directory, I had the following 2 options:

1. ..\catalog\view\theme\default\template\product\catagory.tpl (this is the opencart default template)
2. ..\catalog\view\theme\Ecart\template\product\catagory.tpl (this is the Ecart template I purchased)

From my Ecart theme (option #2) I made a copy of the category.tpl file and name it category2.tpl in the same directory. Once you have determined which category.tpl file "you" will be using and making a copy of, open category2.tpl in your editor.

I modified the template code primarily in the <div id="content"> section of my tpl file my original category.tpl which originally looked like this:

1 <?php echo $header; ?>
2
3 <div class="breadcrumb">
4 <?php foreach ($breadcrumbs as $breadcrumb) { ?>
5 <ul>
6 <li>
7 <a href="<?php echo $breadcrumb['href']; ?>">
8 <?php echo $breadcrumb['text']; ?></a>
9 </li>
10 </ul>
11 <?php } ?>
12 </div>
13
14 <?php echo $column_left; ?>
15 <?php echo $column_right; ?>
16
17 <div id="content">
18 <?php echo $content_top; ?>
19 <h1><?php echo $heading_title; ?></h1>
20
21 <?php if ($thumb || $description) { ?>
22 <div class="category-info">
23 <?php if ($thumb) { ?>
24 <div class="image">
25 <img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" />
26 </div>
27 <?php } ?>
28 <?php if ($description) { ?>
29 <?php echo $description; ?>
30 <?php } ?>
31 </div>
32 <?php } ?>
33
34 <?php if ($categories) { ?>
35 <h2><?php echo $text_refine; ?></h2>
36 <div class="category-list">
37 <?php if (count($categories) <= 5) { ?>
38 <?php foreach ($categories as $category) { ?>
39 <div>
40 <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
41 </div>
42 <?php } ?>
43 <?php } else { ?>
44 <?php for ($i = 0; $i < count($categories);) { ?>
45 <?php $j = $i + ceil(count($categories) / 4); ?>
46 <?php for (; $i < $j; $i++) { ?>
47 <?php if (isset($categories[$i])) { ?>
48 <div>
49 <a href="<?php echo $categories[$i]['href']; ?>">
50 <?php echo $categories[$i]['name']; ?></a>
51 </div>
52 <?php } ?>
53 <?php } ?>
38 <?php } ?>
39 <?php } ?>
40 </div>
41 <?php } ?>
42 Nothing else changed on the template after this section of the code
43 <?php if ($products) { ?>


When I completed my modifications as shown below the "Refine Search" now turned into a vertical list.

1 <?php echo $header; ?>
2
3 <!-- MY NOTE - created this div to place category header into white semitransparent box on main header photo above
the breadcrumb list -->
4
5 <div id="category-titlebox">
6 <h1><?php echo $heading_title; ?></h1>
7 </div>
8
9 <!-- MY NOTE - end of my new div -->
10
11 <div class="breadcrumb">
12 <?php foreach ($breadcrumbs as $breadcrumb) { ?>
13 <ul>
14 <li>
15 <a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
16 </li>
17 </ul>
18 <?php } ?>
19 </div>
20
21 <?php echo $column_left; ?>
22 <?php echo $column_right; ?>
23 <!-- MY NOTE - added this into template to create submenu box on left side -->
24 <div id="column-left"> <!-- MY NOTE - utilized existing div id's and class in my css stylesheet for lines 24 thru 28 -->
25 <div class="box">
26 <div class="box-content">
27 <div style="margin-top: 9px;"></div>
28 <div class="box-category">
29
30 <?php if ($categories) { ?>
31 <h2><?php echo $text_refine; ?></h2> <!-- MY NOTE - controls size of "refined search" text -->
32 <div style="border-bottom: 1px dotted #000000; line-height: 3.2em; margin-top: 9px;[adding-bottom: 4px;"></div>
33 <div class="category-list">
34 <?php if (count($categories) <= 10) { ?>
<!-- MY NOTE - adjusted count from 5 to 10 to left align all sub-catagories in left side menu bar -->
35 <ul>
36 <?php foreach ($categories as $category) { ?>
37 <li>
38 <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
39 </li>
40 <?php } ?>
41 </ul>
42 <?php } else { ?>
43
44 <?php for ($i = 0; $i < count($categories);) { ?>
45 <ul>
46 <?php $j = $i + ceil(count($categories) / 4); ?>
47 <?php for (; $i < $j; $i++) { ?>
48 <?php if (isset($categories[$i])) { ?>
49 <li>
50 <a href="<?php echo $categories[$i]['href']; ?>"><?php echo $categories[$i]['name']; ?></a>
51 </li>
52 <?php } ?>
53 <?php } ?>
54 <ul>
55 <?php } ?>
56 <?php } ?>
57 </div>
58 <?php } ?>
59 </div>
60 </div>
61 </div>
62 </div>
63
64 <div id="content">
65 <?php echo $content_top; ?>
66 <!-- <h1><?php echo $heading_title; ?></h1> -->
MY NOTE - Cancelled this line and transferred heading title to above breadcrumb bar -->
67 <?php if ($thumb || $description) { ?>
68 <div class="category-info">
69 <?php if ($thumb) { ?>
70 <div class="image">
71 <img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" />
72 </div>
73 <?php } ?>
74 <?php if ($description) { ?>
75 <?php echo $description; ?>
76 <?php } ?>
77 </div>
78 <?php } ?>
79 MY NOTE - nothing else changed on the template after this section of the code
80 <?php if ($products) { ?>


Because I had originally changed the category.tpl it worked beautifully but when you wanted to activate banners on left side it moved the menu to the center container or the right container depending if you were using 2 or 3 column approach. Visually this is not what I wanted. The new menu had to stay put on the lefthand side.

This led me to a few more late nights of research on google and the forum until I came across 2 very handy VQmod extensions in Opencart to help me along my way. One allowed me to create new "layouts" for the category and product pages and one that removed the product counts in my sub menus.

So, before you continue, to get the same results I achieved, you will need to get two VQmod extensions from Opencart website as follows:

1. You need to purchase VQmod ID#118636 - Multiple Product/Category Templates from Spikeachu. Install as per instructions, it's really easy. I had no prior experience and it worked the first time around.

2. You can download for free: Category Product Count Removal (vQmod) by opencartaddons. Install as per instructions, again it's really easy.

I upload these to my local host and VOILA!! I had already created a new category template prior to finding this module so I tagged it specifically to my category pages and used the original template tagged to last level menu items within the admin panel under categories. I refreshed my storefront and it worked exactly as I wanted right off the bat! I then uploaded the second module to remove the product counts. I went back into my storefront on local host and refreshed the screen and again VOILA! no more numbers.....yeeaah! It was that easy. I tweaked a couple of settings in my CSS style sheet that bolded and centered "refine search"and changed background colours etc but that's about it.

I love the fact that now I will be able to create all my own category and product "layouts" to improve the look of my website.

All I can say is that doing the above works for me and gives me exactly what I want for menu presentation without changing any core files. I will hopefully be live within the next month for everyone to see but if anyone wants to see it work before hand just contact me.

I want to thank the original developers/programmers for the fantastic modules and great easy to understand coding that makes it possible for someone with only a little experience to accomplish tasks to customize their own websites. If there is a better way, please let me know. I am a Newb and always wanting to learn new things and especially the proper way to do things.

Susan
Everlasting Decors

I am trying to accomplish this but without using breadcrumbs, is there anyone who can help me ?

@dosejnky:

From the above,

remove this peace of instruction:

Not working again. I use opencart 1.5.1.3
For you to remember what i am trying to do is:

menu1 | menu2 | menu3 | menu4| menu5 | menu6 | menu7

submenu3.1
subsubmenu3.1.1
submenu3.2
submenu3.3

Your previous code doesn`t work too.
Thank you for your reply.

The issue here is not about remembering but rather to clarify the Not working again and the doesn't work too term which only hardens the authors on how to troubleshoot the problem. What you previously requested is:

I am trying to accomplish this but without using breadcrumbs, is there anyone who can help me ?

which the bold terms means that you wish to implement this feature by discarding the use of the breadcrumbs.

Yep, I was stick to the title. Sorry for that i am not articulating wright.
But neither of the above codes is working at Opencart 1.5.1.3 and i need to find a solution somehow. Maybe i need it fast, so that`s the bad thing for me after reading 2 days straight and nothing happens.

Then, perhaps you could elaborate the problem you're encountering ... ?

To dosejnky

I noticed that when I posted my solution in this thread on March 23, 2012 that it has started to appear in Themeforest templates for sale as of March 26th so there must be some merit to what I have done if its starting to find its way into professional templates.

My store is still under construction and not live but if you look at the UStore template, for example, located for sale at Themeforest and then view demo you can see the basic design of my menu system. Choose "Components" on the main menu bar and then choose "monitors" and you will see how its works presenting the different levels and if its what you are looking for. The solution would be very easy to apply to your own template.

In my case, I have designed my category templates differently using a vqMod but it's all only window dressing and I've discovered the sky's the limit where presentation is involved. I have 4 levels of menu in some places before the product page appears and it works very cleanly only showing submenu of users choice with a detailed breadcrumb to backup on (ie. Home / Living Spaces / Furniture Collections / Heritage / product detail).

I hope this is of assistance.

Susan

My problem is that the subcategories are only displaying on the parent category page. If I select one of the sub categories then there is no sub menu on the left side.

MENU 1 | MENU 2 | MENU 3

MENU 1
menu1.1
menu1.2
menu1.3
menu1.4

So when I click menu one I get the refine search div with all the relevant options, but when I select one of the sub-categories(menu1.1), then the page that loads does not contain the sub menu on the left side.

Can anyone help?

Hi rolloutking

The way I recoded the menu system was to present as follows:

Main Menu Bar on home page:

Furniture Cat#2 Cat#3 Cat#4 Cat#5

There is no right or left subcategory menu shown at this point on home page.
User(customer) clicks on "Furniture" (or other main Cat#) which expands to show Chairs, Tables, Couches

Main Menu Bar on home page
Furniture Cat#2 Cat#3 Cat#4 Cat#5
Chairs
Tables
Couches

A. If user has clicked on "Furniture" only the following is shown:

1. Main menu bar retracts to show only:

Furniture Cat#2 Cat#3 Cat#4 Cat#5

2. Breadcrumb bar between main menu bar and "refined search" menu displays path:

Home > Furniture

3. "Refined Search" menu displays as follows:

REFINED SEARCH
Chairs
Tables
Couches


B. If user has clicked on any of the submenus (chooses Chairs, for example) of the main menu Categories the following is shown:

1. MAIN MENU BAR displays only:

Furniture Cat#2 Cat#3 Cat#4 Cat#5

2. BREADCRUMB BAR between main menu bar and "refined search" menu displays path:

Home > Furniture > Chairs

3. "REFINED SEARCH" sub-menu displays as follows:

REFINED SEARCH
Wood Chairs
Metal Chairs
Leather Chairs

From this point the user must choose option (wood chair, metal chair or leather chair) from the "Refined Search" menu positioned on either the left or right side of the container box and the next website screens shows as follows:

1. MAIN MENU BAR only shows:

Furniture Cat#2 Cat#3 Cat#4 Cat#5

2. BREADCRUMB BAR between main menu bar and "refined search" menu displays path:

Home > Furniture > Chairs > Wood Chairs

3. At this point, one of two screens can be displayed. If you wish to continue and have another detailed sub-
menu for styles the "REFINED SEARCH" sub-menu displays as follows:

REFINED SEARCH
Victorian style
Contemporary Style
Traditional Style

Click on Victorian style in the "Refined Search" menu and Breadcrumb menu will adjust as follows:

Home > Furniture > Chairs > Wood Chairs > Victorian Style

I have not found it necessary to go beyond this number of sub-menu levels but it seems that you can
add as many as you like.
OR
If another level of sub-menu is not required the user will now be on the page that shows all the
products for that particular sub-category and be shown as follows:

1. MAIN MENU BAR only shows:

Furniture Cat#2 Cat#3 Cat#4 Cat#5

2. BREADCRUMB BAR between main menu bar and "refined search" menu displays path:

Home > Furniture > Chairs > Wood Chairs >Victorian Style

3. The "Refined Search" menu disappears, at this point, and all products are shown for that sub-
category at which point you can have option to view as list/grid, sort by, product compare etc. If
user chooses a product then the product page opens up as usual and the only thing that changes is
the "Breadcrumb Bar" as follows:

Home > Furniture > Chairs > Wood Chairs > Victorian Style > Chair #1

********NOTE*******
The "BREADCRUMB BAR" plays an IMPORTANT role at this point in being able to manoeuvre around the lower levels of the sub-menus that are not accessible from "Main Menu Bar" (those being first 2 levels "furniture" & next sub-level "chair"). One post asked how to remove breadcrumb bar but you would lose functionality in the lower levels. The user would always have to start in Main Menu bar to get back to lower level sub-menus which would be a HUGE negative if you ask me.

If your user wants to go back to a previous level such as "Chair Style" or "Chair Type" they would click on that section of the breadcrumb bar to view "Refine Search" sub-menus which reappear for that particular level and make a new choice. Regardless of where user clicks on the menu system previous menus and "refined searches" clear out and only show the category or sub-level the user wants to see. I have jumped around my entire menu system and never experienced any issues or errors.

I wish I could show pictures as it would be much easier to explain and view. If what you are looking for is different from the above hopefully a more experienced coder can assist you. I was happy to just accomplish this recoding and getting this result for my website but anything else is probably beyond my capabilities at this point...lol.

My next step in coding would be to figure out how to replace the "Refined Search" text menu with a "Images and Text" combination so you would click on a picture of a "chair" or "table" instead to make site more user friendly and accessible for all users.

Hope this assists everyone.

Susan

I want to show subcategories of first category on sidebar and my version is 2.1.0.1, please help me i really need it.