It would be much faster to simply include this element or rather custom block globally to your Magento store via your layout XML files, and have a condition in this block’s .phtml file that excluded any output on category page.

This is a very simple method that simply looks to our Mage registry and asks the question “Is the current page indeed a current category page or not?”.

php if(!Mage::registry('current_category')):?>
//OUTPUT THE GLOBAL ELEMENTS CODE ON NONE-CATEGORY PAGES
php endif; ?>

Simple as that, of course the correct way would be to include this block globally via your XML layout files, and then remove it via XML (Custom Layout Update) in the backend->catalog->manage categories “Custom Design” tab for each category.

But this method might be faster.

Devin R. Olsen

With that said the, the biggest scenario for this need would be to determine the products parent category in order to perform something unique to the product’s page while viewing product’s page through one category or another.

This is a very simple method that assumes you have the product of question loaded up or rather, you are at the product level of your store in order to obtain some information about the products parent categories.

So here we go.

First you need to gather all the category id’s this product belongs to, so to do this we simply make a new variable called “$catIds” and gather all the category id’s like so:

<?php
$catIds = $_product->getCategoryIds();
?>

Next we simply need to point to the first category in this new “$catIds” variable array like so:

(Remembere the number 0 is = 1 or rather first in an array.)

<?php
$catIds = $_product->getCategoryIds();
$relativeCatId = $catIds[0];
?>

So now that we have gathered our relative parent category id, we can begin to load this category up in order to gather information from it and ultimately create a unique condition for our products page:

<?php
$catIds = $_product->getCategoryIds();
$relativeCatId  = $catIds[0];
$category = Mage::getModel("catalog/category")->load($relativeCatId);
?>

Now that we have loaded up our relative parent category into this new variable called “$category” we can then say, “Grab the category’s name, or even attributes to create some kind of condition.”, like so:

<?php
$catIds = $_product->getCategoryIds();
$relativeCatId   = $catIds[0];
$category =  Mage::getModel("catalog/category")->load($relativeCatId);
?>
<?php if($category->getName()  == "Category One"): ?>
//DO THIS
<?php elseif($category->getName()  == "Category Two"):?>
//DO THAT
<?php endif;?>

And that’s it!

So to recap, all we did was while under a product level, gathered all its parent category id’s into the variable “$catIds”. Once all category id’s we captured, we proceeded to highlight or rather grabbed our first category’s id from the array (0) and used it to load the category up. Once this category was loaded, we could access its attributes or information. We used the category’s information to build a condition and perform something unique to the product page depending on if its being viewed through one category or a completely different category.

Thanks Everyone!

Devin R. Olsen

• Text Field
• Text Area
• Date
• Yes/No
• Multiple Select
• Dropdown
• Price
• Gallery
• Media Image
• Fixed Product Tax

Because there are different types of attributes there are also different ways of obtaining an attributes value. If we were to create a new custom attribute called “theme_color” and the attribute was of a “Text Field” type, we could do something like the following at a product level (meaning a product is loaded) to obtain its value.

<?php
echo $_product->getThemeColor();
?>

$_product is the product of question we have loaded up and ready to work with, and we use “getThemeColor();” because our attribute was named “theme_color”. It’s important to realize that when calling out the value of an attribute with this method, we start with “get” and then capitalize the first letter of each word that is divided by a “_”.

Now this method would give us the value of a simple “Text Field” attribute but what if the attribute was a “Dropdown or a Multiple Select” type? Well if you try to use this “getYourAttributesName()” method on a none “Text Field” or “Textarea” attribute type you will most likely get nothing.

So how do we obtain the value of a “Dropdown or a Multiple Select” attribute type you ask? Well some would argue that you would do so via this method:

<?php
echo $_product->getAttributeText('theme_color');
?>

However, what this would do is return an array of the “Dropdown or Multiple Select” options instead of the value of the selected option you would have set. There is another way to obtain these types of attributes selected value and it looks like this:

<?php
$attributes = $_product->getAttributes();
$themeColor = $attributes['theme_color']->getFrontend()->getValue($_product);
echo $themeColor;
?>

With this method we are simply creating a new variable called “$attributes” and pointing to our “$_product” to then using the “getAttributes()” function to gather all the attributes of this product.

Once we have all the product’s attributes inside of the “$attributes” variable, we make another new variable called “$themeColor”. “$themeColor” then assigns its self to our “$attributes” array that we in turn call out our custom attribute [‘theme_color’].

Once we have pointed to the custom attribute in the “$attributes” array, we simply run through the front end via the function “getFrontend()” and then pull the value down via “getValue($_product)”.

If we then echo our “$themeColor” you should get the value of your custom Drop Down or Multiple Select attribute to do what you will with it.

So to recap:

<?php echo $_product->getThemeColor() ?>

