X-Cart forums - Drop down/flyout categories... where do I start?

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Drop down/flyout categories... where do I start? (https://forum.x-cart.com/showthread.php?t=4502)

Drop down/flyout categories... where do I start?

I want to make a fly out version of my cateogy menu.... Something I am used to doing in Dreamweaver in static web sites, but not in a site like this.

Is there a plug in available, even a commecially available one, that will make this easier? I would like categoires to flyout showing subcategories, etc.

Thanks

Is it just one level of subcategories that you would like?

also what version are you running?

Actually...here's the code for include/categories.php:

Code:

<?

/*****************************************************************************\

+-----------------------------------------------------------------------------+

| X-Cart                                                                      |

| Copyright (c) 2001-2003 Ruslan R. Fazliev <rrf@rrf.ru>                      |

| All rights reserved.                                                        |

+-----------------------------------------------------------------------------+

| PLEASE READ  THE FULL TEXT OF SOFTWARE LICENSE AGREEMENT IN THE "COPYRIGHT" |

| FILE PROVIDED WITH THIS DISTRIBUTION. THE AGREEMENT TEXT IS ALSO AVAILABLE  |

| AT THE FOLLOWING URL: http://www.x-cart.com/license.php                     |

|                                                                             |

| THIS  AGREEMENT  EXPRESSES  THE  TERMS  AND CONDITIONS ON WHICH YOU MAY USE |

| THIS SOFTWARE   PROGRAM   AND  ASSOCIATED  DOCUMENTATION   THAT  RUSLAN  R. |

| FAZLIEV (hereinafter  referred to as "THE AUTHOR") IS FURNISHING  OR MAKING |

| AVAILABLE TO YOU WITH  THIS  AGREEMENT  (COLLECTIVELY,  THE  "SOFTWARE").   |

| PLEASE   REVIEW   THE  TERMS  AND   CONDITIONS  OF  THIS  LICENSE AGREEMENT |

| CAREFULLY   BEFORE   INSTALLING   OR  USING  THE  SOFTWARE.  BY INSTALLING, |

| COPYING   OR   OTHERWISE   USING   THE   SOFTWARE,  YOU  AND  YOUR  COMPANY |

| (COLLECTIVELY,  "YOU")  ARE  ACCEPTING  AND AGREEING  TO  THE TERMS OF THIS |

| LICENSE   AGREEMENT.   IF  YOU    ARE  NOT  WILLING   TO  BE  BOUND BY THIS |

| AGREEMENT, DO  NOT INSTALL OR USE THE SOFTWARE.  VARIOUS   COPYRIGHTS   AND |

| OTHER   INTELLECTUAL   PROPERTY   RIGHTS    PROTECT   THE   SOFTWARE.  THIS |

| AGREEMENT IS A LICENSE AGREEMENT THAT GIVES  YOU  LIMITED  RIGHTS   TO  USE |

| THE  SOFTWARE   AND  NOT  AN  AGREEMENT  FOR SALE OR FOR  TRANSFER OF TITLE.|

| THE AUTHOR RETAINS ALL RIGHTS NOT EXPRESSLY GRANTED BY THIS AGREEMENT.      |

|                                                                             |

| The Initial Developer of the Original Code is Ruslan R. Fazliev             |

| Portions created by Ruslan R. Fazliev are Copyright (C) 2001-2003           |

| Ruslan R. Fazliev. All Rights Reserved.                                     |

+-----------------------------------------------------------------------------+

\*****************************************************************************/



#

# $Id: categories.php,v 1.46.2.1 2003/06/02 11:57:44 svowl Exp $

#



#

# For users some categories may be disabled

#



if ($current_area == "C") {

        $membership_condition = " AND ($sql_tbl[categories].membership='$user_account[membership]' OR $sql_tbl[categories].membership='') ";

} else {

        $membership_condition = "";

}



// funkydunk modification

// amended query to get the main cat and subcat for each record

$categories_data = func_query("select $sql_tbl[categories].*, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', -1) as category_name, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', 1) as maincat, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', 2) as subcat from $sql_tbl[categories] ".($current_area=="C"?"where $sql_tbl[categories].avail='Y' $membership_condition ":"")." group by $sql_tbl[categories].categoryid order by ".($current_area=="C" ? "order_by" : "category"));





#

# Put all categories into $all_categories array and find current_category

# by categoryid stored in $cat

#

if(!$categories_data) $categories_data = array();





foreach($categories_data as $k=>$category_data) {



        if ($current_area == "C") {

                $int_res = func_query_first("SELECT * FROM $sql_tbl[categories_lng] WHERE code='$store_language' AND categoryid='$category_data[categoryid]'");

                if ($int_res["category"])

                        $categories_data[$k]["category_name"] = $category_data["category_name"] = $int_res["category"];

                if ($int_res["description"])

                        $categories_data[$k]["description"] = $category_data["description"] = $int_res["description"];

        }



        if ($category_data["categoryid"]==$cat) {

                $current_category = $category_data;

        }

        

        // funkydunk code 

   if(strstr($category_data["category"],"/")) { 

           if ($category_data["category"] == $category_data["subcat"]){

           // echo "got one";

           // after taking off the initial category name this checks to see if this is only a sub category with no categories below it.

           // if i didn't do this the subcategory would be duplicated in the list

           $categories_data[$k]["subcatonly"]="true";

           }

   } 

   // end of funkydunk amended code





$all_categories = $categories_data;

// func_print_r ($all_categories);

}



#

# Put all root categories to $categories array

# Put all subcategories of current_category to $categories array

#



foreach($all_categories as $all_category) {



        $category=$all_category["category"];



        $cur_dir_len = strlen($current_category["category"]);



        if(!strstr($category,"/")) {

            $categories[]=$all_category;

                        if(empty($current_category)) { 

                                $subcategories[]=$all_category;

                        }



        }



        if(substr($category,0,$cur_dir_len+1) == $current_category["category"]."/" and $category!=$current_category["category"]) 

                if(!strstr(substr($category,$cur_dir_len+1),"/")) {

                        $all_category["category"]=ereg_replace("^.*/","",$all_category["category"]);

                        $subcategories[]=$all_category;

                }



}





#

# Put  subcategory_count  to $subcategories array

#

if ($subcategories)

foreach($subcategories as $key =>$subcategory) {

        

        $subcategory["subcategory_count"]=0;



        foreach($all_categories as $all_category) {

                if ($all_category["categoryid"]==$subcategory["categoryid"]) {                

                        $cur_dir_len = strlen($all_category["category"]);

                        $current_subcategory=$all_category["category"]; 

                }                

        }

        

        foreach($all_categories as $all_category) {

                $category=$all_category["category"];

                if(substr($category,0,$cur_dir_len+1) == $current_subcategory."/" and $category!=$current_subcategory) 

                        if(!strstr(substr($category,$cur_dir_len+1),"/")) 

                                $subcategory["subcategory_count"]++;

        }

        $subcategories[$key]["subcategory_count"]=$subcategory["subcategory_count"];

}



#

# Generate category sequence, i.e.

# Books, Books/Poetry, Books/Poetry/Philosophy ...

#



$current_category_array = explode("/",$current_category["category"]);

$prev = $current_category_array[0];

list($key,$val)=each($current_category_array);



$new_array = array($val);



while(list($key,$val)=each($current_category_array)) {

        $new_array[] = $prev."/".$val;

        $prev = $prev."/".$val;

}

unset($current_category_array);



#

# Generate array for displaying categories sequence in location

#



$category_location=array();

reset($all_categories);



$my_cats = array ();



foreach($all_categories as $all_category) {



        $categoryid=$all_category["categoryid"];

        $category=$all_category["category"];



        $my_cats [$categoryid] = $category;

}



asort ($my_cats);



foreach ($my_cats as $categoryid => $category) {

        reset ($new_array);

        while(list($key,$val)=each($new_array)) {

                if ($val==$category) {

                        foreach($categories_data as $category_data) {

                                if ($category_data["categoryid"] == $categoryid)

                                        $val = $category_data["category_name"];

                        }

                        $category_location[]=array(ereg_replace(".*/","",$val),"home.php?cat=".$categoryid);

                }

        }

}



#

# Assign Smarty variables

#



$smarty->assign("allcategories",$all_categories);

$smarty->assign("categories",$categories);

$smarty->assign("subcategories",$subcategories);

$smarty->assign("current_category",$current_category);

$smarty->assign("cat",$cat);

?>

I am running the most recent version of X-Cart. We just installed it last week.

I would actually like the menus to show more than one level deep of subcategorie, at least one more.

I am looking over this chunk of code you sent me now to see if it makes sense to me. I'm not especially experienced with this kind of thing.

Jeff

Jeff

I am working on a downloadable mod for drop down menus whereby you can just switch this on/off in admin and have all the submenus poluated by the database.

I will let you know when it is complete.

Is that Sub Cat thing work with ver 3.4.6?

It will work with 3.4.x and 3.5.x versions when completed....still about a week or so away I am afraid

Hi Funky,

I definitely want this mod too. :) I need a horozontal category list where each parent category goes into its own table cell. Will that type of set up work with what you're doing?

