X-Cart forums

[MoonDog]

This is for v4.1.8

Thanks to mrkenzie from post #137 for the modifications and the original poster 27stars for the original creation, I got this working on v4.1.8 with just minor modifications.

These instructions are basically the same as post #137, but I'll explain it with the code modifications that I have.

Mod for subcategories in columns with descriptions and icons for v4.1.8
1. the default "No Image Available" image is displayed if none is assigned
2. product description is displayed below the icon.
3. quantity will display a number in parenthesis and without the word 'product' and "(0)" if there are no subcategories or products for a particular category.
4. and it will also show the subcategory DESCRIPTION if there is one when you hover over the subcategory link.
------------------------------------------------------------

Start by adding this code to the end of the xcart/skin1/skin1.css file.

/*
          For subcategories in columns with descriptions and icons
*/
.ColumnTitles {
      TEXT-ALIGN: center;
      WIDTH: 33%
      PADDING-LEFT: 5px;
}

Find the following code in xcart/include/categories.php:

 
$_categories = func_query_hash("SELECT $to_search FROM $sql_tbl[categories] USE INDEX (am) $join_tbl ".(!empty($search_condition)?"WHERE ".implode(" AND ", $search_condition):"")." GROUP BY $sql_tbl[categories].categoryid ".$sort_condition, "categoryid", false); 

and replace with this (in order to get the category description):

$_categories = func_query_hash("SELECT $to_search, $sql_tbl[categories].description FROM $sql_tbl[categories] USE INDEX (am) $join_tbl ".(!empty($search_condition)?"WHERE ".implode(" AND ", $search_condition):"")." GROUP BY $sql_tbl[categories].categoryid ".$sort_condition, "categoryid", false);

Next, find the following code, from <table ..to...</table> in skin1/customer/main/subcategories.tpl and delete it:

<table cellspacing="5" width="100%">
{foreach from=$subcategories item=subcat}
<tr>
{if $tmp and $first_subcat ne "Y"}
 <td valign="top" rowspan="{count value=$subcategories print="Y"}"><img src="{if $current_category.icon_url}{$current_category.icon_url}{else}{$xcart_web_dir}/image.php?id={$cat}&amp;type=C{/if}" alt="" /></td>
{assign var="first_subcat" value="Y"}
{/if}
 <td class="SubcatTitle"><a href="home.php?cat={ $subcat.categoryid }"><font class="ItemsList">{ $subcat.category|escape }</font></a><br /></td>
 <td class="SubcatInfo">{if $config.Appearance.count_products eq "Y"}
{if $subcat.product_count}{ $subcat.product_count } {$lng.lbl_products}
{elseif $subcat.subcategory_count}{ $subcat.subcategory_count } {$lng.lbl_categories|lower}
{/if}
 {/if}</td>
</tr>
{/foreach}
</table>

And replace that code with this:

<table cellspacing="5" width="100%" border="0">
<tr>
{foreach from=$subcategories item=subcat}
{if $tmp is div by 3} 
</tr>
<tr><td colspan="3"></td></tr>
<tr valign="top"> 
{/if} 
{ if $tmp and $first_subcat ne "Y" }
 {assign var="tmp" value=0}
 {assign var="first_subcat" value="Y"}
{/if}
   <td class="ColumnTitles" valign="top"><a title="{$subcat.description}" <a href="home.php?cat={ $subcat.categoryid }"><img src="{if $subcat.icon_url}{$subcat.icon_url}{else}{$xcart_web_dir}/default_image.gif{/if}" alt="" /><br>
 <font class="ItemsList">{ $subcat.category|escape }</font></a>
 {if $config.Appearance.count_products eq "Y"}
{if $subcat.product_count}({ $subcat.product_count })
{elseif $subcat.subcategory_count}({ $subcat.subcategory_count })
{else} (0) 
{/if}
 {/if}
{assign var="tmp" value=$tmp+1}
{/foreach}
</tr>
</td>
</table>

And thats it.

-------------------------------------------------------------