Would get the value of an attribute wholes type is of Text Field or Text Area’s

<?php echo $_product->getAttributeText('theme_color')  ?>

That will not give a value of a Text Field or Text Area attribute type but rather gather an array of all options in a Drop Down or Multiple Select attribute type.

<?php
$attributes = $_product->getAttributes();
$themeColor = $attributes['theme_color']->getFrontend()->getValue($_product);
?>

That will give you the value of any type of attribute, even the value from “Drop Down or Multiple Select” attribute types.

I hope this clears some things up and helps some developers out there .

Thanks!

Devin R. Olsen

• IE7, IE8,
• FireFox,
• Safari
• Opera

This pure CSS menu with infinite sub menus technique  only uses 10 CSS rules making it EXTREMELY light weight. This technique also overcomes some funky IE bugs such as Ghost Hovers and Z-Indexing issues via pure CSS.

[CLICK HERE TO SEE DEMO OF TUTORIAL]

Lets Begin shall we? Start by creating a new html document and use the following code to make this lesson go smoother for everyone.

xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Devin R. Olsen - Pure CSS Menu &amp;amp;amp;amp;amp;amp;amp;amp; Infinite Sub Menus</title>
</head>
<body>
</body>

In the body of our newly created document lets setup an unordered list with some list items like so.

<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>

We start by giving our top-level un-ordered element an id of “nav” so we have some sort of unique identifier to reference to with our CSS. Next lets copy the whole thing and nest a second list into any of our first level list items and change its ID to a CLASS like so:

<ul>
<li>Menu 1
<ul class="nav">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>

That’s it for the HTML portion, just note that top-level list menu gets an id called “nav” while all nested sub menus get a class called “nav”. You can continue to nest as many menus you like in the same manner from here on out to meet your css menu desires.

Lets move onto the CSS portion. In the header of our document lets create some style tags that will house all our menus CSS like so:

<style type="text/css">
</style>

We will start with our most important reset and structure styles for our menu. First lets point to our #nav, .nav and #nav .nav li elements and reset their margin’s and padding’s to zero like so:

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }

This is done to remove any default browser margin’s and padding’s automatically applied to these element types. Next lets point directly to our first level list items and give them some structure / style like so:

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:10px ">0px 10px 0px 10px; border:1px #000 solid; position:relative; }

Our menu will be of horizontal so we set the first level list items to a float of left and a display of inline. We also give the list items a list-style of none to remove browser default bullet points next to each list item. Last we give our list items a position of relative in order to prevent any child elements who may be positioned absolute from breaking out of the flow of design. The rest of the styles are of visual preference and up to the developer to change however they desire.

Next we must have some way to identify our top-level sub menus to from all the rest. We do this to give visual guidance on how our first level sub menu is displayed against our top-level menu. To do this we must include a new class to our first level sub menus ONLY, called “first” like so:

<ul>
<li>Menu 1
<ul class="nav first">
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>

Again this is only for our “FIRST LEVEL SUB MENUS” that we apply this new “first” class to and not any of the rest of our further nested menus. Next lets point to these first level sub menus and set some structure rules via CSS like so:

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:10px ">0px 10px 0px 10px; border:1px #000 solid; position:relative; }
#nav li ul.first {left:-1px; top:100%;}

We give our first level sub menu’s a top percentage of 100 to make it fall directly below our top-level menu. Because our list items have a 1px border we give our first level menu items a left style that is negative 1 to assure our first sub menu’s fall completely to the left when being displayed.

Next lets start giving our elements some style rules. First we will point to all our list items and anchor links that any list item may carry like so:

li, li a {color:#000;}

Here we have set our list items and anchor tags any list item may carry to have a text color of black or rather #000. Next we will point to all our sub menu list items ONLY and give some structure and styles like so:

li, li a {color:#000;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}

Note how we first pass through the #nav element before calling .nav li vs. just stating .nav li? This is important as its a fix to helps us over come some spacing issues due to our list item borders. The first style we give here is a width of 100% to insure our list items will completely span across its parents set width. The rest of the styles are up to the developer to change to however they like.

Next lets give some structure to our list item’s anchor elements like so:

li, li a {color:#000;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}

We first point to all our list items and then search for all anchor tags, then we give each anchor tag a display of block and an inherited width and height from its own parent element.

Next lets begin adding our menus behavior styles such has hover and when to display a sub menu and when not to display a sub menu. This part is really where the magic happens and our ability to have a pure CSS menu with infinite sub menus come into play.

First we need to give our sub menus a rule to hide them self’s from view until told otherwise like so:

ul.nav { display:none; }

We add an extra measure of security here when dealing with the display none style by stating “ONLY un-ordered list elements who have a class of “nav” must by default be a display of none”.

Next we will set our behavior color styles for list items and list item anchor tags like so:

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }

We first point to all our list items that are under a hover state, as well as all list item’s anchor tags while the list item is under a hover state. Then we set a text color of white or rather #fff and a background of black or rather #000. These styles are for the developer to change to their desired look and feel.

Next we must create a rule to display our sub menus when its parent list item is under a hovered state like so:

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; }

Here we are stating that all list items that are under a state of hovered who have a child element with the class of .nav (our sub menu) must be displayed. By using the CSS child selector (>) we are also stating that only the first proceeding child sub menu must be displayed while all the rest remain hidden.

Next lets talk about how we fix yet another IE bug. This one is called the “IE:Hover Ghost Bug” and in its basics it leaves deeply nested sub menus in a state of constant display after being hovered. To fix this bug we simply look at our last style as a igniting point. By giving style and structure to our sub menus when told to be displayed, vs. having a constant rule that is always giving style and structure to our element at all times, we squash the IE bug. So we add the following styles to our last rule like so:

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;}

