Yahoo Tree Menu With AJAX

azer · March 15, 2006

here is the official support thread for Yahoo Tree Menu With AJAX

http://www.oscommerce.com/community/contributions,4094

azer · March 15, 2006

I'd like thanks to Andrew_Yer for having shared is work with us

i was looking for a tree menu for age in oscommerce !

i installed it on a ms2 osc version , and i can't get it working :

1. i see the box and it show the 1st top level categories

2. if in column_left , i include the old categories , and i click on sub categories of the old categories infobox, then in the yahootremenu box , i show the sub categories

3.but when i click on the categories on the yahootremenu box nothing happen

4. except if i click on the top level categories of the subcategroeis taht is selected in the old categories box, it collapse the categorie

Question :

1.

If you have includes/local/configure.php dont replace it.
Just merge it with one from this mod!

cant we paste the code define in the normal configure.php not in the local folder ?

2. the small triangles images are not shown in my tree menu

3. maybe we could define a new infobow heading name like :

define('BOX_HEADING_YAHOO_TREeMENU', 'Y Tree Menu');

4. i can see in the yahoo tree page , in the documentation taht there is different layout for the menu, how can we change the one form the contrib ?

jeffshadap · March 16, 2006

here is the official support thread for Yahoo Tree Menu With AJAX

http://www.oscommerce.com/community/contributions,4094

I installed the tree , cannot see the tree .

categories are displayed however.

on clicking on a category, the link doesn't work

jeffshadap · March 16, 2006

here is the official support thread for Yahoo Tree Menu With AJAX

http://www.oscommerce.com/community/contributions,4094

toggle also doesn't work in Firefox or IE

Andrew_Yer · March 17, 2006

Thank you for your attention to this contribution!

I'll continue the work to fix the bugs and to improve the menu.

The results I'll publick.

Some words about the links on the categories.

If the category has not products, only subcategories, it has not a link.

If you see this not right, I'll change it. :)

cant we paste the code define in the normal configure.php not in the local folder ?

Yes, of course.

2. the small triangles images are not shown in my tree menu

There is a small bug in the tree.css. The path to the triangles images - like this: background: url(../images/menu/expand.gif) may be not correct. Correct please it according your directory layout.

3.but when i click on the categories on the yahootremenu box nothing happen

Can you please send me the html-source of the page with this menu. My e-mail address is [email protected] Thanks.

March 17, 2006

First, change

url(../images/menu/expand.gif)

with

url(images/menu/expand.gif)

Second, shut off cache. This contrib don't work with cache on.

Normando

Andrew_Yer · March 18, 2006

This contrib don't work with cache on.

Yes. It don't work with cache yet. I'll add this function soon.

azer · March 18, 2006

i checked my cache is off

i changed the path of images in css

i clik nothing expand

if i use an other categorie box, and i go deeper in the sub categories , in the yahoo tree mun box i see the subcategories , but withouth images still .

what ever i do , when i click on the categories names on it , nothing happen

JAVASCRIPT is enabled !

Andrew_Yer · March 18, 2006

Please, request the URL like this http://your.site.here/categories.php?cPath=1 from your site (with existing cPath number). The server must give you the XML answer, containing the information about subcategories.

Andrew_Yer · March 19, 2006

what ever i do , when i click on the categories names on it , nothing happen

I have seen the html-source of your page here http://www.oscommerce.com/forums/index.php?showtopic=200249#

Your shop is placed in the subfolders, isn't it?

href:"http://localhost/ms2fr/catalog/index.php?cPath=1_36_37

YahooTreeMenu does not work in subfolder jet. Sorry.

Also maybe you had changed yahootreemenu.php.

Look here, please.

 var request = "yahootreemenu.php?cPath=" + node.data.id;

MUST be

var request = "categories.php?cPath=" + node.data.id;

Because of that yahootreemenu dosn't work in your shop.

azer · March 19, 2006

you are right for both

1.my shop is in a sub folder shame i wont be able to use your awesome menu :-(

2. i make the mistake because i wanted to not repalce my categorie , since some people desactivate javascript , i want to keep the old categorie menu in case of (and also for testing purpose)

well tahnks for your support , ill wait taht u release a version first taht is no a remaplcement, i mean doesnt use the same varaible ( box heading) and is compatible with shop in subfolder ( i think it s the case of many here :-)

by the way for the dynamaic moving of the image product to the shopping cart , any advice ? B)

Andrew_Yer · March 19, 2006

1.my shop is in a sub folder shame i wont be able to use your awesome menu :-(

I'll fix it and next version of the menu will work properly in subfolder.

since some people desactivate javascript

No problem. In this case will be rendered NOSCRIPT version of the categories menu. It aslo generated by this module and present at the page.

by the way for the dynamaic moving of the image product to the shopping cart , any advice ? B)

