Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

tep_draw_categories_tree finally no recursion just one mysql_query


Recommended Posts

@@ArtcoInc
 
Sorry for the confusion - me culpa maxima! I posted here the code just on the fly, to avoid having to constantly write emails.

 

The initial idea was to use the menu box only in full view, in the collapsed view, however, the categories menu in header navbar.

In collapsed view, the categories menu slips pretty far down, what I find awkward. This was the reason for the two tags "hidden-xs hidden-sm" here.
 
J.J.
 
Link to comment
Share on other sites

  • Replies 57
  • Created
  • Last Reply

@@De Dokta I had this same issue several months ago. My 'solution' was to have the Categories box slide up above the body of the page ...

 

http://www.oscommerce.com/forums/topic/396958-2334bs-categories-above-body/

 

And thank you for all of your assistance.

 

Malcolm

 

PS: Then again, I only have two Categories, and no sub-categories ...

Link to comment
Share on other sites

  • 1 month later...

Hi Guys,

 

I have managed to get this working and now I just need to tweek it a little.

 

I could really do with help with the follow:

 

1. In image one you will see that I have changed the css to a white font when hovering over the category name, for some reason I can not make that apply to top level categories that have sub categories as in image 2

 

2. Because padding left is set to 8px then the hover is also padded, what needs changing to make the hover fill the whole row and not have padding?

 

3. I would like to place an icon in front of each top level category name but not in front of any subcats.

 

4. (last one I promise) I would like to put a dividing line between each category that spans the entire width of the box.

 

Thanks for any help.

 

Mark

Link to comment
Share on other sites

Hi

 

this concept with the templatable boxes and content modules is really great! And since I wanted to know if it's possible to add a new functionality like the categories menu based on gadlols code to the osc store without any change of the core files, I tried to put this JS categories menu into a templatable boxes module. And yes, it's possible! :D

There is one point where I was (and am) not sure what the best way is to handle it. This categories menu needs some css stylings to look and work properly. I put these css settings into a separate categories.css in the catalog folder and appended this css with a little JS to the <head> section of the store. That works - but is this a correct approach?

 

JS_categories_menu.zip

 

J.J.

Link to comment
Share on other sites

You can do that without any JavaScript. Just add something like this into the execute() method of your module:

        $header = '<link rel="stylesheet" type="text/css" href="path/to/categories.css" />' . PHP_EOL;

        $oscTemplate->addBlock($header, 'header_tags');

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

Hi Guys,

 

I have managed to get this working and now I just need to tweek it a little.

 

I could really do with help with the follow:

 

1. In image one you will see that I have changed the css to a white font when hovering over the category name, for some reason I can not make that apply to top level categories that have sub categories as in image 2

 

2. Because padding left is set to 8px then the hover is also padded, what needs changing to make the hover fill the whole row and not have padding?

 

3. I would like to place an icon in front of each top level category name but not in front of any subcats.

 

4. (last one I promise) I would like to put a dividing line between each category that spans the entire width of the box.

 

Thanks for any help.

 

Mark

 

@@PupStar Have you solved issues 1 & 2 already? If not, show us your current css settings for this box.

Link to comment
Share on other sites

@@PupStar Have you solved issues 1 & 2 already? If not, show us your current css settings for this box.

 

@@Tsimi - no lambros I have not sorted this yet, my css is

/* BOF CATEGORIES BOX */
.navMain {
  padding-left: 8px;
  margin-bottom: 0;
  list-style: none;
  text-decoration: none;
  font-size: 14px;
}
.navMain > li {
  position: relative;
  display: block;
}
.navMain > li > a {
  position: relative;
  display: inline-block;
  padding: 5px;
}
.navMain > li > a:hover,
.navMain > li > a:focus {
  text-decoration: none;
  background-color: #333745;
  color: #fff;
  width: 100%;
  
}
.navMain > li.disabled > a {
  color: #999;
}
.navMain > li.disabled > a:hover,
.navMain > li.disabled > a:focus {
  color: #fff;
  cursor: not-allowed;
  background-color: transparent;
}
.navMain .open > a,
.navMain .open > a:hover,
.navMain .open > a:focus {
  background-color: #eee;
  border-color: #428bca;
}
a.switch {
  float:right;
  margin-right:4px;
}
.light {
padding: 5px

}
.light:hover {
  background-color: #333745;
  color: #fff;
}