The default is 3 columns. But if you want to change the number of columns, then just change all the 3's to the number of columns you want in this line of code (from above):

4 column example (two number 3's was changed to 4):

{if $tmp is div by 4} 
     </tr><tr><td colspan="4"></td></tr><tr valign="top"> 
{/if}

And also change the following line in skin1.css (from above) for the appropriate td width % (4 columns is 25%; 2 columns is 50%; etc.)

4 column example:

.ColumnTitles { 
      TEXT-ALIGN: center;
      WIDTH: 25%;
      PADDING-LEFT: 5px;
}

To keep the icons aligned evenly on the page , I created my sub-category icons (thumbnails) the same size as the 'No Image Available' image. This size is around 125 x 75 pixels. I've also attached screenshots for the 3 and 4 column displays below.

All the modifications above were made on templates that had no previous modifications. Hope you like it and thanks again to 27stars and mrkenzie.

- MoonDog -

[katandmouse]

Anyway to get this to work if the images are in the database?

didn't mean to do that, but had to set it that way to install on this server and forgot to set it back to file system.

[balinor]

Move them back to FileSystem...never should run images from the DB.

[katandmouse]

Thanks,
Can I change now or will I have to re-enter all the images for the products?

[balinor]

http://forum.x-cart.com/showthread.php?t=8438

[vahidnia]

Jason,
Did you ever find out how to center the text under the image in subcategories?
Thanks,
Vahid

Originally Posted by Glowinafuse

How do I get the code below for message 182 to be centered under image?

Please help

Jason

[vahidnia]

MoonDog,
You have done an excellent job on this! I have done every thing correct and got the subcategories aligned with picture and text. all great. The only problem I have is that I can’t get the text under the picture in the center. It is on the bottom left side of the image. Any advise.
Sorry to have to bother you, I read a lot on the forum with no success.
Thanks,
V

[MoonDog]

vahidnia,

Make sure that you have added the following code to your skin1/skin1.css correctly. This is the code that sets your icon and text alignment to center.

 
/*
         For subcategories in columns with descriptions and icons
*/
.ColumnTitles {
     TEXT-ALIGN: center;
     WIDTH: 33%
     PADDING-LEFT: 5px;
}

That's it. Hope this helps.

- MoonDog -

[vahidnia]

Apparently, my skin1.css file has no control over subcategort text format and size! . I got rid of this code all together and the text still showed up at the bottom left. I deleted skin1.css in skin1/ directory but again nothing happened. It seems to me that subcategory text gets its format and size from somewhere else! is it possible?
By the way, I am using fancy category mod, does that has anything to do with this?

[MoonDog]

vahidnia,

Yeah, that seems pretty strange.

O.K. let's see, you deleted the .ColumnTitles class and it still does the same thing. Did you check to see that there is only one instance of .ColumnTitles in your skin1.css file. If you have two .ColumnTitles classes, then the last one will overide the first one. But if you do have two of them, just delete one of the two.

Now, if there is nothing wrong with your skin1.css file, then go back to the modified skin1/customer/main/subcategories.tpl file and open that up.

When your icon gets placed on your page it gets center aligned and then it sees a break tag and then it places the category name text centered on the next line. So if you don't have a <br> tag, then when the text is too long, it goes to the next line, but it continues from the left side instead of the center.

So what you need to do is find this line of code:

   <td class="ColumnTitles" valign="top"><a title="{$subcat.description}" <a href="home.php?cat={ $subcat.categoryid }"><img src="{if $subcat.icon_url}{$subcat.icon_url}{else}{$xcart_web_dir}/default_image.gif{/if}" alt="" /><br>

and make sure that you have a <br> tag at the end of this line of code.

Hopefully one of the two will fix it. As far as the fancy category mod, I don't really know what that is. I just bought this x-cart software last month and I'm just playing around with it right now. But I don't think that mod should affect it. But if those two suggestions doesn't work, then I guess maybe it could.

Well, that's it. Good luck.

- MoonDog -