X-Cart forums

[EN4U]

How can this be achieved.... I believe this differs some from what i read here.

What we want is a header.... Then the categories within it.....

example...

Mens Toys <--This is just a header area it points to in BOLD. No link associated.
Product category <---- Category
Product Category <--- Category

Womens Toys<--This is just a header area it points to in BOLD. No link associated.
Product category <---- Category
Product Category <--- Category

When done its just a complete list of zones(header name) then the items within it and so forth.....

[robertswww]

Originally Posted by EN4U

How can this be achieved.... What we want is a header.... Then the categories within it.....

example...
Mens Toys <--This is just a header area it points to in BOLD. No link associated.
Product category <---- Category
Product Category <--- Category

Try adding the code from this Free Mod from BCSE...
Category Heading FREE X-cart Modification #125:
http://www.bcsengineering.com/store/catalog/Category_Heading_FREE_Xcart_Modification-p-125.html

From the mod description, "This mod allows you to EASILY add headings to any categories you want. You can add headings to subcategories or main categories."

I believe that sounds like what you are looking for.

Robert

[DrQuietus]

My client wanted the categories listed on the home page with custom icons. I already had the show subcategories only for the current category mod installed. I copied the categories.tpl and named it categories-home.tpl, trimmed it down a bit, and put an if statement on the main categories list item to display the different icons. Just thought I would post it because it is an easy way to add the categories to welcome.tpl if you already have the mod in this thread installed. For version 4.1.x

categories-home.tpl - You would obviously have to change the categoryid numbers to suit your project, and it could get out of control if you have a lot of categories:

{if $config.General.root_categories eq "Y"}

<ul id="homecats">
    {foreach from=$categories item=c}
<li {if $c.categoryid eq "10"}id="pressure"{elseif $c.categoryid eq "12"} id="electrical"{elseif $c.categoryid eq "19"}id="temp"{elseif $c.categoryid eq "24"} id="humidity"{elseif $c.categoryid eq "26"} id="air"{elseif $c.categoryid eq "28"}id="light"{/if}><a class="mainhomecats" href="home.php?cat={$c.categoryid}">{$c.category}</a>
     <ul>
      {assign var=in value=$c.categoryid}
      {foreach from=$allsubcategories.$in item=c }
       <li><a class="subhomecats" href="home.php?cat={$c.categoryid}">{$c.category}</a></li>	
        {/foreach}
        </ul>
</li>
{/foreach}

</ul>
{/if}

welcome.tpl add the following line:

{include file="customer/categories-home.tpl"}

CSS (could be a bit more trim - but this is easy to follow):

ul#homecats {
        margin: 0px;
	padding: 0px;
	list-style-type: none;
        text-align: left;
        padding-left: 15px;  
}
ul#homecats li#pressure, ul#homecats li#electrical, ul#homecats li#temp, ul#homecats li#humidity, ul#homecats li#air, ul#homecats li#light {
        width: 250px;
        float: left;
        display: block;
        height: 180px;
        margin-left: 10px;
}
ul#homecats li#pressure {
	background: url(images/pressure.gif) no-repeat left top;
}
ul#homecats li#electrical {
	background: url(images/electric.gif) no-repeat left top;
}
ul#homecats li#temp {
	background: url(images/temp.gif) no-repeat left top;
        height: 130px;
}
ul#homecats li#humidity {
	background: url(images/humidity.gif) no-repeat left top;
        height: 130px;
}
ul#homecats li#air {
	background: url(images/air.gif) no-repeat left top;
        height: 130px;
}
ul#homecats li#light {
	background: url(images/light.gif) no-repeat left top;
        height: 130px;
}
ul#homecats a.mainhomecats {
        display: block;
        color: #1c1d47;
        padding-left: 50px;
        padding-top: 24px;
        padding-bottom: 5px;
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        border-bottom: 1px solid #1c1d47;
}
ul#homecats a.mainhomecats:hover {
        text-decoration: none;
        color: #471d1d;
}
ul#homecats ul {
        margin: 0px;
	padding: 0px;
        padding-top: 5px;
	list-style-type: none;       
}
ul#homecats ul a.subhomecats {

}
ul#homecats ul a.subhomecats:hover {

}

