Expanding Categories Box

Open to all! Ask other shopowners for help.
ArtcoInc
Contributor
Posts: 119
Joined: Fri Oct 25, 2019 4:19 pm
Phoenix Version: v1.0.3.0
Has thanked: 86 times
Been thanked: 17 times

Expanding Categories Box

Post by ArtcoInc »

Many years ago, in the old forum, several members of the community created an Expanding Categories box. Alas, most of the members who contributed to it then are no longer around.

I had this running on an old site, running: osC-BS (pre-gold, pre-frozen) and PHP 5.x. The old site did use an older version of jquery (1.11.1.min.js, if that matters).

I am now trying to update it for Phoenix 1.0.3.0 (yes, it's old too), and PHP 7.4.

Here is the code for the Categories Box:

Code: Select all

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2014 osCommerce

  Released under the GNU General Public License
*/

  class bm_expanding_categories {
    var $code = 'bm_expanding_categories';
    var $group = 'boxes';
    var $title;
    var $description;
    var $sort_order;
    var $enabled = false;

    function __construct() {
      $this->title = MODULE_BOXES_EXPANDING_CATEGORIES_TITLE;
      $this->description = MODULE_BOXES_EXPANDING_CATEGORIES_DESCRIPTION;

      if ( defined('MODULE_BOXES_EXPANDING_CATEGORIES_STATUS') ) {
        $this->sort_order = MODULE_BOXES_EXPANDING_CATEGORIES_SORT_ORDER;
        $this->enabled = (MODULE_BOXES_EXPANDING_CATEGORIES_STATUS == 'True');

        $this->group = ((MODULE_BOXES_EXPANDING_CATEGORIES_CONTENT_PLACEMENT == 'Left Column') ? 'boxes_column_left' : 'boxes_column_right');
      }
    }

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

      $OSCOM_CategoryTree = new category_tree();
      $OSCOM_CategoryTree->setCategoryPath($cPath, '<strong>', '</strong>');
      $OSCOM_CategoryTree->setSpacerString('&nbsp;&nbsp;', 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">' .
               '  <div class="panel-body ContentBody">' . 
               '    <div class="clearfix"></div>' .
               '    <ul class="navMain nav-list">';

      $data .= '      <li> ' .
               '        <div>' .
               '          <a href="" class="switch">';

      if(!empty($cPath)) {
        $data .= '            <span class="fa fa-plus-circle fa-minus-circle">' ;
        $data .= '            </span> &nbsp; Products ' .
                 '          </a>' . 
                 '        </div>' .
                 '        <div class="clearfix"></div>';
        $data .= '        <ul class="navMain nav-list collapse in">';

      } else {

        $data .= '            <span class="fa fa-plus-circle '.($sm==1?'fa-minus-circle':''). ' ">' ;
        $data .= '            </span> &nbsp; Products ' .
                 '          </a>' . 
                 '        </div>' .
                 '        <div class="clearfix"></div>';
        $data .= '        <ul class="navMain nav-list collapse '.($sm==1?'in':''). ' ">';

      }

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

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


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

    function isEnabled() {
      return $this->enabled;
    }

    function check() {
      return defined('MODULE_BOXES_EXPANDING_CATEGORIES_STATUS');
    }

    function install() {
      tep_db_query("insert into CONFIGURATION (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable Categories Module', 'MODULE_BOXES_EXPANDING_CATEGORIES_STATUS', 'True', 'Do you want to add the Expanding Categories module to your shop?', '6', '1', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");
      tep_db_query("insert into CONFIGURATION (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Content Placement', 'MODULE_BOXES_EXPANDING_CATEGORIES_CONTENT_PLACEMENT', 'Left Column', 'Should the module be loaded in the left or right column?', '6', '1', 'tep_cfg_select_option(array(\'Left Column\', \'Right Column\'), ', now())");
      tep_db_query("insert into CONFIGURATION (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_BOXES_EXPANDING_CATEGORIES_SORT_ORDER', '0', 'Sort order of display. Lowest is displayed first.', '6', '0', now())");
    }

    function remove() {
      tep_db_query("delete from CONFIGURATION where configuration_key in ('" . implode("', '", $this->keys()) . "')");
    }

    function keys() {
      return array('MODULE_BOXES_EXPANDING_CATEGORIES_STATUS', 
                   'MODULE_BOXES_EXPANDING_CATEGORIES_CONTENT_PLACEMENT',
                   'MODULE_BOXES_EXPANDING_CATEGORIES_SORT_ORDER');
    }
  }

(I have changed the old glyphicon icons to Font Awesome, but otherwise, the code is as it was)

This does call a new function called tep_show_tree_box(), which does generate an expanded categories list (I can post that too, if it helps)

My problem is that the menu does not expand (and later collapse) at all. Inspecting the code shows that the full menu tree is there, and a .collapse:not(.show) is toggled, preventing the menu from expanding.

I don't know if this a problem with Bootstrap, jQuery, PHP, or what.

Any help would be greatly appreciated!

Malcolm


Join The Code Co-op to get access to your library in the Code Co-op Forum
frankl
Builder
Posts: 159
Joined: Tue Feb 23, 2021 8:39 pm
Phoenix Version: v1.1.0.4
Has thanked: 17 times
Been thanked: 25 times

Re: Expanding Categories Box

Post by frankl »

What is the value of $sm?
ArtcoInc
Contributor
Posts: 119
Joined: Fri Oct 25, 2019 4:19 pm
Phoenix Version: v1.0.3.0
Has thanked: 86 times
Been thanked: 17 times

Re: Expanding Categories Box

Post by ArtcoInc »

Thank you. Here's the tep_show_tree_box function ...

Code: Select all


// --- Function to display a Prettier Categories box --- copied from osC Forum --- 10-14-14
  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,
                                             c.sort_order, 
                                             cd.categories_name, 
                                             c.parent_id 
                                      from CATEGORIES c,
                                           CATEGORIES_DESCRIPTION cd 
                                      where c.categories_id = cd.categories_id 
                                        and cd.language_id='" . (int)$languages_id ."' 
                                      order by c.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><div><a href="'.tep_href_link('index.php', $cpath_new).'">';
        $sm=0;        
        if((isset($cPath_array) && in_array($option['value']['id'], $cPath_array))){
          $sm=1;
          $datas .=''.stripslashes($option['value']['name']).'';
        } else {
          $datas .=stripslashes($option['value']['name']);
        }

//        $datas .='<a href="" class="switch"><span class="glyphicon glyphicon-plus-sign '.($sm==1?'glyphicon-minus-sign':'').'"></span></a></div>';
        $datas .='<a href="" class="switch"><span class="fa fa-plus-circle '.($sm==1?'fa-minus-circle':'').'"></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><a href="'.tep_href_link('index.php', $cpath_new).'" >';

        if (isset($cPath_array) && in_array($option['value']['id'], $cPath_array)) {
          $datas .=''.stripslashes($option['value']['name']).'';
        } else {
          $datas .=stripslashes($option['value']['name']);
        }

        $datas .='</a></li>';
      }
    }

    $datas .='</ul>';
    return $datas;
  }