I have not any advice jet. Sorry.

azer · March 19, 2006

I'll fix it and next version of the menu will work properly in subfolder.
No problem. In this case will be rendered NOSCRIPT version of the categories menu. It aslo generated by this module and present at the page.

I have not any advice jet. Sorry.

so if javascript is desactivted , yahoo tree menu , will work as well , just it will be like the one in the ms2 origianl package ? did i understood well ?

Andrew_Yer · March 19, 2006

so if javascript is desactivted , yahoo tree menu , will work as well , just it will be like the one in the ms2 origianl package ? did i understood well ?

Yes, of course. Try zen-cart.org.ua with and without javascript, please :)

Edited March 19, 2006 by Andrew_Yer

valley · August 26, 2006

Hello Andrew,

Is there a revised version of this contribution where

the sub catogories work properly yet ?

You have included a catogories.php in the catalog directory

with the package. Where does this go ? No mention in your

readme file.

Cheers

Shred

September 14, 2006

Hello Andrew,
Is there a revised version of this contribution where

the sub catogories work properly yet ?

You have included a catogories.php in the catalog directory

with the package. Where does this go ? No mention in your

readme file.

Cheers

Shred

HI Andrew

I have the exact same behavior as all the above mentionned (I run on MAc Os X with Safari 2.0.4

- no toggle images

- a click on a category FROM MY HOME PAGE triggers something (the browsers seems to be "thinking" but is stuck)

- however, when I go to a product, a click on the category can deploy and expand the PRODUCT'S CATEGORY only (but the triangles are not visible yet - please note: my images directory has been renamed: are the paths hardcoded besides the css where I already changed my URLs?)

Please note: I run the ultimate SEO URL MOD, that rewrites the URLs. Can it affect the behavior of this mod?

Thanks!

rockstar_clothing · December 4, 2006

Is there any way to have the menu automatically expanded?

I really want to show the menu without having to click on the main categories to show the sub categories.

EgonS · January 5, 2007

I have a few questions about this contrib.

1. How can I get the text bold? I set font-weight: bold; in tree.css but that doesn't help.

2. I would like to have a mouse over image everywhere. It works when there are subcategories. But I would like them everywhere. How do I do this?

3. Also I would like to have a color change in the background when I mouse over. Just like on this site What's your flavor?. I can't get it done.

Thank you for the help :thumbsup:

It's a great contrib.

Edited January 5, 2007 by EgonS

sebconn · April 12, 2007

Hi there, great contribution, just a small issue I'm having. I haven't worked out what's causing it yet but ever since I removed the demo products and categories from OSCommerce and added my own categories and sub categories It's been very temperamental, sometimes it seems to work, sometimes it doesn't, images don't seem to display either but that doesn't bother me too much. I'm using a very cut down layout using STS templates. the current setup is 3 categories each with 2 subcategories, here's the source code it outputs:

<!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=iso-8859-1">
<title>JMB Distribution</title>
<base href="http://spiraloz.com/jmbdist/">

<!-- start get_javascript(applicationtop2header) //-->

<!-- end get_javascript(applicationtop2header) //-->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="jmb.css" />
<!--[if IE 6]>
<style type="text/css">

#content {

margin: 0;
padding-right: 250px;
display: inline;

}

#mainbody {

margin: 0;
padding: 10px;
float: right;

}

</style>
<![endif]-->

</style>

<title>JMB - Distribution</title>
</head>
<body>


<div id="container">

	<div id="top">

		<div style="float:left; margin: 0; padding: 0;">
		<img src="images/head_left.jpg" width="501" height="136" border="0" alt="JMB Distribution" />
		</div>

		<div style="float:right; margin: 0; padding: 0;">

		<img src="images/head_right.jpg" width="263" height="136" border="0" alt="Worldwide" />
		</div>

	</div>

	<div id="content">

		<div id="column">
		<span class="title">Browse By Category</span><br />
		<!-- yahootreemenu  //-->
	  <tr>

		<td>

<table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">
 <tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
 </tr>
 <tr>
<td class="boxText">

<div id="yahooTreeMenu"></div>
<link rel="stylesheet" type="text/css" href="tree.css">

<script type="text/javascript" src="includes/YAHOO.js"></script>
<script type="text/javascript" src="includes/treeview.js"></script>
<script type="text/javascript" src="includes/loadNodes.js"></script>
<script type="text/javascript">
var tree;
var nodes = new Array();
var nodeIndex =0;
var root;
var tmpNode;

function treeInit() {
 tree = new YAHOO.widget.TreeView("yahooTreeMenu");
 root = tree.getRoot();
 loadTree();
 tree.draw();
}

