Forums / Addon Sideboxes / Categories Dressing

Categories Dressing

Results 1 to 20 of 2,268
06 Jun 2007, 19:25
#1
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Categories Dressing

The Categories Dressing mod is now available in Downloads > Sideboxes.

This is a mix-and-match group of alterations you can make to the appearance of the standard Zen Cart "Categories" sidebox.
Each alteration can be repeated with different characteristics, or omitted if not wanted.
- You can add dividers and/or non-linked headings in any desired locations.
- You can add images to these headings.
- You can replace any desired category names with image links.
- You can give a desired style to any of these alterations using your stylesheet.

This mod does not provide a specific style, unlike BetterCategories; it simply provides a set of tools to easily give your own style to the Categories box.

Please post any comments, problems or requests for additional functionality here.
08 Jun 2007, 16:06
#2
evildad avatar

evildad

New Zenner

Join Date:
Jun 2007
Posts:
7
Plugin Contributions:
0

Re: Categories Dressing

HI,

I just downloaded your Mod and I find it very useful. But I have one question. How can i get rollover effects using this mod?

Would be very kind If you could get me a hint :smartalec:
08 Jun 2007, 17:33
#3
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Categories Dressing

Rollover effects don't involve the code introduced by this mod - they are available on any installation of Zen Cart.

You can apply the "hover" pseudo-class to any link, in this case a.category-top, a.category-subs and a.category-products, like this:
[php]a.category-top:hover, a.category-subs:hover, a.category-products:hover {
color: red;
font-weight: bold;
}[/php] to treat all of the varieties the same. You can give each one its own declaration if you want them to behave differently.


You can also use

a.category-subs, a.category-products { }

to give subcategories a different style from top cats.
08 Jun 2007, 18:27
#4
evildad avatar

evildad

New Zenner

Join Date:
Jun 2007
Posts:
7
Plugin Contributions:
0

Re: Categories Dressing

Sure, this will only work with text links, won't it?
But I use the mod to have category Images. How can I get those rollover effects to work with my images?

I appreciate ur help.
08 Jun 2007, 18:42
#5
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Categories Dressing

Rollover image swapping is something I haven't worked on yet. One way to accomplish it would be with Javascript code, which I know very little about.

Another way would be to modify the "catimgxx.gif" generator to create a custom id tag instead. This could then have a background image assigned to each category in the stylesheet, which could be swapped on hover.
I'll work on this, but no promises on timetable.
08 Jun 2007, 18:57
#6
evildad avatar

evildad

New Zenner

Join Date:
Jun 2007
Posts:
7
Plugin Contributions:
0

Re: Categories Dressing

gjh42:

Rollover image swapping is something I haven't worked on yet. One way to accomplish it would be with Javascript code, which I know very little about.

Another way would be to modify the "catimgxx.gif" generator to create a custom id tag instead. This could then have a background image assigned to each category in the stylesheet, which could be swapped on hover.
I'll work on this, but no promises on timetable.


Sounds great. Hope this feature request will get into the modification.
Really hope so :clap:
12 Jun 2007, 16:21
#7
datoshway avatar

datoshway

New Zenner

Join Date:
Jun 2007
Posts:
16
Plugin Contributions:
0

Re: Categories Dressing

I need help got the Category Dressing working pretty well, but theres a couple of issues.

1) Now all my icons next to each category has disappeared?

I have more, but lets attack one at a time, please help, this is urgent!
12 Jun 2007, 17:31
#8
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Categories Dressing

Do you have BetterCategories installed? It modifies some of the same code as this, so they would need to be carefully integrated, and might not be completely compatible.

What method/code did you use to get the icons?
12 Jun 2007, 17:38
#9
datoshway avatar

datoshway

New Zenner

Join Date:
Jun 2007
Posts:
16
Plugin Contributions:
0

Re: Categories Dressing

no I don' thave better cat installed, here is the orignal code that had the icons next to each cat for tpl_categories.php Let me know what you think. THanks for your help!

<?php
/**
* Side Box Template
*
* @package templateSystem
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_categories.php 3157 2006-03-10 23:24:22Z drbyte $
*/
//$content_tm = '';
//$content_head = tm_box_head(BOX_HEADING_CATEGORIES,'','style3');
$content_tm .= '<ul class="ul2">
';