Thanks,
Cameron

Can it be done like the OS Commerce style?

Can it be done like the OS Commerce style?

Main Cat
Sub Cat 1
Sub Cat 2
Main Cat
Main Cat
Main Cat

Quote:

"funkydunk"]Actually...here's the code for include/categories.php:

Hi Funkydunk,

I'm trying to display all categories as a tree.
How do you process subcategories in the loop?
Here is my "categories.tpl"

Code:

{section name=cat_num loop=$categories}

<div id='menuLabel{%cat_num.index%}' class='menuLabel'>{ $categories[cat_num].category_name|escape }</div>



<div id='menu{%cat_num.index%}' class='menuBox'>

  {section name=subcat_num loop=$subcategories}

    { $subcategories[subcat_num].category_name }




   {/section}

</div>

{/section}

loop=$subcategories is not correct. Is it possible to loop only subcategories for this category here with mod to categories.php you posted?[/quote]

Wonder if Funkydunk finished this cat mod ?

I have it running on a couple of 3.4.x sites in different guises, but have given up on putting a full blown mod together due to the fancy categories mod of xcart 3.5.0.

The drop down cats are being used on:
kidsgloriouskids.co.uk
cable-shop.co.uk

The are both live sites so please no dummy orders.

Quote:

Originally Posted by funkydunk