.nav-list.collapse{
  padding-left:10px;
  transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
}
/* EOF CATEGORIES BOX */

Thanks

Link to comment
Share on other sites

Before we go to the code changes there is something i need to explain.
Regarding icons;
You wanted to have icons in front of the parent category links which i couldn't completely achieve.
If a top category has sub-categories then it will have an icon in front of it.
But if the parent category has no sub-categories then the icon won't show.
The thing is that the code uses the same classes for parent categories without sub-cats and for the sub-cats itself.
I could add an icon in front of it but then all other sub-cats would have one too. Make sense?
So as long you keep sub-cats under the parent is no problem.
Maybe some categories crack can have a shot at it and find a good way to achieve that for all parent categories with or without sub-cats.

The other thing is to avoid any padding or space when the mouse hovers over i needed to remove some stuff which now causes the sub-categories to stay
at the same line as the parent categories. Normally they should move slightly (approx. 10px) to the right when the tree is opened. That won't happen anymore.
So either you accept a space on the left when mouse hovering, then remove the /* */ tags from the .nav-list.collapse class or you just leave it as is.

I tried to comment all the changes so that you see what i have done but in any case just backup your files just in case.
You need to add a new class (no-padding) to the bm_categories.php, replace the whole css code with mine below and the html_output.php
changes you can add manually or just replace the whole code with mine below.
 

CSS

/* BOF CATEGORIES BOX */
.navMain {
  padding-left: 0; /* removed 8px padding-left */
  margin-bottom: 0;
  list-style: none;
  text-decoration: none;
  font-size: 14px;
}
.navMain > li {
  position: relative;
  display: block;
}

/* NO SUB CAT LINK */
/* CHANGED */
.navMain > li > .nosub > a {
  position: relative;
  display: inline-block;
  padding: 10px; /* changed padding from 5px to 10px*/
}
/* CHANGED */
.navMain > li > .nosub > a:hover,
.navMain > li > .nosub > a:focus {
  text-decoration: none;
  background-color: #333745;
  color: #fff;
  width: 100%;
}
/* CHANGED */
.navMain > li.disabled > .nosub > a {
  color: #999;
}
/* CHANGED */
.navMain > li.disabled > .nosub > a:hover,
.navMain > li.disabled > .nosub > a:focus {
  color: #fff;
  cursor: not-allowed;
  background-color: transparent;
}
/* CHANGED */
.navMain .open > .nosub > a,
.navMain .open > .nosub > a:hover,
.navMain .open > .nosub > a:focus {
  background-color: #eee;
  border-color: #428bca;
}
/* NEW ADDED */
.nosub:hover {
  background-color: #333745;
}

/* plus/minus glyphicon link */
a.switch {
  float:right;
  margin-right:4px;
}

/* LINKS with SUB CATS */

/* deactivated/removed
.light {
  padding: 5px
}
*/

/* CHANGED */
.light:hover {
  background-color: #333745;
  /* removed color: #fff; part */
}
/* NEW ADDED */
.navMain > li > .light > a {
  position: relative;
  display: inline-block;
  padding: 10px;
 
}
/* NEW ADDED */
.navMain > li > .light > a:hover {
  text-decoration: none;
  background-color: #333745;
  color: #fff;  
}
/* deactivated/removed
.nav-list.collapse{
  padding-left:10px;
  transition: all 0.3s ease-out 0s;
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
}
*/

/* NEW ADDED */
.no-padding {
  padding: 0;
}
/* NEW ADDED */
.line {
  border-bottom: solid 1px #ddd;
}
/* EOF CATEGORIES BOX */

html_output.php