final result: http://www.tek-inst.com/

[Scotty85]

I have this working in 4.1.9 pretty well, but have a couple of quirks with it. If I click on a subcat inside a subcat, it collapses the menu back to the main cats. Is there a way to keep them open no matter the depth level of subs? One more thing I'd like to see, if possible, is the ability to NOT open the main cat page when it's clicked on, but only expand down the menu to the first level of subcats for the one you clicked on. From there it would open the corresponding subcat page, and so-on.

Ideas?

Great mod so far though!

Scotty

[TanyaG]

Awasson, thanks a lot for a great mod. Could you advice how can I display 3rd level subcategories.

Root category A
- subcategory A1
- subcategory A2
--- subcategory A21
--- subcategory A22
- subcategory A3
Root category B

Root category C



Many thanks.

[JasonMiller1975]

Fantastic thread everyone. A mashup of several posts gave me the solution I needed. Much appreciated!

[clik]

Hi,
I'm working on setting up a new online store with x-cart 4.2. Did anybody try to implement it (subcategories in the Category menu box)? I've tried to search in "Storefront Design & Template Editing in v 4.2.x" directory without any luck .
I would appreciate your help and I think everybody can profit as well.
clik

[Jeremy Smith]

Originally Posted by dalmuti

Here is my categories.tpl file:

{* $Id: categories.tpl,v 1.26 2005/11/17 06:55:37 max Exp $ *}
{capture name=menu}
{if $active_modules.Fancy_Categories ne ""}
{include file="modules/Fancy_Categories/categories.tpl"}
{assign var="fc_cellpadding" value="0"}
{else}
{if $config.General.root_categories eq "Y"}
{foreach from=$categories item=c}
<font class="CategoriesList"><a href="home.php?cat={$c.categoryid}" class="VertMenuItems">{$c.category}</a></font><br />
{foreach from=$allcategories item=cat}
{if $cat.parentid eq $c.categoryid}<font class="CategoriesList"><a href="home.php?cat={$cat.categoryid}" class="VertMenuItems">{$cat.category}</a>
</font>
<br />
{/if}
{/foreach}
{/foreach}
{else} {foreach from=$subcategories item=c key=catid}
<font class="CategoriesList"><a href="home.php?cat={$catid}" class="VertMenuItems">{$c.category}</a></font><br />
{/foreach}
{/if}
{/if}

The text in bold will correct both issues for you.

Thanks,

Louise

I got this one working on our shop site.

But as we have up to 50 sub categories, your talking a very long list when a user goes into a root category, means having to scroll, scroll and yet more scrolling, just isnt feasible for our shop.

Is there anyone that knows of a way (I think this may have been posted previously but as I am rushed to get this working, I thought I would post this question).

Is there anyway of displaying a list drop down menu at the top, above the welcome message, of root level categories and then when a user selects a root category, it then displays the relevant sub categories, magically appears and then are able to select products from that sub category?

Thanks for your help,
Jeremy.

[SamsonWebDesign]

This thread (although great) has got so long and complicated now I can't find the solution!

I'm on 4.1.12 and I want to simply display on every page of the site in the categories.tpl as follows:

Category 1
Subcat 1A
Subcat 1B
Subcat 1C

Category2
Subcat 2A
Subcat 2B
Subcat 2C

If anyone has this for the last release of 4.1.12 could they please post the code!

[Steve-C]

Originally Posted by awasson

Success!
Hopefully someone will benefit from the following (and previous) code and explanation.

The following mods will provide a hierarchy (list) of navigation links where the current top level item will be highlighted in CSS and a listing of the sub-categories listed out. If a sub-item or sub-category is currently in view then that particular sub-category will also be highlighted in CSS. This works for 4.15 but I'm not sure how or if it will work with earlier versions.

1) First and foremost, you'll have to modify your categories.php file as per Chris2002's instructions. POST #32

