Do you think your Opencart store could be improved by adding the Category navigation to the header? even better using a nice CSS dropdown menu? well this is how to do it!
Here is my demo version http://tinyurl.com/3646v5p
I better start with a disclaimer, this guide is written based on my own experience, I am not part of the Opencart development team and I can make no guarantees that this will work with your store nor can I advise whether this will continue to work as new updates to the core Opencart code are released. If you wish to try this modification you do so at your own risk and as always BACKUP FIRST it can't be done after!
This mod is based on Opencart version 1.4.7, code may be different in other versions. The dropdowns will not work in IE6 but the top level links will so the store is still usable.
The get the finished menu looking just right it does assume a basic knowledge of HTML/CSS, i'm not going to document exactly how to edit the template files but take a look at my demo source code if you want to see.
I recommend using a text editor such as the freely available Notepad++ with line numbering to implement these mods.
If you have any problems or aren't confident to complete this modification on your own you can always contact us for commercial support
This mod will be done in 3 steps:
1. Create the necessary files for this module
2. Modify the core code to allow the module to load in the header
3. Style the categories into a nice CSS dropdown menu
1.1 Create a copy of /admin/controller/module/category.php and call it headermenu.php
Open headermenu.php
Change line 2 from:
to
Using the Search/Replace function replace the text 'category' with 'headermenu' (without quotes), there should be 21 occurances.
At the end of line 25, create a new line and copy/paste the following code:
1.2 Create a copy of /admin/language/english/module/category.php and call it headermenu.php
Change the Heading Title from 'Categories' to 'Header Menu'
Add this line below the text_right line:
1.3 Create a copy of /admin/view/template/module/category.tpl and call it headermenu.tpl
Using the Search/Replace function replace the text 'category' with 'headermenu' (without quotes), there should be 7 occurances.
At the end of line 27, create a new line and copy/paste the following code:
1.4 Create a copy of /catalog/controller/module/category.php and call it headermenu.php
This file requires quite a few specific changes, to make it easy delete its contents and replace with the code below:
For those curious you can do a compare with the category.php but basically the changes are as follows:
1. Change some of the top references to load the headermenu code
2. Create a copy of the getCategories() function and call it getChildCategories(), this allows us to style the top level and sub level link differently
3. Tweak the code so it returns all sub level categories requried for our menu
1.5 Create a copy of /catalog/language/english/module/category.php and call it headermenu.php
Change the Heading Title from 'Categories' to 'Header Menu'
1.6 Create a copy of /catalog/view/theme/YOUR_THEME/template/module/category.tpl and call it headermenu.tpl
Change this file to just contain the code below:
NOTE: the div class must be "menu" to work with the CSS later.
Step 1 is complete, you have created a new module called 'Header Menu', now lets integrate it with the store..
Opencart doesn't have the relevant code in the header to load modules as the default positions are only Left or Right so we will fix this first.
2.1 Open the file /catalog/controller/common/header.php
At the end of Line 3, 'protected function index() {' create a new line and copy/paste the following code:
Again, for those curious, this is the same code the column_left controller uses to load modules but we've changed the filter to 'header'.
2.2 Open the file /catalog/view/theme/YOUR_THEME/template/common/header.tpl
This is where you need to know a bit of HTML/CSS, you need to decide where you want your menu to be.
In my demo I have taken the links from div5 and placed them in div3 and moved the search to div4, then placed the menu in div5.
Wherever you want the menu to be simply copy/paste the following code in between the div tags:
Now you have created the code and put it in your template all that's left is the CSS styling, on to step 3...
OK, were nearly there, all thats left is the CSS. We will use a great piece of work from CSSplay.co.uk
3.1 Open the file /catalog/view/theme/YOUR_THEME/stylesheet/stylesheet.css and copy the following code to the bottom of the file:
3.2 Now to turn it on! Log in to your admin panel and go to Extensions -> Modules, install the Header Menu module then edit to change the Position to 'Header' and Status to Enabled. Go back to your store front and take a look!
If it looks wrong it may be due to CSS styling on the divs, for example I put the code in div5 so had to remove all CSS for #header .div5 a {} to ensure it used the .menu class style.
My demo uses a couple of other CSS divs which I won't document here, I changed the div height, background, and the width of the .left div. Have a snoop at the source code if you want to.
If you have any problems or aren't confident to complete this modification on your own you can always contact us for commercial support