// BOF Categories Tree for Categories Box by De Dokta
function tep_show_tree_box($root_id = 0,$mainUlClass='navMain nav-list',$submenuUlClass='navMain nav-list collapse'){
    global $languages_id,$cPath_array, $datas;
    $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
    $items = array();
    while ($categories = tep_db_fetch_array($categories_query))  {
        $items[$categories['categories_id']] = array('name' => $categories['categories_name'], 'parent_id' => $categories['parent_id'], 'id' => $categories['categories_id']);
    }
    $citems=count($items);
    
    if($citems<=0) return '';
    elseif($citems==1) $children[] = $items; //in case we have one category item without subcategories, rare but possible
    else foreach( $items as $item ) $children[$item['parent_id']][] = $item;
        $loop = !empty( $children[$root_id] );
        $parent = $root_id;
        $parent_stack = array();
        $stack=array();//helper array so to know the current level
    $pic=''; //products_in_category string
        
        // MAINMENU
        $datas .='<ul class="'.$mainUlClass.'">';
        while ( $loop && ( ( $option = each( $children[$parent] ) ) || ( $parent > $root_id ) ) ){
            if ( $option === false ){
                $parent = array_pop( $parent_stack );
                $datas .= '</ul>';
                $datas .= '</li>';
                array_pop( $stack );
            }elseif ( !empty( $children[$option['value']['id']] ) ){
                $stack[]=$option['value']['id'];
                $rt=$root_id>0 ? $root_id.'_' : '';
                $cpath_new=count($stack)<=0 ? 'cPath='.$rt.$option['value']['id'] : 'cPath='.$rt.implode('_',$stack);
                $datas .= '<li class="line"><div class="light"><a href="'.tep_href_link(FILENAME_DEFAULT, $cpath_new).'">'; // added "line" class TSIMI
                $sm=0;        
                if((isset($cPath_array) && in_array($option['value']['id'], $cPath_array))){
                    $sm=1;
                    $datas .='<span class="glyphicon glyphicon-chevron-right"></span> <strong>'.stripslashes($option['value']['name']).'</strong>'; // added glyphicon icon and 1x   TSIMI
                }else{
                    $datas .= '<span class="glyphicon glyphicon-chevron-right"></span> ' . stripslashes($option['value']['name']); // added glyphicon icon and 1x   TSIMI
                }
                $datas .='</a><a href="#" class="switch"><span class="glyphicon glyphicon-plus-sign '.($sm==1?'glyphicon-minus-sign':'').' test"></span></a></div>';
        // SUBMENU
                $datas .= '<ul class="'.$submenuUlClass.' '.($sm==1?'in':'').' ">';
                $parent_stack[]=$option['value']['parent_id'];
                $parent = $option['value']['id'];
          }else{
                $rt=$root_id>0 ? $root_id.'_' : '';
                $cpath_new= count($stack)<=0 ? 'cPath='.$rt.$option['value']['id'] : 'cPath='.$rt.implode('_',$stack).'_'.$option['value']['id'];
                $datas .= '<li><div class="nosub"><a href="'.tep_href_link(FILENAME_DEFAULT, $cpath_new).'" >';

                if (isset($cPath_array) && in_array($option['value']['id'], $cPath_array)) {
                    $datas .= '    <strong>'.stripslashes($option['value']['name']).'</strong>'; // added 4x   TSIMI
                }else{
                    $datas .= '    ' . stripslashes($option['value']['name']); // added 4x   TSIMI
                }
                $datas .='</a></div></li>';  //BACK ! it works like a charm
                //cool if you click the category name the other open tree collapses if you only click on the + sign the other tree stays open so two or even tree open trees at the same time
                // is this sometihng you want? i am not really sure. looks cool though. usually other tree closes if you click the next one what you think?
                //you can do some javascript to hide
        }
       }
        $datas .='</ul>';
        
      return $datas;
  }   
// BOF Categories Tree for Categories Box by De Dokta

bm_categories.php

$data = '<div class="panel panel-default">' .
              '  <div class="panel-heading">' . MODULE_BOXES_CATEGORIES_BOX_TITLE . '</div>' .
              '  <div class="panel-body no-padding">' . tep_show_tree_box() . '</div>' .
              '</div>';

 