2) Now you'll have to edit your categories.tpl to output the list of links along with some methods to highlight the links. I found the post that was put up by Dalmuti POST #28 really helpful. Then I had to do some research and mind numbing experimentation with the changes introduced by the categories.php mod until I got it figured out.

My categories.tpl now looks like this:

<div id="sidenavcontainer">
{capture name=menu}
{if $active_modules.Fancy_Categories ne ""}
  {include file="modules/Fancy_Categories/categories.tpl"}
  {assign var="fc_cellpadding" value="0"}
{else}
  {if $config.General.root_categories eq "Y"}
    <ul>
    {foreach from=$categories item=c}
      {if $cat eq $c.categoryid || $current_category.parentid eq $c.categoryid}
        <li><h3><a class="current" href="home.php?cat={$c.categoryid}">{$c.category}</a></h3></li>
      {else}
        <li><h3><a href="home.php?cat={$c.categoryid}">{$c.category}</a></h3></li>
      {/if}
      {assign var=in value=$c.categoryid}
      {* CONDITIONAL DROP DOWN ITEMS FROM TOP CATEGORY *}
      {if $current_category.parentid eq $c.categoryid || $cat eq $c.categoryid} 
        {foreach from=$allsubcategories.$in item=c }
          {if $cat eq $c.categoryid}
            <li><h4><a class="current" href="home.php?cat={$c.categoryid}">{$c.category}</a></h4></li>
          {else}
            <li><h4><a href="home.php?cat={$c.categoryid}">{$c.category}</a></h4></li>	
          {/if}
        {/foreach}
      {/if} 
      {* /CONDITIONAL *}
    {/foreach}
  {else} 
    {foreach from=$subcategories item=c key=catid}
      <li><h3><a href="home.php?cat={$catid}">{$c.category}</a></h3></li>
    {/foreach}
  {/if}
</ul>
{/if}
</div>

3) There is a CSS stylesheet that accompanies this mod and provides some indentation, fonts size and highlighting. I'm using heading tags <h3> & <h4> to provide some semantic sense to the categories and also it lets me indent them and adjust the text as much as I want through the stylesheet.

Categories & Sub-cats are black
Highlighted categories and sub-cats are bright green
Rollovers are red

It goes a little like this:

/**
* sidenavcontainer is 181px wide and a minimum of 400px high
* It has a little padding top and bottom as well
* Modify it to suit your layout
*/

html, body, ul, ol, li, p,
h1, h2, h3, h4, h5, h6,
form, fieldset, a {
	margin: 0;
	padding: 0;
	border: 0;
}

#sidenavcontainer {
	padding:20px 0 10px 0; 
	width:181px; 
	min-height:400px; 
	float:left;
}

h3{	/* PRODUCT CATEGORIES */
	padding:0;
	margin:0;
	font-size:12px; 
	font-style:normal; 
	font-weight:bold; 
}

#sidenavcontainer h3 {
    margin:0 0 0 30px;
    padding:10px 0;
}

h4{	/* PRODUCT SUB-CATEGORIES */
	padding:0;
	margin:0;
	font-size:11px; 
	font-style:normal; 
	font-weight:normal; 
}

#sidenavcontainer h4 {
    margin:0 0 0 40px;
    padding:0;
	padding-bottom:7px; 
}

#sidenavcontainer a {
	color:#000000;
	text-decoration:none;
}

#sidenavcontainer a:hover {
	color:#FF0000;
	text-decoration:none;
}

#sidenavcontainer .current {
	color:#00FF00;
}

I got a whole lot of help through searching and reading the previous posts about this and I hope this helps someone else too.

Cheers,
Andrew

I followed this and it works great in v4.1.8.

I've been trying to mod the code to stop the categories WITH subcats linking to the subcats page, just the categories WITHOUT subcategories to link.

I would like the categories with subcats to just open the list of subcats in the menu for further selection but not change page until a subcat is clicked.

Could anyone possibly help, I've tried all kinds of things but am stuck !!

Cheers
Steve