Category Manufacturer Tabs jQuery and osCommerce
At the official osCommerce forum this question was posed;
my client wants her website to have the same menu as website below
link removed! But here is a screenshot:
now is there a way that we can show brand which is manufactures in osc with a tab of category just like in the website above is there a addon or do i have to start from scratch.
And the question was answered like this:
the best way is to use jQuery tabs.
Now, as I like experimenting with jQuery and osCommerce, I decided to have a go at it - within 5 minutes I have it working, using the tutorial and demo at jquery for designers.
Step 1:
Set your manufacturers to show a list instead of a dropdown. This is an admin setting.
Step 2:
Open up the file /includes/column_left.php and get rid of everything in it. Then add only this code:
-
<div class="tabs"><!-- tabs -->
-
<ul class="tabNavigation">
-
<li><a href="#categories">Categories</a></li>
-
<li><a href="#manufacturers">Manufacturers</a></li>
-
</ul>
-
<!-- tab containers -->
-
<div id="categories"></div>
-
<div id="manufacturers"></div>
-
</div>
Step 3:
Add the css contained in the example tutorial to the oscommerce stylesheet.
Step 4:
Add the jquery as per the example tutorial to all the pages in your site.
Step 5:
Open up the files /includes/boxes/categories.php and /includes/boxes/manufacturers.php and remove the tr and td tags. Also comment out the infoBoxHeading in both files as so;
-
//new infoBoxHeading($info_box_contents, false, false);
Also, simply echo the strings at the end rather than place them in an infobox. As so;
-
echo $manufacturers_list;
Step 5 is a bit complicated, but I can package something up if anyone is interested and there is a beer or two involved 
In the end it looks like this, obviously you would play with the .css to make it better suit the design of your site.
What I might do in my next makeover is use this method as it is a great way of saving space in a design.
