Eclipse Creations

I built this site using WordPress and a shopping cart plugin called WP e-Commerce.
WP e-Commerce is a great add on to an already terrific base, but sometimes there isn’t a pre-built solution to get it to do what you want it to do and you need to change some of the code yourself.

Enough people have asked me about how I managed to get the collapsing categories you see on the left sidebar to work, that I thought it would be easier to post my code here for any one that was interested.

If you’re interested, please read on…
If you’re not interested in looking at some badly written code, visit our main site and check out the terrific hand crafted gifts we have for sale.

Ok .. if you’re reading this, I’ll assume you’re interested in the code, so here it is

But first, a quick disclaimer .. I’m not a professional programmer and manage to do things by what I call “trial and error coding”. As such, there’s probably a better way to do this, but it works.

in file category_widget.php (in your cart theme) … around line 4, find

<h4 class='wpsc_category_title'><?php echo $categorisation_group['name']; ?></h4>

and replace it with

<h4 class='wpsc_category_title menu_head'><?php echo $categorisation_group['name']; ?></h4><div class="menu_body">

same file … around line 26, find

		</ul>

and replace it with

		</ul></div>

in file /widgets/category_widget.28.php … around line 25, find

$selected_categorisations = array_keys((array)$instance['categorisation'], true);

and place this before it

		$thisisa = "<div id='firstpane' class='menu_list'>";
		echo $thisisa;

same file .. around line 50, find

echo $after_widget;

and place this before it

	echo "</div>";

In your wordpress theme header.php … find

</head>

and add this before it

	<script type="text/javascript">
		jQuery.noConflict(); 
		jQuery(document).ready(function()
		{
			//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
			jQuery("#firstpane h4.menu_head").click(function()
		    {
				if ( jQuery(this).next(".menu_body").is(":hidden") ) {
					jQuery("#firstpane .menu_body").slideUp("slow");
				    jQuery("#firstpane h4.menu_head").css({backgroundImage:"url(/images/site/16-square-blue-add.png)"});
					jQuery(this).css({backgroundImage:"url(/images/site/16-square-blue-remove.png)"}).next("div.menu_body").slideDown(300);
				}else{
					jQuery(this).css({backgroundImage:"url(/images/site/16-square-blue-add.png)"}).next("div.menu_body").slideUp("slow");
				};
			});
		});
	</script>

In your theme’s css file .. add this.
You’ll need to modify it to fit your theme and preferences.

.menu_list {
	width: 185px;
}
.menu_head {
  background: url(/images/site/16-square-blue-add.png) center right no-repeat;
  padding: 5px 10px;
  cursor: crosshair;
  position: relative;
  border-bottom: dashed 1px #7cdfe7;
}
.menu_body {
	display:none;
}
.menu_body a {
  display:block;
}

you’ll also need to change the jscript and css to point to the images you want to use for the + and -

Well .. that’s it.
I hope you find it useful.