The position absolute is crucial to allowing our sub menus to be positioned relatively to its parents location on the page. We also set a pre-defined width to our sub menus of 200px as well as offset the menu by top -2px (due to borders width) and by left 50% of its parent element. Last and most important style we give to our sub menus is a z-index of 1000 to make sure everything layers or rather sorts correctly.

Last thing we need to do is squash yet another IE bug that deals width z-index and properly sorting elements or rather layers. To do this we simple state that all sub menu’s parent elements (list items) must have a higher z-index value than the sub menu elements like so:

ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid;}
li:hover { position:relative; z-index:2000; }

Pssst.. That’s it folks, that’s all the CSS you need to have a fully compleated Pure CSS Menu with infinite amounts of sub menus, enjoy!

Completed CSS Code:

#nav, .nav, #nav .nav li { margin:0px; padding:0px; }
#nav li {float:left; display:inline; cursor:pointer; list-style:none; padding:0px 10px 0px 10px; border:1px #000 solid; position:relative;}
#nav li ul.first {left:-1px; top:100%;}
li, li a {color:#000; text-decoration:none;}
#nav .nav li { width:100%; text-indent:10px; line-height:30px; margin-right:10px; border-top:1px #000 solid; border-bottom:1px #000 solid;
border-left:none; border-right:none; background:#fff;}
#nav li a {display:block; width:inherit; height:inherit;}
ul.nav { display:none; }
#nav li:hover > a, #nav li:hover { color:#fff; background:#000; }
li:hover > .nav { display:block; position:absolute; width:200px; top:-2px; left:50%; z-index:1000; border:1px #000 solid; }
li:hover { position:relative; z-index:2000; }

Thanks Everyone.
Devin R. Olsen

Here is the finished code for your new category listing block.

<?php
$cats = Mage::getModel('catalog/category')->load(2)->getChildren();
$catIds = explode(',',$cats);
?>
<ul>
<?php foreach($catIds as $catId): ?>
	<li>
    	<?php
			$category = Mage::getModel('catalog/category')->load($catId);
			echo $category->getName();
			$subCats = Mage::getModel('catalog/category')->load($category->getId())->getChildren();
			$subCatIds = explode(',',$subCats);
		?>
            <?php if(count($subCatIds) > 1):?>
                <ul>
                <?php foreach($subCatIds as $subCat) :?>
                    <li>
                    <?php
                        $subCategory = Mage::getModel('catalog/category')->load($subCat);
                        echo $subCategory->getName();
                    ?>
                    </li>
                <?php endforeach;?>
                </ul>
            <?php endif; ?>
    </li>
<?php endforeach; ?>
</ul>

And The XML Block Code:

<block type="catalog/navigation" name="catalog.category" template="catalog/navigation/category.phtml" />

NOTE:
After loading each category you have a whole array of different attributes you can use. If you wanted to make each category listing be a link, simply use the getUrl() function in a similar fashion:

<a href="<?php echo $category->getUrl()?>">
	<?php echo $category->getName()?>
</a>

Enjoy everyone!
Devin R. Olsen

Click Here to See This Tutorial’s Example Demo

How to Build jQuery Lava Lamp Menu Tabs from Devin R. Olsen on Vimeo.

This effect is called “animated rounded menu tabs”. It’s a neat little effect that will work in all browsers including IE6+. somethings to note is that this technique uses a single image for its four corners and is stretchy in both width and height!

We are also using the jQuery JS lib to ensure our JS works across all browsers but also to cut down on the amount of JS we uses to make this great effect. Here is the link I use in the video tutorial to use the jQuery lib from Google’s online repository.

http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js

Here is the full source if you want to just get down to studying the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Devin R. Olsen - Lava Lamp Menu Tabs</title>
<style type="text/css">
#nav {width:500px;  background:#333; margin:0px; padding:0px 0px 0px 20px; color:#fff; position:relative;}
#nav li {float:left; display:inline; list-style:none; line-height:35px; position:relative; z-index:3;}
#nav li a { padding:0px 10px 0px; cursor:pointer; font-size:12px; display:inline; color:#fff;}
#nav li.rounder { position:absolute; left:0px; top:0px; margin:0px; padding:0px; display:none; z-index:2;}
#nav li.rounder img {position:absolute;}
.cornersWrap {position:relative; height:25px; width:auto; margin-top:5px; background:#fff;}
#nav, #nav li, #nav li a, #nav li.rounder {height:35px;}
#tl,#tr,#bl,#br {position:absolute; width:8px; height:8px; overflow:hidden;}
#tr,#tl {top:0px;}
#br,#bl {bottom:0px;}
#tr,#br {right:0px;}
#tl,#bl {left:0px;}
#tr img,#br img {left:-8px;}
#bl img,#br img {top:-8px;}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#nav li a").mouseover(function(){
		$("#nav li a").each(function(count){
			$(this).css({color:"#fff"});
		});
		$(this).css({color:"#000"});
		var offL =  $(this).offset().left - $("#nav").offset().left;
		var offW = $(this).width() + parseInt($(this).css("paddingLeft")) * 2;
		$("li.rounder").stop().animate({left:offL+"px", width:offW+"px"},295,function(){
			//IE6 1px Fix
			var trOff = $("#tr").offset().left + parseInt($("#tr").css("width"));
			var wrapWOff = $(".rounder").offset().left + parseInt($(".rounder").css("width"));
			var brOff = $("#br").offset().top + parseInt($("#br").css("height"));
			var wrapHOff = $(".cornersWrap").offset().top + parseInt($(".cornersWrap").css("height"));
			if(wrapWOff > trOff){
				$("#tr,#br").attr("class","rFix");
			}
			$(".rFix").css({right:"-1px"});
			if(wrapHOff > brOff){
				$("#br,#bl").attr("class","bFix");
			}
			$(".bFix").css({bottom:"-1px"});
		});
	});
});
</script>
</head>
<body>
	<div>
    	<ul id="nav">
        	<li><a href="#">Short</a></li>
            <li><a href="#">Longer</a></li>
            <li><a href="#">Kinda Long</a></li>
            <li><a href="#">Kinda Longer</a></li>
            <li><a href="#">Really Longer</a></li>
            <li><a href="#">A Really Lot Longer</a></li>
            <li class="rounder">
            	<div class="cornersWrap">
                    <div id="tl"><img src="http://www.devinrolsen.com/wp-content/themes/typebased/images/rounder.gif" /></div>
                    <div id="tr"><img src="http://www.devinrolsen.com/wp-content/themes/typebased/images/rounder.gif" /></div>
                    <div id="bl"><img src="http://www.devinrolsen.com/wp-content/themes/typebased/images/rounder.gif" /></div>
                    <div id="br"><img src="http://www.devinrolsen.com/wp-content/themes/typebased/images/rounder.gif" /></div>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

