X-Cart forums - Mod for subcategories in columns with descriptions and icons

Quote:

Originally Posted by 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.

Code:

/*

          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:

Code:

 

$_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):

Code:

$_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:

Code:

<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:

Code:

<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):

Code:

{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:

Code:

.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 -

Version 4.1.9 WORKS PERFECT THANKS MOON DOG

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!!WOOOOO HOOOOOOO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! !!!!!!!!!!!!!!