Link to comment
Share on other sites

@@PupStar

 

Mark, please forget about the icons. It won't work. If the sub-category (sub-level1) has another sub-category (sub-level2) then the icon will appear. If you have only one sub-level then it's OK if not then remove.

Remove the glyphicons code from the html_output.php and adjust the text position if not appropriate. For example with text-intend: ??px;

Link to comment
Share on other sites

  • 2 months later...

 

managed to solve some collapse issues ;)

 

undo suggested change in bm_categories.php:

'  <div id="accordion" class="panel-body">' . $OSCOM_CategoryTree->getHeaderTree() . '</div>' .

back to:

'  <div class="panel-body">' . $OSCOM_CategoryTree->getHeaderTree() . '</div>' .

undo change in template_bottom.php

 

and only use:

//START **DIRECT LINKING**  //
//NOTE: If click a category-link or be redirected to some:
$( document ).ready(function() {

//NOTE: We read the index.php?cPath_ ...... from url
var cPath = '<?php echo $cPath; ?>';

//We check if cPath contains underscore '_' (means category has deeper level)
    var cPath_delimiter = '_';
	
//NOTE: cPath urls can look like cPath_1_22_41
//NOTE: We need to remove the FIRST FOUND string: cPath, then we lookup each id after each underscore '_'
    if ( cPath.indexOf( cPath_delimiter ) > -1 ) { //-1 we take of the  FIRST FOUND string here

//NOTE: For each id:
//NOTE: We do collapse in.
//NOTE: We change chevron icon right to down (handled by css).
    $.each( cPath.split( "_" ), function( index, cPath_string ) {
	
    $( 'ul#cpath_'+cPath_string+'' ).collapse('show');
	$('li[data-target="#cpath_'+cPath_string+'"]').removeClass('collapsed');
//NOTE: We change color for a sub-categorie id when it NOT contains anymore sub-categories
   	$('li#subcolor_'+cPath_string+'').toggleClass('list-group-item-warning list-group-item-nothing');

    });
    
	}else{
//NOTE: If the cPath is a direct link to the parent (main category) , so it not contains an underscore '_'.	
    $( 'ul#cpath_'+cPath+'' ).collapse('show');
    $('li[data-target="#cpath_'+cPath+'"]').removeClass('collapsed');
	$('#color_'+cPath+'').closest('.nochildren').toggleClass('list-group-item-info list-group-item-danger');
    
	};
    });
//END **DIRECT LINKING**  //	

 

hi, im getting a bit confused with the above different codes.

 

which bits need to be changed?thanks

Link to comment
Share on other sites

  • 6 months later...

Hi guys,

 

I have been using the code from @@De Dokta and @@gadlol on my site for some time, and have been pleased with it. Thank you both!

 

One small bug to report ...

 

If you click on the plus sign, the menu expands, and the plus sign changes to a minus sign. Click on the minus sign, and the menu collapses, and the minus sigh changes back to a plus sign. This all works fine. But ...

 

If you have several categories, each with sub-categories, when you click on the first plus sign, that category expands, and the plus sign changes to a minus sign. Now, click on the plus sign for the second category. The first category collapses, but the minus sign does not change back to a plus sign. The second category expands, and that plus sign changes to a minus sign. Click on the plus sign for the third category, and the second category collapses, but it's minus sign does not change back to a plus sign. Lather, rinse, repeat.

 

 

Now, a new question ...

 

I am working on a new site, and I am trying to mimic an old site I made many years ago. I want to get away from individual 'boxes' in the left column, and have a single vertical list of navigation choices. I have already used CSS to eliminate the look of individual boxes, but now I want the box header to be the only item visible. For example, in the left column, there will be a 'header' for "Categories", "What's New", "Best Sellers", "Information", etc.

 

post-327952-0-46346600-1443396243_thumb.jpg

 

When the customer clicks on a box header, the menu will expand to show all of the choices within that 'box'. In this example, when I click on the box header 'Categories', it will expand using the above tree code to display all of the categories and sub-categories.

 