Here is the completed code if you just want to study the little guy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Everything You Need to Know About a Lightbox!</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<style type="text/css">
#lightBox {width:100%; margin:50px 0px; text-align:center; display:none;}
#lightWrap {width:400px; background:#000; border:2px #ccc solid; margin:auto; color:#fff; position:relative;  z-index:2;}
#shade {width:100%; height:100%; position:absolute; top:0px; left:0px; background:#000; -moz-opacity:0.5; -khtml-opacity:0.5; opacity:0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50); display:none; z-index:1;}
#closeBox { width:16px; height:16px; line-height:15px; background:#F36; position:absolute; top:5px; right:10px; cursor:pointer;}
</style>
<script>
$(document).ready(function(){
	$("#action").click(function(){
		$("#lightBox").fadeIn("fast");
		if($("body").height() > $("body").offset().height){
				var sH = $("body").height();
			}else{
				var sH = $("body").offset().height;
		}
		$("#shade").css({height:sH+'px',}).slideDown("fast");
		$("#closeBox").click(function(){
			$("#lightBox").fadeOut("fast");
			$("#shade").slideUp("fast");
		});
	});
});
</script>
</head>
<body>
<button id="action">Click Me</button>
<div id="lightBox">
	<div id="lightWrap">
    	<div id="closeBox">X</div>
    	<h2>HELLO This is my very own custom built lightbox!!</h2>
    </div>
</div>
<div id="shade"></div>
</body>
</html>

Thanks Everyone!

Ok here we are going to learn how to build the “Drag 2 Share” feature you see on my blogs. This little guy is just what your visitors need to feel like they are having fun when sharing. In its own little way it finally makes sharing FUN!

Thanks!
Devin R. Olsen