I have it running on a couple of 3.4.x sites in different guises, but have given up on putting a full blown mod together due to the fancy categories mod of xcart 3.5.0.

Where can I get this fancy categories mod of xcart 3.5.0?
X-cart guys say they do not have it.

Any help with categories.tpl ? I need exactly what you've done.
Maybe I can buy it from you. Please let me know.
anton@27stars.com

ok cos i am in a good mood today...

include/categories.php

Code:

<?

/*****************************************************************************\

+-----------------------------------------------------------------------------+

| X-Cart                                                                      |

| Copyright (c) 2001-2003 Ruslan R. Fazliev <rrf@rrf.ru>                      |

| All rights reserved.                                                        |

+-----------------------------------------------------------------------------+

| PLEASE READ  THE FULL TEXT OF SOFTWARE LICENSE AGREEMENT IN THE "COPYRIGHT" |

| FILE PROVIDED WITH THIS DISTRIBUTION. THE AGREEMENT TEXT IS ALSO AVAILABLE  |

| AT THE FOLLOWING URL: http://www.x-cart.com/license.php                     |

|                                                                             |

| THIS  AGREEMENT  EXPRESSES  THE  TERMS  AND CONDITIONS ON WHICH YOU MAY USE |

| THIS SOFTWARE   PROGRAM   AND  ASSOCIATED  DOCUMENTATION   THAT  RUSLAN  R. |

| FAZLIEV (hereinafter  referred to as "THE AUTHOR") IS FURNISHING  OR MAKING |

| AVAILABLE TO YOU WITH  THIS  AGREEMENT  (COLLECTIVELY,  THE  "SOFTWARE").   |

| PLEASE   REVIEW   THE  TERMS  AND   CONDITIONS  OF  THIS  LICENSE AGREEMENT |

| CAREFULLY   BEFORE   INSTALLING   OR  USING  THE  SOFTWARE.  BY INSTALLING, |

| COPYING   OR   OTHERWISE   USING   THE   SOFTWARE,  YOU  AND  YOUR  COMPANY |

| (COLLECTIVELY,  "YOU")  ARE  ACCEPTING  AND AGREEING  TO  THE TERMS OF THIS |

| LICENSE   AGREEMENT.   IF  YOU    ARE  NOT  WILLING   TO  BE  BOUND BY THIS |

| AGREEMENT, DO  NOT INSTALL OR USE THE SOFTWARE.  VARIOUS   COPYRIGHTS   AND |

| OTHER   INTELLECTUAL   PROPERTY   RIGHTS    PROTECT   THE   SOFTWARE.  THIS |

| AGREEMENT IS A LICENSE AGREEMENT THAT GIVES  YOU  LIMITED  RIGHTS   TO  USE |

| THE  SOFTWARE   AND  NOT  AN  AGREEMENT  FOR SALE OR FOR  TRANSFER OF TITLE.|

| THE AUTHOR RETAINS ALL RIGHTS NOT EXPRESSLY GRANTED BY THIS AGREEMENT.      |

|                                                                             |

| The Initial Developer of the Original Code is Ruslan R. Fazliev             |

| Portions created by Ruslan R. Fazliev are Copyright (C) 2001-2003           |

| Ruslan R. Fazliev. All Rights Reserved.                                     |

+-----------------------------------------------------------------------------+

\*****************************************************************************/