post-327952-0-08876500-1443396262_thumb.jpg

 

The question is: How do I do this?

 

Thanks!

 

Malcolm

Link to comment
Share on other sites

@@ArtcoInc

 

Sorry Malcolm...I wasn't very clear...it's getting late here...on the catalog side of a BS shop have a look at....

 

/includes/modules/content/header/templates/links.php

 

Dan

Link to comment
Share on other sites

@@ArtcoInc

 

Malcolm...I was thinking...scary I know but can't you just install that module and be done with it....I assume that is what Gary did with his Gablehauser template which you can see here...

 

http://template.me.uk/gablehauser/

 

Dan.

 

PS:  Now that I say that maybe that  is a module Gary added...I am running his Gablehauser template.  You might ask if he has a module for it?

Link to comment
Share on other sites

@@Tsimi

 

Some progress B)

 

in bm_catagories.php

    function execute() {
      global $oscTemplate, $cPath;

      $OSCOM_CategoryTree = new category_tree();
      $OSCOM_CategoryTree->setCategoryPath($cPath, '<strong>', '</strong>');
      $OSCOM_CategoryTree->setSpacerString('  ', 1);

      $OSCOM_CategoryTree->setParentGroupString('<ul class="nav nav-list">', '</ul>', true);

      $data = '<div id="Categories" class="panel panel-default no-border hidden-xs hidden-sm">' .
              '  <a href="#CategoriesExpanded" data-toggle="collapse" data-parent="#Categories">' .
                    MODULE_BOXES_CATEGORIES_BOX_TITLE .
              '  </a>' .
              '  <div style="height: 0px;" class="collapse" id="CategoriesExpanded">' .
              '    <div class="panel-body ContentBody">' . tep_show_tree_box() . '</div>' .
              '  </div>' .
              '</div>';

      $oscTemplate->addBlock($data, $this->group);
    }

This works, but it will look funny if you try it because I've stripped out some of the classes that trigger the CSS styling.

 

Now, when I say it 'works', it does expand and collapse like I want, but when you click on a category or product, the new page loads, and the menu is collapsed. Now, I need to figure out how to make it stay open ...

 

Oh, and I would also like to include the plus/minus sign after the 'heading', and to implement the sliding transition when the whole thing is opened and closed.

 

One step at a time :P

 

Malcolm

Link to comment
Share on other sites

One small bug to report ...

 

If you click on the plus sign, the menu expands, and the plus sign changes to a minus sign. Click on the minus sign, and the menu collapses, and the minus sigh changes back to a plus sign. This all works fine. But ...

 

If you have several categories, each with sub-categories, when you click on the first plus sign, that category expands, and the plus sign changes to a minus sign. Now, click on the plus sign for the second category. The first category collapses, but the minus sign does not change back to a plus sign. The second category expands, and that plus sign changes to a minus sign. Click on the plus sign for the third category, and the second category collapses, but it's minus sign does not change back to a plus sign. Lather, rinse, repeat.

 

Hi Malcolm

I just tried to replicate that bug but it doesn't happen in my test shop. All works just fine even with 3 sub-categories deep.

I don't know if I have the same version as you, here is the code for the tep_show_tree_box function inside the html_output.php.

You can compare the codes and see if anything is different.

 

CODE: http://pastebin.com/EnwMuXmk

Link to comment
Share on other sites

@@Tsimi

 

The code in the link you gave is *almost* identical to your code in this message:

 

http://www.oscommerce.com/forums/topic/397547-tep-draw-categories-tree-finally-no-recursion-just-one-mysql-query/?p=1705542

 

 

But no, the code I am using is from @@De Dokta as posted in this message:

 

http://www.oscommerce.com/forums/topic/397547-tep-draw-categories-tree-finally-no-recursion-just-one-mysql-query/?p=1706646

 

@@De Dokta 's code in tep_show_tree_box() is (slightly) different than the link you gave, and the javascript code in the footer is also different than what either you or @@gadlol had posted.

 

 

I *did* try using your posted code (both the tep_show_tree_box() function and the javascript code), but didn't alter my CSS (I've been making ALL sorts of changes to that lately, and didn't want to mess that all up), and it didn't work.

 

 

