X-Cart forums

[awasson]

Hey this is a really interesting thread for me. I have just begun to seriously edit and create new templates for an X-Cart Gold 4.15 store. The goal is to produce it with table-less xhtml/css and have it produce valid markup.

I've taken the latest code from dalmuti and simplified it slightly so that it outputs the categories and subcategories as an unordered list (I'll post it once it's done). I just have a couple of questions first.

1) I would like to highlight the category that is currently in view. I have a css class that I can use called "current" to do this; <li class="current">some-category</li>. I'm just not sure how to write the conditional statement. Is there a resource I can use to look this stuff up in.

2) I would also like to keep the sub-categories of a current category in view while browsing around that sub-category. Is the code that chris2002 posted the best/only way to do this.

Thanks a lot.
Andrew

[chris2002]

Solution for 4.1.6

like this

CAT A
--CAT A1
--CAT A2
CAT B
--CAT B1
--CAT B2

in incude/categorie.php

Search for this in your code :
#
# Override subcategory_count for Admin area
#
if(!empty($subcategories) && ($current_area == 'A' || ($current_area == 'P' && $active_modules['Simple_Mode']))) {
$product_counts = func_query_hash("SELECT categoryid, COUNT(*) FROM $sql_tbl[products_categories] WHERE categoryid IN ('".implode("','", array_keys($subcategories))."') GROUP BY categoryid", "categoryid", false, true);
foreach($subcategories as $k => $v) {
$subcategories[$k]['subcategory_count'] = func_query_first_cell("SELECT COUNT(subcat.categoryid) as subc FROM $sql_tbl[categories] USE INDEX (PRIMARY) LEFT JOIN $sql_tbl[categories] as subcat ON subcat.categoryid_path LIKE CONCAT($sql_tbl[categories].categoryid_path, '/%') WHERE $sql_tbl[categories].categoryid = '$k' GROUP BY $sql_tbl[categories].categoryid");
$subcategories[$k]['product_count_global'] = $subcategories[$k]['product_count'];
$subcategories[$k]['product_count'] = isset($product_counts[$k]) ? intval($product_counts[$k]) : 0;
}
}



then add this just below the line :


//Subcategories in menu
function func_getallsubcat()
{
$raj =func_get_categories_list("", true, "all");
$raj1=$raj['all_categories'];
$ll=array();
foreach ($raj1 as $k=>$val)
{
if($val['parentid']!="0")
{
$ll[$val['parentid']][]=$val;
}
}
return $ll;
}
$smarty->assign("allsubcategories", func_getallsubcat());
//Subcategorie in menu - end


and in skin1/customer/categories.tpl

Where you need to show the subcategorie
{assign var=in value=$c.categoryid}
{foreach from=$allsubcategories.$in item=c }

and the link to show subcategories
<a href="home.php?cat={$c.categoryid}" class="yourclassforsub">{$c.category}<br></a>

thank you I was forogotten it in my previous post

Thank you

[awasson]

Thanks for the quick reply Chris.

Actually I wanted something like this.

I'm looking at the products in --CAT A2 and want the menu to look like this:
(I'd also like to highlight CAT A and --CAT A2)
CAT A
--CAT A1
--CAT A2
CAT B
CAT C
CAT D

When I'm looking at one of the subs in CAT C, I'd like it to look like this:
CAT A
CAT B
CAT C
--CAT C1
--CAT C2
--CAT C3
CAT D

Thanks,
Andrew

[chris2002]

Ok I see,

I send you a solution to display all subcategorie, you just need to customize it in a CSS menu if you like than you can have what you want without a lot of modifications in the main source code.

You can see a lot of exemple CSS menu at this URL.
http://www.cssplay.co.uk/menus/index.html

Hope that help you .
Thanks

[awasson]

Thanks Chris,
Scratch my previous comment I think you have included everything in your post, #32

I'll make some edits and hopefully have some code to post showing it with unordered lists.

Thanks again,
Andrew

[awasson]

Oh, so close but not yet perfect. I'm almost done.

BTW: Modifying the categories.tpl has been the most rewarding part of the project!

Chris2002 and Dalmuti: My hats off to both of you!
Once I'm finished, I'll post the mods I've done and include a the css I've used to produce the categories navigation.

I'm still hung up on how I can detect which category and subcategory is in view.
Example:
How do I know that I am viewing --CAT A2?
How do I know --CAT A2 is a sub-category of CAT A?

CAT A
--CAT A1
--CAT A2
CAT B
--CAT B1
--CAT B2

Once I know how to do this, I can modify categories.tpl with conditions to only show the sub-categories of the parent in view or of the subcategories in view. I can also put in a condition to highlight the current category.

Thanks for all the help.
Andrew

[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

[robf]

GREAT WORK AWASSON!!

I've been trying to get this result for a while now, worked great immediately, just needed to tweak for my site.

THANKS FOR POSTING!!

[awasson]

Glad to help robf.

I can't take all the credit though. I just took some of the advice posted earlier and then tweaked it a little. I have to admit though, it sure works nicely

Andrew

[Kerbsp]

Great mod. Save me a couple of hours. I modified the css code to work with FF, and Opera. The main thing I did was removing the bullets by adding code in the css list-style-type: none;. I am posting my modified css here.

/**
* 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 {
    list-style-type: none; 
    margin: 0;
    padding: 0;
    border: 0;
}

/*#sidenavcontainer {
    padding:200px 0 10px 0;
    PADDING-LEFT: 20px;
    PADDING-BOTTOM: 10px;
    width:181px; 
    min-height:0px; 
    float:left;
}
*/
h3{    /* PRODUCT CATEGORIES */
    padding:200;
    margin:100;
    font-size:11px; 
    font-style:normal; 
    font-weight:normal; 
}

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

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

#sidenavcontainer h4 {
    margin:0 0 0 20px;
    padding:20;
    padding-bottom:2px; 
}

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

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

#sidenavcontainer .current {
    color:#3333FF;
}