Navigation image button ON for certain categories

[Guest]

I have three categories in my cart and I've made three corresponding image buttons for the header template of every page - (global/cart.tpl) & (global/index.tpl)

When I go to the books category I want the "Books" image button to go to the ON state.

Is there some way of passing the cat_id of the current page to the image button? I've tried using {DATA.cat_id} but it doesn't pass anything.

rough example:

IF {DATA.cat_id} =1 THEN img src="a.gif"

Do guys have any tips on how I could impliment this?

Many thanks

[Guest]

The follwing script gets the number of the current category from the URL.

You can then tell the image what to do depending on the current catagory

<script type="text/JavaScript">

/**

* Gets value of specified parameter from query string, or document.URL (if no qStr).

* If a param name is repeated, the 1st value is returned

* (ie: Better use a different function, if expecting multiples)

*/

function getQueryParam( name, /*opt*/ qStr)

{

	(qStr||document.URL).match(new RegExp('[&?]'+name+'=([^&]*)'));

	return decodeURIComponent(RegExp.$1);

}



if ( getQueryParam("catId")==1){

	document.images.yourimage.src= 'yourimage.gif';

	}



</script>

Thanks to Banana Ananda over at webdeveloper.com for this :cry:

[markscarts]

Very cool js solution,thanks for sharing this

I usually code that functionality into CubeCart php code, but it is a little more work i suppose . . . OTOH, instead of image swap, you can control everything by css with or without images.

Code like I use in categories.inc.php:

			if(isset($_GET['catId']) && $_GET['catId']>0){

				$currentCatQuery = "SELECT cat_name, cat_father_id, cat_id, cat_image FROM ".$glob['dbprefix']."CubeCart_category WHERE cat_id = ".$db->mySQLSafe($_GET['catId']);

				$currentCat = $db->select($currentCatQuery);

		

				if ($results[$i]['cat_id'] == $currentCat[0]['cat_id']) {

		

					$box_content->assign("CLASS","currentTabLink");	



				} else {

			

					$box_content->assign("CLASS","topTabLink");



				}

			} else {

			

				$box_content->assign("CLASS","topTabLink");



			}

Then of course you will define the classes, .topTabLink and .currentTabLink in your css files, and use the placeholder {CLASS} in place of your class name in the templates.

[Guest]

Very cool js solution,thanks for sharing this

Your solution is a lot better!

I've tested it out and it works great but the only niggle is once you click on a product, the Catergory links all revert to .topTabLink. I assume this is because $_GET['catId'] can't get the category number once you view a product. Have you any suggestions?

I'd love to know how to do this within PHP. The javascript was just a 'quick fix', but works well.

[markscarts]

true, it's only a start, i also code the sale items tab and homepage tab, etc. I'll try to post more soon.

[Guest Satlooker]

Hi Markscarts,

I like your solution alot, but could you explain a little more about in which CSS en maybe a little

example of the {class} thing. This dousn't ring a bell for me.

thanks

Jos

[markscarts]

It doesn't matter which css file, layout.css or style.css will do. just create the classes to make the tabs appear as you want them to, under the clas, .topTabLink you define how you want it to look normally, and under .currentTabLink you define how you want it to appear when it is the current category shown.

In the template file, for the division that makes your tab, use this: class="{CLASS}"

[Guest Satlooker]

It doesn't matter which css file, layout.css or style.css will do. just create the classes to make the tabs appear as you want them to, under the clas, .topTabLink you define how you want it to look normally, and under .currentTabLink you define how you want it to appear when it is the current category shown.

In the template file, for the division that makes your tab, use this: class="{CLASS}"

I'm really new in this stuff, so I don't really understand it. At the end I would like to have some thing like this. This is not real code but just to make clear what I want.

If CatID = 19

Then use viewprod

Else use viewprod2

So if I have a small part of the layout.scc, can I just add it in

.topCatsTabRight {

background-image: url(../styleImages/backgrounds/catTabRight.gif);

width: 7px;

background-repeat: no-repeat;

}

.topTabLink

.currentTabLink

could you maybe give me a small example how to get the IF catid==19

thanks