#

# $Id: categories.php,v 1.46.2.1 2003/06/02 11:57:44 svowl Exp $

#



#

# For users some categories may be disabled

#



if ($current_area == "C") {

        $membership_condition = " AND ($sql_tbl[categories].membership='$user_account[membership]' OR $sql_tbl[categories].membership='') ";

} else {

        $membership_condition = "";

}



// funkydunk modification

// amended query to get the main cat and subcat for each record

$categories_data = func_query("select $sql_tbl[categories].*, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', -1) as category_name, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', 1) as maincat, SUBSTRING_INDEX($sql_tbl[categories].category, '\/', 2) as subcat from $sql_tbl[categories] ".($current_area=="C"?"where $sql_tbl[categories].avail='Y' $membership_condition ":"")." group by $sql_tbl[categories].categoryid order by ".($current_area=="C" ? "order_by" : "category"));





#

# Put all categories into $all_categories array and find current_category

# by categoryid stored in $cat

#

if(!$categories_data) $categories_data = array();





foreach($categories_data as $k=>$category_data) {



        if ($current_area == "C") {

                $int_res = func_query_first("SELECT * FROM $sql_tbl[categories_lng] WHERE code='$store_language' AND categoryid='$category_data[categoryid]'");

                if ($int_res["category"])

                        $categories_data[$k]["category_name"] = $category_data["category_name"] = $int_res["category"];

                if ($int_res["description"])

                        $categories_data[$k]["description"] = $category_data["description"] = $int_res["description"];

        }



        if ($category_data["categoryid"]==$cat) {

                $current_category = $category_data;

        }

        

        // funkydunk code 

   if(strstr($category_data["category"],"/")) { 

           if ($category_data["category"] == $category_data["subcat"]){

           // echo "got one";

           // after taking off the initial category name this checks to see if this is only a sub category with no categories below it.

           // if i didn't do this the subcategory would be duplicated in the list

           $categories_data[$k]["subcatonly"]="true";

           }

   } 

   // end of funkydunk amended code





$all_categories = $categories_data;

// func_print_r ($all_categories);

}



#

# Put all root categories to $categories array

# Put all subcategories of current_category to $categories array

#



foreach($all_categories as $all_category) {



        $category=$all_category["category"];



        $cur_dir_len = strlen($current_category["category"]);



        if(!strstr($category,"/")) {

            $categories[]=$all_category;

                        if(empty($current_category)) { 

                                $subcategories[]=$all_category;

                        }



        }



        if(substr($category,0,$cur_dir_len+1) == $current_category["category"]."/" and $category!=$current_category["category"]) 

                if(!strstr(substr($category,$cur_dir_len+1),"/")) {

                        $all_category["category"]=ereg_replace("^.*/","",$all_category["category"]);

                        $subcategories[]=$all_category;

                }



}





#

# Put  subcategory_count  to $subcategories array

#

if ($subcategories)

foreach($subcategories as $key =>$subcategory) {

        

        $subcategory["subcategory_count"]=0;



        foreach($all_categories as $all_category) {

                if ($all_category["categoryid"]==$subcategory["categoryid"]) {                

                        $cur_dir_len = strlen($all_category["category"]);

                        $current_subcategory=$all_category["category"]; 

                }                

        }

        

        foreach($all_categories as $all_category) {

                $category=$all_category["category"];

                if(substr($category,0,$cur_dir_len+1) == $current_subcategory."/" and $category!=$current_subcategory) 

                        if(!strstr(substr($category,$cur_dir_len+1),"/")) 

                                $subcategory["subcategory_count"]++;

        }

        $subcategories[$key]["subcategory_count"]=$subcategory["subcategory_count"];

}