function loadTree() {
 nodes[21] = new YAHOO.widget.MenuNode({label: "02 Accessories (1)"}, root, false);
 nodes[21].data = new nodeData(21, 21);
 nodes[21].multiExpand = true;
 nodes[21].setDynamicLoad(loadDataForNode);
 nodes[22] = new YAHOO.widget.MenuNode({label: "iMate Accessories (1)"}, root, false);
 nodes[22].data = new nodeData(22, 22);
 nodes[22].multiExpand = true;
 nodes[22].setDynamicLoad(loadDataForNode);
 nodes[23] = new YAHOO.widget.MenuNode({label: "Blackberry Accessories"}, root, false);
 nodes[23].data = new nodeData(23, 23);
 nodes[23].multiExpand = true;
 nodes[23].setDynamicLoad(loadDataForNode);
}

function  loadDataForNode(node, onCompleteCallback) {
 var request = "categories.php?cPath=" + node.data.id;
 makeRequest(request, node, onCompleteCallback);
}

treeInit();
</script>

<noscript>
<a href="http://spiraloz.com/jmbdist/index.php?cPath=21">02 Accessories-></a> (1)<br /><a href="http://spiraloz.com/jmbdist/index.php?cPath=22">iMate Accessories-></a> (1)<br /><a href="http://spiraloz.com/jmbdist/index.php?cPath=23">Blackberry Accessories-></a><br />
</noscript>

</td>
 </tr>
 <tr>

<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
 </tr>
</table>

		</td>
	  </tr>
<!-- yahootreemenu_eof //-->

		<br />
		<span class="title">Browse By Manufacturer</span><br />

		<!-- manufacturers //-->
	  <tr>
		<td>

<table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">
 <tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
 </tr>
 <tr>
<td class="boxText"><form name="manufacturers" action="http://spiraloz.com/jmbdist/index.php" method="get"><select name="manufacturers_id" onChange="this.form.submit();" size="1" style="width: 80%"><option value="" SELECTED>Please Select</option><option value="12">Blackberry</option><option value="11">iMate</option><option value="13">JMB</option><option value="10">O2</option></select></form></td>

 </tr>
 <tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
 </tr>
</table>

		</td>
	  </tr>
<!-- manufacturers_eof //-->

		<br />

		<span class="title">Search for a Product</span><br />
		<!-- search //-->
	  <tr>
		<td>

<table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">
 <tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
 </tr>

 <tr>
<td align="center" class="boxText"><form name="quick_find" action="http://spiraloz.com/jmbdist/advanced_search_result.php" method="get"><input type="text" name="keywords" size="10" maxlength="30" style="width: 95px"> <input type="image" src="includes/languages/english/images/buttons/button_quick_find.gif" border="0" alt="Quick Find" title=" Quick Find "><br>Use keywords to find the product you are looking for.<br><a href="http://spiraloz.com/jmbdist/advanced_search.php"><b>Advanced Search</b></a></form></td>
 </tr>
 <tr>
<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>
 </tr>
</table>

		</td>

	  </tr>
<!-- search_eof //-->

		<br />
		<br />
		<br />
		<br />
		<br />
		<br />
		<br />

		<br />
		<br />

		</div>

		<div id="mainbody">
		<a href="http://spiraloz.com" class="headerNavigation">Top</a> » <a href="http://spiraloz.com/jmbdist/index.php" class="headerNavigation">Catalog</a><br /><br />

<!-- start Default Content //-->
<table border="0" width="100%" cellspacing="0" cellpadding="0">

  <tr>
	<td><table border="0" width="100%" cellspacing="0" cellpadding="0">
	  <tr>
		<td class="pageHeading">Welcome to JMB Distribution</td>
		<td class="pageHeading" align="right"><img src="images/table_background_default.gif" border="0" alt="Welcome to JMB Distribution" title=" Welcome to JMB Distribution " width="150" height="150"></td>
	  </tr>
	</table></td>
  </tr>

  <tr>
	<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
  </tr>
  <tr>
	<td><table border="0" width="100%" cellspacing="0" cellpadding="0">
	  <tr>
		<td class="main"></td>
	  </tr>
	  <tr>

		<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
	  </tr>
	  <tr>
		<td class="main"></td>
	  </tr>
	  <tr>
		<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td>
	  </tr>
	  <tr>

		<td><!-- new_products //-->

<table border="0" width="100%" cellspacing="0" cellpadding="2">
 <tr>