Like I said, other than this one tiny glitch, @@De Dokta 's code is working fine for me. I just need to now figure out how to make the menu stay open when moving from page to page.

 

 

Malcolm

Link to comment
Share on other sites

@@Tsimi @@De Dokta @@gadlol

 

** update **

 

I was using @@De Dokta 's javascript code from here:

 

http://www.oscommerce.com/forums/topic/397547-tep-draw-categories-tree-finally-no-recursion-just-one-mysql-query/?p=1706646

 

I noticed I had a small typo. Fixed that. Then, I added/adapted @@gadlol 's "improved js" code from here:

 

http://www.oscommerce.com/forums/topic/397547-tep-draw-categories-tree-finally-no-recursion-just-one-mysql-query/?p=1705561

 

Now, the plus/minus 'bug' has been squashed! B)

 

 

Now, to figure out how to keep the categories tree open when selecting a category/item, and the page refreshes. :unsure:

 

Malcolm

 

Oh, and how to add the plus/minus to the 'categories' title ..

Link to comment
Share on other sites

Got it, and it turns out it was pretty easy! Sometimes, you just have to step back, and take a fresh look at things B)

 

My code in post #48 above wasn't working for me, so I tried something else ... I added a new category, called 'Products'. I then put *all* of my Categories and Products *under* this category. Going back to the original code, everything is now working just like I want it :thumbsup:

 

@@gadlol    Two quick questions (if I may) ...

 

1) I have also adapted this plus/minus function to open and close other boxes (Information, Reports, etc). This is working, but the user can only click on the plus/minus sign to expand the menu. How can I include having the user being able to click on the box header or title to expand the menu?

 

 

(code snippet from my Information box module)

        $data  = '<div id="Information" class="panel panel-default no-border hidden-xs hidden-sm">' .
                 '  <div class="panel-body ContentBody">' .
                 '    <ul class="navMain nav-list">';

        $data .= '      <li> ' .
                 '        <div>Information' .
                 '          <a href="" class="switch">' .
                 '            <span class="glyphicon glyphicon-plus-sign '.($sm==1?'glyphicon-minus-sign':'').'">' .
                 '            </span>' .
                 '          </a>' .
                 '        </div>';

        $data .= '        <ul class="navMain nav-list collapse '.($sm==1?'in':'').' ">';

        $data .= '          <div>' .
                 '            <div class="panel-body ContentBody">' . tep_information_show_category(1) . '</div>' .
                 '          </div>';

        $data .= '        </ul>' .
                 '      </li>' .
                 '    </ul>' .
                 '  </div>' .
                 '</div>';

I tried including the 'Information' heading within the <a href> tag, but it doesn't work.

 

2) How can I replace the glyphicon plus and minus symbols with the plain ASCII plus and minus characters?

 

Thank you, everyone!

 

Malcolm

Link to comment
Share on other sites

@@ArtcoInc

 

If  your reason to change the plus and minus icons is because you don't want them inside a round background kinda icon then use glyphicon-plus and glyphicon-minus instead of glyphicon-plus-sign and glyphicon-minus-sign

Link to comment
Share on other sites

@@Tsimi

If  your reason to change the plus and minus icons is because you don't want them inside a round background kinda icon then use glyphicon-plus and glyphicon-minus instead of glyphicon-plus-sign and glyphicon-minus-sign

 

This works! Thank you ...

 

That said, the symbols are still a different weight (boldness) and size than the surrounding text. Yes, I could change the text to match the symbols, but that's not the look I'm going for.

 

Thank you, though

 

Malcolm

Link to comment
Share on other sites

@@ArtcoInc

 

I see. Have you tried to use the font weight attribute?

 

http://www.w3schools.com/cssref/pr_font_weight.asp

 

The glyphicons or FontAwesome behave like fonts so it might be possible to change their thickness. I have never tried it but it's worth a shot. You could add it inside the span tag like this

<span style="font-weight:lighter;">

or

<span style="font-weight:100;">

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...