#

# Generate category sequence, i.e.

# Books, Books/Poetry, Books/Poetry/Philosophy ...

#



$current_category_array = explode("/",$current_category["category"]);

$prev = $current_category_array[0];

list($key,$val)=each($current_category_array);



$new_array = array($val);



while(list($key,$val)=each($current_category_array)) {

        $new_array[] = $prev."/".$val;

        $prev = $prev."/".$val;

}

unset($current_category_array);



#

# Generate array for displaying categories sequence in location

#



$category_location=array();

reset($all_categories);



$my_cats = array ();



foreach($all_categories as $all_category) {



        $categoryid=$all_category["categoryid"];

        $category=$all_category["category"];



        $my_cats [$categoryid] = $category;

}



asort ($my_cats);



foreach ($my_cats as $categoryid => $category) {

        reset ($new_array);

        while(list($key,$val)=each($new_array)) {

                if ($val==$category) {

                        foreach($categories_data as $category_data) {

                                if ($category_data["categoryid"] == $categoryid)

                                        $val = $category_data["category_name"];

                        }

                        $category_location[]=array(ereg_replace(".*/","",$val),"home.php?cat=".$categoryid);

                }

        }

}



#

# Assign Smarty variables

#



$smarty->assign("allcategories",$all_categories);

$smarty->assign("categories",$categories);

$smarty->assign("subcategories",$subcategories);

$smarty->assign("current_category",$current_category);

$smarty->assign("cat",$cat);

?>

skin1/customer/categories.tpl

Code:

{* $Id: categories.tpl, modified by funkydunk 2003*}



{capture name=menu}

<div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,'on')" onMouseout="highlightmenu(event,'off');dynamichide(event)">

</div>

{if $config.General.root_categories eq "Y"}

{section name=cat_num loop=$categories}

{assign var="tmp" value="0"}



{section name=cat loop=$allcategories}

{if $allcategories[cat].maincat eq $categories[cat_num].category_name}

{if $allcategories[cat].subcatonly}{assign var="tmp" value="1"}{/if}

{/if}

{/section}



<font class=CategoriesList>

<a href="home.php?cat={ $categories[cat_num].categoryid }" class="VertMenuItems" {if $tmp eq 1}onMouseover="showmenu(event,linkset[{$smarty.section.cat_num.index}])" onMouseout="delayhidemenu()"{/if}>

{ $categories[cat_num].category_name|escape }</a></font>




{/section}

{else} {section name=cat_num loop=$subcategories}

<font class=CategoriesList>{ $subcategories[cat_num].category_name|escape }</font>




{/section}



{/if}

{/capture}

{ include file="menu.tpl" dingbats="dingbats_categorie.gif" menu_title=$lng.lbl_categories menu_content=$smarty.capture.menu }

new template
customer/dropdown.tpl

Code:

{* dropdown.tpl funkydunk 2003 *}

{literal}

<script language="JavaScript1.2">



//Pop-it menu- By Dynamic Drive

//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com

//This credit MUST stay intact for use



var linkset=new Array()

//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

{/literal}



{section name=cat_num loop=$categories}

{assign var="temp" value="0"}

{section name=cat loop=$allcategories}

{if $allcategories[cat].maincat eq $categories[cat_num].category_name}

{if $allcategories[cat].subcatonly}

{$temp}

{if $temp gt 0}

linkset[{$smarty.section.cat_num.index}] +='<div class="menuitems">{$allcategories[cat].category_name}</div>'

{else}

linkset[{$smarty.section.cat_num.index}] ='<div class="menuitems">{$allcategories[cat].category_name}</div>'

{/if}



{math equation="temp+1" temp=$temp assign=temp}

{/if}

{/if}

{/section}

{/section}



{literal}



////No need to edit beyond here



var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

var ns6=document.getElementById&&!document.all

var ns4=document.layers



