Jump to content
Sign in to follow this  
azer

Yahoo Tree Menu With AJAX

Recommended Posts

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 ?


MS2

Share this post


Link to post
Share on other sites

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 andrew@cti.org.ua Thanks.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 !


MS2

Share this post


Link to post
Share on other sites
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://forums.oscommerce.com/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.

Share this post


Link to post
Share on other sites

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)


MS2

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 ?


MS2

Share this post


Link to post
Share on other sites
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 by Andrew_Yer

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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 by EgonS

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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..


Converge

Share this post


Link to post
Share on other sites

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..


Converge

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×