<td align="center" class="smallText" width="33%" valign="top"><a href="http://spiraloz.com/jmbdist/product_info.php?products_id=29"><img src="images/car-adapter.jpg" border="0" alt="Imate XDA IIi/IIS Car Charger" title=" Imate XDA IIi/IIS Car Charger " width="200" height="200"></a><br><a href="http://spiraloz.com/jmbdist/product_info.php?products_id=29">Imate XDA IIi/IIS Car Charger</a><br>$5.00</td>
<td align="center" class="smallText" width="33%" valign="top"><a href="http://spiraloz.com/jmbdist/product_info.php?products_id=28"><img src="images/car-adapter.jpg" border="0" alt="O2 Atom DC/Car Charger" title=" O2 Atom DC/Car Charger " width="200" height="200"></a><br><a href="http://spiraloz.com/jmbdist/product_info.php?products_id=28">O2 Atom DC/Car Charger</a><br>$5.00</td>
 </tr>
</table>

<!-- new_products_eof //-->
</td>
	  </tr>
	</table></td>
  </tr>
</table>
<!-- end Default Content //-->

		</div>

	</div>


	<div class="clear"></div>

			<div id="base">

		<div style="float:left; margin: 0; padding: 0;">
		<img src="images/base_left.jpg" width="250" height="54" border="0" alt="BASE" />
		</div>

		<div style="float:right; margin: 0; padding: 0;">
		<img src="images/base_right.jpg" width="50" height="54" border="0" alt="BASE" />
		</div>

	</div>


</div>

</body>
</html>

sebconn · April 12, 2007

Ok so I have the images working now, which gives me a bit more of an idea as to what is happening. When you first load the page, and open a category, it just loads indefinitely. If you click on any other link to a product, or choose a manufacturer, it works fine after it's clicked.

sebconn · April 16, 2007

anyone at all got an idea?

Drako · July 10, 2007

Anyone got this to work with subfolder?

abbys99 · November 15, 2007

Hi,

I've find out how to get it work when your site is within a subfolder :

Within the file : yahootreemenu.php

Change

.  '  var request = "categories.php?cPath=" + node.data.id;' . "\n"

To

.  '  var request = "[absolut_path_to_categories.php]/categories.php?cPath=" + node.data.id;' . "\n"

in my case

.  '  var request = "http://127.0.0.1/eCommerce/categories.php?cPath=" + node.data.id;' . "\n"

Then i had another bug, because categories.php was generating wrong xml files.

Within catagories.php files i have change :

	  echo tep_href_link(FILENAME_DEFAULT, 'cPath=' . $categories[$cat]['path']) . "\n";

To

	  $temp = tep_href_link(FILENAME_DEFAULT, 'cPath=' . $categories[$cat]['path']) . "\n";
  $temp = explode('&',$temp);
  echo $temp[0] . '&' . $temp[1];

Still i have problems with language changes... but i'm working on and will keep you posted.

Bye

jackanderson · December 24, 2007

I have a few questions about this contrib.

1. How can I get the text bold? I set font-weight: bold; in tree.css but that doesn't help.

2. I would like to have a mouse over image everywhere. It works when there are subcategories. But I would like them everywhere. How do I do this?

3. Also I would like to have a color change in the background when I mouse over. Just like on this site What's your flavor?. I can't get it done.

Thank you for the help :thumbsup:

It's a great contrib.

1. Try this. In /includes/boxes/yahootreemenu.php, line 23, remove "</div>" and put it on line 87 (after </noscript>). This will make sure that the menu has the class "yahootreemenu". Now got your css file (stylesheet.css or tree.css) and at the end of the file add this.

# yahootreemenu a { 
font-weight: 700; /* font is bold now */
}

3. Following the steps of answer 1, add this..

# yahootreemenu a:hover { 
background: #408BCA; /* What's your Flavor subcategory background */
color: #fff; /*What's your Flavor mouseover text color*/
}

Maybe not the nicest way to do it.. but does work... :)

Cheers..

jackanderson · December 24, 2007

Some how i cant edit my post... Just to note, there's no space between "#" and the "yahootreemenu" code..

so it should read..

1.

#yahootreemenu a {
font-weight: 700; /* font is bold now */
}

3.

#yahootreemenu a:hover {
background: #408BCA; /* What's your Flavor subcategory background */
color: #fff; /*What's your Flavor mouseover text color*/
}

Cheers..

Yahoo Tree Menu With AJAX

Recommended Posts

azer

azer

jeffshadap

jeffshadap

Andrew_Yer

Guest

Andrew_Yer

azer

Andrew_Yer

Andrew_Yer

azer

Andrew_Yer

azer

Andrew_Yer

valley

Guest

rockstar_clothing

EgonS

sebconn

sebconn

sebconn

Drako

abbys99

jackanderson

jackanderson

Join the conversation

Browse

Activity