function showmenu(e,which){



if (!document.all&&!document.getElementById&&!document.layers)

return



clearhidemenu()



menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""

menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj



if (ie4||ns6)

menuobj.innerHTML=which

else{

menuobj.document.write('<layer name=gui bgColor=#081589 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')

menuobj.document.close()

}



menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width

menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height

eventX=ie4? event.clientX : ns6? e.clientX : e.x

eventY=ie4? event.clientY : ns6? e.clientY : e.y



//Find out how close the mouse is to the corner of the window

var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX

var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY



//if the horizontal distance isn't enough to accomodate the width of the context menu

if (rightedge<menuobj.contentwidth)

//move the horizontal position of the menu to the left by it's width

menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth

else

//position the horizontal position of the menu where the mouse was clicked

// menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX



//same concept with the vertical position

if (bottomedge<menuobj.contentheight)

menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight

else

menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY

menuobj.thestyle.visibility="visible"

return false

}



function contains_ns6(a, b) {

//Determines if 1 element in contained in another- by Brainjar.com

while (b.parentNode)

if ((b = b.parentNode) == a)

return true;

return false;

}



function hidemenu(){

if (window.menuobj)

menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"

}



function dynamichide(e){

if (ie4&&!menuobj.contains(e.toElement))

hidemenu()

else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))

hidemenu()

}



function delayhidemenu(){

if (ie4||ns6||ns4)

delayhide=setTimeout("hidemenu()",500)

}



function clearhidemenu(){

if (window.delayhide)

clearTimeout(delayhide)

}



function highlightmenu(e,state){

if (document.all)

source_el=event.srcElement

else if (document.getElementById)

source_el=e.target

if (source_el.className=="menuitems"){

source_el.id=(state=="on")? "mouseoverstyle" : ""

}

else{

while(source_el.id!="popmenu"){

source_el=document.getElementById? source_el.parentNode : source_el.parentElement

if (source_el.className=="menuitems"){

source_el.id=(state=="on")? "mouseoverstyle" : ""

}

}

}

}



if (ie4||ns6)

document.onclick=hidemenu



</script>

{/literal}

lastly put an

{include file="customer/dropdown.tpl"} into the h<head> part of customer/home.tpl

SHould work nicely for you on version 3.4.x sites

Quote:

Originally Posted by funkydunk

ok cos i am in a good mood today...

Man,

I think you just saved my sanity. This is the first good news for today and it's already noon. :wink:

Thank you,
:D

First of all, let me say you are the coolest and the greatest.
Works fine in 3.5.1
From all followers of the master : thank you :lol:

Second, for anybody who is trying to implement this mod of the week,
you will have to add this code to skin1.css

Code:

.menuskin{

        position:absolute;

        width:165px;

        background-color:#EEEEEE;

        border:1px solid #003366;

        line-height:18px;

        z-index:100;

        visibility:hidden;

        font-size: 11px;

        left: 150px;

}



.menuskin a{

text-decoration:none;

color:black;

padding-left:10px;

padding-right:10px;

}

Thanks again!

I put everything into place as described on this thread,but I get a this page error

Line 10266
Char 1
Error Object Expected
Code 0
Url http://www.centralsatellite.com/store/customer/home.php

What am I doing wrong?

Thank's
Censat :o

nice bit of code there! Successfully implemented in 3.5.1. Does this script only read 'Cat1' > 'Cat2' from the database? If so,is there a work around to read further categories e.g. 'Cat 1' > 'Cat 2' > 'Cat 3'?

thanks

Glad you are in a good mood, thanx, I will give it a try.

sorry forgot the css:

Code:

.menuskin{

        position:absolute;

        width:165px;

        background-color:#EEEEEE;

        border:1px solid #003366;

        line-height:18px;

        z-index:100;

        visibility:hidden;

        font-size: 11px;

        left: 150px;

}



.menuskin a{

text-decoration:none;

color:black;

padding-left:10px;

padding-right:10px;

}



#mouseoverstyle{

        background-color:#003366;

}



#mouseoverstyle a{

        color:#FFCC00;

        text-decoration: none;

}

Thanks for sharing this with us all Duncan!!

One question: Do I only have to tweak the .css file to make the menu drop down from horozontially listed categories across the top of my screen?

Much appreciated.

Cameron

This is awesome!

Can you tell me how "If ticked, the categories list always shows root categories" affects this mod?

I notice the categories menu always shows the root category with this mod regardless of how many levels deep I am but if I uncheck the above (in admin/general settings/general options) the menus no longer fly out.

absolutely :)