for ($i=0;$i<sizeof($box_categories_array);$i++) {
if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
// skip if this is for the document box (==3)
} else {
$content_tm .= '<li><a href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';

if ($box_categories_array[$i]['current']) {
if ($box_categories_array[$i]['has_sub_cat']) {
$content_tm .= '<span class="category-subs-parent">' . $box_categories_array[$i]['name'] . '</span>';
} else {
$content_tm .= '<span class="category-subs-selected">' . $box_categories_array[$i]['name'] . '</span>';
}
} else {
$content_tm .= $box_categories_array[$i]['name'];
}

if ($box_categories_array[$i]['has_sub_cat']) {
$content_tm .= CATEGORIES_SEPARATOR;
}

if (SHOW_COUNTS == 'true') {
if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
$content_tm .= CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX;
}
}

$content_tm .= '</a></li>';



// if($i + 1 != sizeof($box_categories_array))
// $content_tm .= '<br /><div class="cat_separator"></div>' . "\n";
}
}

if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
$content_tm .= '</ul>
<br style="line-height:10px;">
<div class="h_l"><img alt="" src="images/spacer.gif" width="1" height="1"></div>
<br style="line-height:6px;">
<ul class="ul2" >' . "\n";
}
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
$show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
if ($show_this->RecordCount() > 0) {
$content_tm .= '<li><a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . '</li>' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
// display limits
$display_limit = zen_get_products_new_timelimit();

$show_this = $db->Execute("select p.products_id
from " . TABLE_PRODUCTS . " p
where p.products_status = 1 " . $display_limit . " limit 1");
if ($show_this->RecordCount() > 0) {
$content_tm .= '<li><a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '</li>' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
$show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
if ($show_this->RecordCount() > 0) {
$content_tm .= '<li><a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . '</li>' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
$content_tm .= '<li><a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a></li>' . "\n";
}
}

$content_tm .= '</ul>';
//$content_cont = tm_box_cont($content_tm);
//$content = $content_head.$content_cont;
$content = $content_tm;



?>
12 Jun 2007, 17:59
#10
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Categories Dressing

Ok, you have a Template Monster template, which has added a bunch of code to the stock file, and changed how the contents are built.

If you tell me which Categories Dressing feature you are trying to use, I can probably tell you how to integrate it with this template.

I think the issue is that TM has modified the categories to display as an unordered list, and when you merged/replaced code that got eliminated.
12 Jun 2007, 18:12
#11
datoshway avatar

datoshway

New Zenner

Join Date:
Jun 2007
Posts:
16
Plugin Contributions:
0

Re: Categories Dressing

sorry about that, here is my code for the code for the modified tpl_categories.php file, i'm using the non linked headers, let mek now what you think.


<?php
/**
* Side Box Template
*
* @package templateSystem
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_categories.php 4162 2006-08-17 03:55:02Z ajeh $
* Modified for Categories Dressing v1.0 by Glenn Herbert (gjh42) 2007-06-06
*/
//$content_tm = '';
//$content_head = tm_box_head(BOX_HEADING_CATEGORIES,'','style3');
$content_tm .= '<ul class="ul2">
';

$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
for ($i=0;$i<sizeof($box_categories_array);$i++) {
switch(true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
// case ($box_categories_array[$i]['path'] == 'cPath=3'):
// $new_style = 'category-holiday';
// break;
case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'category-top';
break;
case ($box_categories_array[$i]['has_sub_cat']):
$new_style = 'category-subs';
break;
default:
$new_style = 'category-products';
}
if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
// skip if this is for the document box (==3)
} else {

// categories dressing - add (divider and) heading above a cat
if ($box_categories_array[$i]['path'] == 'cPath=26') { //replace number with your desired cPath
$content .= '<br>' . "\n"; // to add divider uncomment this line
$content .= '<span class="catBoxHeading1"><strong>Room</strong></span><br />' . "\n";
}
// categories dressing - add (divider and) heading above a cat
if ($box_categories_array[$i]['path'] == 'cPath=19') { //replace number with your desired cPath
$content .= '<br>' . "\n"; // to add divider uncomment this line
$content .= '<span class="catBoxHeading1"><strong>Categories</strong></span><br />' . "\n";
}
// categories dressing - add (divider and) heading above a cat
if ($box_categories_array[$i]['path'] == 'cPath=31') { //replace number with your desired cPath
$content .= '<br>' . "\n"; // to add divider uncomment this line
$content .= '<span class="catBoxHeading1"><strong>Prices</strong></span><br />' . "\n";
}
$content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';

// categories dressing - display images for category names
$cat_name_display = $box_categories_array[$i]['name'];
if(in_array(str_replace("cPath=","",$box_categories_array[$i]['path']), explode(",",''))) { //replace numbers with your cat ids separated by commas
$cat_name_display = '<img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/catimg' . str_replace("cPath=","",$box_categories_array[$i]['path']) . '.gif" alt="Category ' . str_replace("cPath=","",$box_categories_array[$i]['path']) . '">';
}
if ($box_categories_array[$i]['current']) {
if ($box_categories_array[$i]['has_sub_cat']) {
$content .= '<span class="category-subs-parent">' . $cat_name_display . '</span>';
} else {
$content .= '<span class="category-subs-selected">' . $cat_name_display . '</span>';
}
} else {
$content .= $cat_name_display;
} // images for category names

if ($box_categories_array[$i]['has_sub_cat']) {
$content .= CATEGORIES_SEPARATOR;
}
$content .= '</a>';

if (SHOW_COUNTS == 'true') {
if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
$content .= CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX;
}
}

$content .= '<br />' . "\n";
}
}

if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
$content .= '<hr id="catBoxDivider" />' . "\n";
}
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
$show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
if ($show_this->RecordCount() > 0) {
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . '<br />' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
// display limits
// $display_limit = zen_get_products_new_timelimit();
$display_limit = zen_get_new_date_range();

$show_this = $db->Execute("select p.products_id
from " . TABLE_PRODUCTS . " p
where p.products_status = 1 " . $display_limit . " limit 1");
if ($show_this->RecordCount() > 0) {
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '<br />' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
$show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
if ($show_this->RecordCount() > 0) {
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . '<br />' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
}
}
$content .= '</div>';
?>
12 Jun 2007, 19:00
#12
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Categories Dressing

You have replaced all of TM's code in this file, except for the opening
$content_tm .= '<ul class="ul2">
';
which is now not closed. This would cause an error if $content_tm were being applied at the end.. TM uses $content_tm to accumulate the list instead of $content, so the heading code will need to be modified to work with this.
Also, the <ul> is not going to play nice with a non-list item tossed in the middle, so we will have to end the list, add the heading and start another list.

You need to go back to the original TM file, and add just the heading code, as shown here in its modified form.

Immediately after this bit:[php]
// skip if this is for the document box (==3)
} else { [/php]
add this:
[php]
// categories dressing - add (divider and) heading above a cat
if ($box_categories_array[$i]['path'] == 'cPath=26') { //replace number with your desired cPath
$content_tm .= '</ul>';
$content_tm .= '<br>' . "\n"; // to add divider uncomment this line
$content_tm .= '<span class="catBoxHeading1"><strong>Room</strong></span><br />' . "\n";
$content_tm .= '<ul class="ul2" >' . "\n";
}
// categories dressing - add (divider and) heading above a cat
if ($box_categories_array[$i]['path'] == 'cPath=19') { //replace number with your desired cPath
$content_tm .= '</ul>';
$content_tm .= '<br>' . "\n"; // to add divider uncomment this line
$content_tm .= '<span class="catBoxHeading1"><strong>Categories</strong></span><br />' . "\n";
$content_tm .= '<ul class="ul2" >' . "\n";
}
// categories dressing - add (divider and) heading above a cat
if ($box_categories_array[$i]['path'] == 'cPath=31') { //replace number with your desired cPath
$content_tm .= '</ul>';
$content_tm .= '<br>' . "\n"; // to add divider uncomment this line
$content_tm .= '<span class="catBoxHeading1"><strong>Prices</strong></span><br />' . "\n";
$content_tm .= '<ul class="ul2" >' . "\n";
}
[/php]
12 Jun 2007, 19:04
#13
datoshway avatar

datoshway

New Zenner

Join Date:
Jun 2007
Posts:
16
Plugin Contributions:
0

Re: Categories Dressing

I'm already confused.... This code you sent.

// skip if this is for the document box (==3)
} else {

Does not exist in the orignal code I sent you.......
12 Jun 2007, 19:06
#14
datoshway avatar

datoshway

New Zenner

Join Date:
Jun 2007
Posts:
16
Plugin Contributions:
0

Re: Categories Dressing

alright nevermind, I found it, and it worked! Thanks!
18 Jun 2007, 05:21
#15
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Categories Dressing

Categories Dressing version 1.1 is now available in Downloads.

Added two new functions, example files, and more directions for use of built-in functions.

- You can replace any desired category names with background image links which swap on hover.
- You can add a custom bullet to top categories, which changes when a cat opens to subs.

The examples are configured to display with Zen Cart demo products to quickly illustrate their use. A sample stylesheet is included, from which to copy CSS code for your main stylesheet.
21 Jun 2007, 17:47
#16
evildad avatar

evildad

New Zenner

Join Date:
Jun 2007
Posts:
7
Plugin Contributions:
0

Re: Categories Dressing

Do you have an example Site for the hover Images? This is exactly what i'ver requested!
The only problem is the lack of Documentation...

Anyway Thanks :clap:
21 Jun 2007, 18:06
#17
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Categories Dressing

I have tested this on my local server and don't currently have an extra database available to install a demo on my live server.

The example is set up to display the hover swap on category id 25 ("Test 10% by Attrib" in Demo products). If you have a category with cPath=25, it will automatically work there, using the example image files.
If you don't have a category 25, you can change the number in the tpl_categories.php and stylesheet_categories_dressing.css files (per the instructions in the readme) to one you want to use, and rename the two image files in /your_template/images/ from catimg25.gif and catimg25hover.gif to match.
21 Jun 2007, 20:26
#18
evildad avatar

evildad

New Zenner

Join Date:
Jun 2007
Posts:
7
Plugin Contributions:
0

Re: Categories Dressing

Ok i figured it out but i have a Problem with the CSS file.
There is the line with
margin-bottom: -21px;/*compensates for extra line break introduced by display: block;*/


But this looks very ugly on the IE.

This is how it looks in IE:

http://evildad.de/Pic/iexplore.jpg


And here is how it looks on Firefox
http://evildad.de/Pic/firefox.jpg


Is there a way to get it working in both Browsers?
21 Jun 2007, 20:48
#19
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Posts:
21,876
Plugin Contributions:
6

Re: Categories Dressing

That IE bug shows for me, too, sometimes, but nowhere near as severely. You will need to follow the directions near the bottom of the readme:


- Directions for using the function built into tpl_categories.php to display all top categories as colored boxes:

Find in tpl_categories.php:

$content .= '<br />' . "\n"; //comment out this line for a.category-top display: block
/*$content .= "\n";*/ //uncomment this line for a.category-top display: block

and change to:

/*$content .= '<br />' . "\n";*/ //comment out this line for a.category-top display: block
$content .= "\n"; //uncomment this line for a.category-top display: block

[ The rest may not be applicable directly to you... ]
Add to your stylesheet:

a.category-top {
background-color: #aabbff;
color: #112233;
padding: 0.5em 0.3em;
display: block;
}

adjusting numbers and adding or deleting properties as you desire (such as font or background-image).
If your stylesheet already has a.category-top, just add display: block; to it and adjust.

- For a "rollover" effect to change the appearance on hovering, add to your stylesheet:

a.category-top:hover {
background-color: #ccddee;
color: #332211;
}

adjusting as desired. You can also swap background images by including

background-image: url(../images/categorybghover.gif);



*** And remove the
margin-bottom: -21px;

I will include this explicitly in the instructions for the next version.
21 Jun 2007, 21:00
#20
evildad avatar

evildad

New Zenner

Join Date:
Jun 2007
Posts:
7
Plugin Contributions:
0

Re: Categories Dressing

Perfect. This works flawlessly for me.
Thank u for your always helpful and fast replies.

I really appreciate it.