ArtcoInc
Contributor
Posts: 119
Joined: Fri Oct 25, 2019 4:19 pm
Phoenix Version: v1.0.3.0
Has thanked: 86 times
Been thanked: 17 times

Re: Expanding Categories Box

Post by ArtcoInc »

There's also the CSS that goes with this (yes, it's old too) ..

Code: Select all

/* BOF CATEGORIES BOX */
.navMain {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navMain > li {
  position: relative;
  display: block;
}
.navMain > li > a {
  position: relative;
  display: inline-block;
  padding: 0px;
}

.navMain > li > a:hover,
.navMain > li > a:focus {
/*
  background-color: #E1E1E1;
  color: #428BCA;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -opera-border-radius: 5px;
  -khtml-border-radius: 5px;
  width: 100%;
*/
}

.navMain > li.disabled > a {
/*  color: #999; */
}

.navMain > li.disabled > a:hover,
.navMain > li.disabled > a:focus {
/*  color: #999; */
  text-decoration: none;
  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: left;
  margin-right: 12px;
}

/*
.light {
  padding-top: 0px;
}

.light:hover {
  background-color: #E1E1E1;
  color: #428BCA;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -opera-border-radius: 5px;
  -khtml-border-radius: 5px;
}
*/

.nav-list.collapse {
  padding-left:35px;
/*  padding-top: 5px; */
  padding-bottom: 2px;
  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 */
User avatar
burt
Core Team
Posts: 4551
Joined: Tue Oct 29, 2019 9:37 am
Phoenix Version: v1.1.0.8
Has thanked: 252 times
Been thanked: 412 times

Re: Expanding Categories Box

Post by burt »

What is it you are trying to achieve? It looks like a system of showing categories, which when clicked show subcategories, presumbaly without a page reload?

It might be easier to achieve if you explain what you want, maybe with images/screenshots ... then see if something can be made, rather than trying to retrofit some broken old addon.
I am not here to build for you.
I am here to build with you. Let's help each other.
ArtcoInc
Contributor
Posts: 119
Joined: Fri Oct 25, 2019 4:19 pm
Phoenix Version: v1.0.3.0
Has thanked: 86 times
Been thanked: 17 times

Re: Expanding Categories Box

Post by ArtcoInc »

Ok, I launched the old site with PHP 7.4, and while there were lots of other errors, the expanding box worked. So, it's not a PHP error.

So, I'm *thinking* it may be a difference with Bootstrap 3.2.0 on the old site -vs- Bootstrap 4.3.1 on the Phoenix 1.0.3.0 site.

Or maybe jquery-1.11.1.min.js on the old site -vs- jquery-2.2.3.min.js and/or jquery-3.3.1.min,js on the Phoenix 1.0.3.0 site.

Malcolm
ArtcoInc
Contributor
Posts: 119
Joined: Fri Oct 25, 2019 4:19 pm
Phoenix Version: v1.0.3.0
Has thanked: 86 times
Been thanked: 17 times

Re: Expanding Categories Box

Post by ArtcoInc »

Here are the box(es) collapsed ..
Screen Capture - 2025-09-22 - A.jpg
If you click on any of the plus signs, the menu(s) expand ...
Screen Capture - 2025-09-22 - B.jpg
And continue to expand if you click on more ...
Screen Capture - 2025-09-22 - C.jpg
Once expanded, the plus sign changes to a minus sign. If you click on a minus sign, that portion of the sub-menu collapses. You can expand multiple sub-menus (as shown in the 3rd photo above).

Each expanded 'name' is a link. Click on it takes you to that category.

Note: The entire menu does not expand when a plus sign is clicked ... only that specific sub-menu. Likewise, you can collapse individual sub-menus (or, the entire menu tree, if you click on the minus sign at the very top).

I had this working way back when, on an old version of osC-BS . I'm just trying to adapt it to work now with Phoenix (albeit an older version).

Malcolm
You do not have the required permissions to view the files attached to this post.
User avatar
burt
Core Team
Posts: 4551
Joined: Tue Oct 29, 2019 9:37 am
Phoenix Version: v1.1.0.8
Has thanked: 252 times
Been thanked: 412 times

Re: Expanding Categories Box

Post by burt »

This seems like the perfect candidate for modernization. Note that older versions of jQuery are known to have insecurities - the main reason we removed the need for jquery.

Howeverrrrrrr, you are building on v1.0.3.0. In modern code, this would take 30 minutes to code up.
In 1.0.3.0, I don't know - it's something I have not looked at or worked on for 5 years, but it might still be possible.
I am not here to build for you.
I am here to build with you. Let's help each other.
User avatar
burt
Core Team
Posts: 4551
Joined: Tue Oct 29, 2019 9:37 am
Phoenix Version: v1.1.0.8
Has thanked: 252 times
Been thanked: 412 times

Re: Expanding Categories Box

Post by burt »

https://youtu.be/hmtfsLZ1qYE

I'll push this out in this months code drops.
Coded on 1.1.0.5, so unknown if it'll work in 1.0.3.0, but at least it'll be a starting point.
I am not here to build for you.
I am here to build with you. Let's help each other.
ArtcoInc
Contributor
Posts: 119
Joined: Fri Oct 25, 2019 4:19 pm
Phoenix Version: v1.0.3.0
Has thanked: 86 times
Been thanked: 17 times

Re: Expanding Categories Box

Post by ArtcoInc »

@burt That looks perfect! Thank you.

As an aside, I think that my initial problem was that there were changes in the collapse class in Bootstrap 4 -vs- Bootstrap 3. See here ...

https://stackoverflow.com/questions/517 ... -utilities

Thanks again!

Malcolm


Join The Code Co-op to get access to your library in the Code Co-op Forum
Post Reply