If show root is ticked then the fly out works if not it will show the normal subcategories.

Hi Funkydunk,

Any easy way to make category cell to change color on mouseover same way as subcategory does? I think most people would like to see this.

I have implemented a 'highlight' cell colour on mouse over.

Use the following in your 'skin1.css' file:

.CategoriesList {
FONT-SIZE: 12px;
text-decoration:none;
}
.CategoriesList a:hover{
width:100%;
text-decoration:none;
background-color: #ffffff;}

Hope this helps you out :).

Quote:

Originally Posted by laureon

I have implemented a 'highlight' cell colour on mouse over.

Use the following in your 'skin1.css' file:

This's way too easy :-)
I added a half page javascript to do almost the same.

Thanks, will play with this settings.

css is lurverly.... 8)

Hi guys,

For some reason on one of computers this dropdown menu is going up instead of down. same IE 6. Any ideas how to fix it? Our javascript guy is puzzled as well. :?:

Thanks,

In you skin.css lower the value on the line that says "line-height:18px;"

to a lower number like 14 or 15 you may have to try to see what work's best by changing it a couple of times

.menuskin{
position:absolute;
width:165px;
background-color:#EEEEEE;
border:1px solid #003366;
line-height:18px; (HERE)
z-index:100;
visibility:hidden;
font-size: 11px;
left: 150px;

Quote:

Originally Posted by censat

In you skin.css lower the value on the line that says "line-height:18px;"

Thanks. But this was something different. If you resize browser window to the size (same as 800x600 resolution) and where is not enouth space for dropdown to the bottom it's going up by script logic. I just changed the logic to go up only half way in this case. Works nicely. Now it's going down if there is enouth space and align itself at the middle if space is limited below. 8)

Code:

//same concept with the vertical position 

if (bottomedge<menuobj.contentheight) 

menuobj.thestyle.top=ie4? document.body.scrollTop+menuobj.contentheight/2+eventY-menuobj.contentheight : ns6? window.pageYOffset+menuobj.contentheight/2+eventY-menuobj.contentheight : eventY-menuobj.contentheight 

else 

menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY 

menuobj.thestyle.visibility="visible" 

return false 

}

I'm starting to like JavaScript. Will fire script guy tomorrow and write it myself :wink:

Quote:

Originally Posted by 27stars

I'm starting to like JavaScript. Will fire script guy tomorrow and write it myself :wink:

Poor guy, sure their is something he can do around.

On the other hand, you are right, JavaScript is great, you learn more and more everyday, very usefull and doesnt pound on the server (Client Side most of the time).

Great Job and thank you for sharing it...

is there a chance to add one more level on the category... we run our store with one main category, a sub category and a sub-sub-category

Will love to be able to display the third level when hoovering over the second level..

Re: one more level

Quote:

Originally Posted by jimeu

There is, but it will really hammer the page loading times and add significantly to the size of the pages. I had therefore decided to only run it one level down.

Thank you very much, This really is very good, makes the whole store much more user friendly.

We are still stocking our store.

but have a look here http://www.ttsunlock.com/xcart/customer/home.php

Still some work to do.

:D

One thing you guys neglected to think about was the html catalog, going all fancy can have a nice impact on customers user experience but not at your marketing expience, especially if you rely on the html catalog for search engine placement.

I've written a not-so-fancy php version similar to this, there is no mouse over flyouts or dhtml involved, its complete html catalog friendly, and will even keep a tab on where the user is by the var $cat so the user can easily see what category they are in while browsing products, etc. It works only on a 2-tier or 3-tier tree.

If anyones interested PM me for a demo url, this mod will be on cartlab for sell soon ;)

Quote:

Originally Posted by TTS Telecom

Very nice indeed.

This is a great mod!

Did anybody who made this work in 3.5.x adapt funkydunk's code in categories.php to their own, or did you just replace the existing categories.php with his?

If you adopted his code to the 3.5.x categories.php, please post it.

Thanks!
Cameron

Two different category drop downs I've done:

:arrow: www.extremepsi.com 3 tier category fly-out DHTML
:arrow: www.kegworks.com 3 tier category php based (on refresh)

The kegworks code is in 3.4.x but is portable to 3.5.x with ease. Granted the php based kegworks category list isn't as fancy but it is alot more usuable and will work in the HTML catalog without any adjustments as well as cross browser compatible. :wink: