How to distinguish the sub categories in the category box?

[valquiria23]

Hello everyone!!!
How can I distinguish the sub categories?

I want that in the categories box when I click on a category I will be able to easily distinguish which are the subcategories belonging to the parent category.

The idea is to add a symbol to the sub category such as: "-" or ">" or, bold color or another color so it looks like this:

Category 1
> Sub category 1
> Sub category 2
> Sub category 3
> Sub category 4
Category 2
Category 3
Category 4

Help is appreciated.

Best regards

Valqui

[♥raiwa]

Hola Valquiria,

You can customize the categories in includes/classes/category_tree.php.

Have a look and play with the configuration variables at the beginning of the class:

    var $root_category_id = 0,
        $max_level = 0,
        $root_start_string = '',
        $root_end_string = '',
        $parent_start_string = '',
        $parent_end_string = '',
        $parent_group_start_string = '<ul>',
        $parent_group_end_string = '</ul>',
        $parent_group_apply_to_root = false,
        $child_start_string = '<li>',
        $child_end_string = '</li>',
        $breadcrumb_separator = '_',
        $breadcrumb_usage = true,
        $spacer_string = '',
        $spacer_multiplier = 1,
        $follow_cpath = false,
        $cpath_array = array(),
        $cpath_start_string = '',
        $cpath_end_string = '';

 

[valquiria23]

Hola Rainer, 

Muchas gracias!!! Voy a pegarle una mirada!! 

Saludos cordiales

Valqui

[valquiria23]

Dear @raiwa

Just try playing with those parameters, but I do not achieve what I am looking for.

Attached an image with what I want to add:

Best regards

Valqui

 

[Jack_mcs]

Here's a change I use. Maybe it will help with what you want to do. 

In the classes/category_tree.php file, replace these lines

          $result .= '<a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">';
          $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * $level);
          $result .= $link_title . '</a>';

with

          $img = 'fas fa-caret-right';
          $left = '8px';
	      
          if ($level === 0) {
              $img = 'far fa-hand-point-right';
              $left = '4px';
          }   
        
          $result .= '<span class="' . $img . '" style="font-size:10px;color:#030303;margin-left:' . $left . ';margin-right:4px"></span>';
          $result .= '<span><a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">';
          $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * $level);
          $result .= $link_title . '</a></span>';

 

[valquiria23]

Hello Jack @Jack_mcs, thank you very much for your help, but when making the change I receive the following error:

Parse error: syntax error, unexpected 'if' (T_IF) in /home/XXXX/catalog/includes/classes/category_tree.php on line 86

Any idea that can be?

Best regards

Valqui

[Jack_mcs]

I don't see anything wrong with the change and it is working here. Please post the first 100 lines of that file and I will compare it to what I have.

[valquiria23]

Hi  Jack @Jack_mcs,

Here are the first 100 lines of the file /catalog/includes/classes/category_tree.php.

From already thank you very much!!

 

<?php
/**
 * osCommerce Online Merchant
 * 
 * @copyright Copyright (c) 2014 osCommerce; http://www.oscommerce.com
 * @license GNU General Public License; http://www.oscommerce.com/gpllicense.txt
 */

  class category_tree {
    protected $_data = array();

    var $root_category_id = 0,
        $max_level = 0,
        $root_start_string = '',
        $root_end_string = '',
        $parent_start_string = '',
        $parent_end_string = '',
        $parent_group_start_string = '<ul>',
        $parent_group_end_string = '</ul>',
        $parent_group_apply_to_root = false,
        $child_start_string = '<li>',
        $child_end_string = '</li>',
        $breadcrumb_separator = '_',
        $breadcrumb_usage = true,
        $spacer_string = '',
        $spacer_multiplier = 1,
        $follow_cpath = false,
        $cpath_array = array(),
        $cpath_start_string = '---',
        $cpath_end_string = '';

    public function __construct() {
      global $languages_id;

      static $_category_tree_data;

      if ( isset($_category_tree_data) ) {
        $this->_data = $_category_tree_data;
      } else {

        $categories_query = tep_db_query("select c.categories_id, c.parent_id, c.categories_image, cd.categories_name from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_id = cd.categories_id and cd.language_id = '" . (int)$languages_id. "' order by c.parent_id, c.sort_order, cd.categories_name");

        while ( $categories = tep_db_fetch_array($categories_query) ) {
          $this->_data[$categories['parent_id']][$categories['categories_id']] = array('name' => $categories['categories_name'],
                                                                                       'image' => $categories['categories_image']);
        }

        $_category_tree_data = $this->_data;
      }
    }

    protected function _buildBranch($parent_id, $level = 0) {
      $result = ((($level === 0) && ($this->parent_group_apply_to_root === true)) || ($level > 0)) ? $this->parent_group_start_string : null;

      if ( isset($this->_data[$parent_id]) ) {
        foreach ( $this->_data[$parent_id] as $category_id => $category ) {
          if ( $this->breadcrumb_usage === true ) {
            $category_link = $this->buildBreadcrumb($category_id);
          } else {
            $category_link = $category_id;
          }

          $result .= $this->child_start_string;

          if ( isset($this->_data[$category_id]) ) {
            $result .= $this->parent_start_string;
          }

          if ( $level === 0 ) {
            $result .= $this->root_start_string;
          }

          if ( ($this->follow_cpath === true) && in_array($category_id, $this->cpath_array) ) {
            $link_title = $this->cpath_start_string . $category['name'] . $this->cpath_end_string;
          } else {
            $link_title = $category['name'];
          }

/*         $result .= '<a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">';
          $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * $level);
          $result .= $link_title . '</a>'; */
          
        $img = 'fas fa-caret-right';
          $left = '8px';
          
          if ($level === 0) {
              $img = 'far fa-hand-point-right';
              $left = '4px';
          }   
        
          $result .= '<span class="' . $img . '" style="font-size:10px;color:#030303;margin-left:' . $left . ';margin-right:4px"></span>';
          $result .= '<span><a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">';
          $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * $level);
          $result .= $link_title . '</a></span>';
          

          if ( $level === 0 ) {
            $result .= $this->root_end_string;
          }
 

[Omar_one]

@valquiria23   there is an    /*       before this line

$result .= '<a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">';

remove it 

[valquiria23]

HI Omar @Omar_one

Jack asked me to remove those lines ...

[valquiria23]

Yes, I did it. I removed the 3 lines that Jack asked me, you can see it in the code above. :

/*         $result .= '<a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">';
          $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * $level);
          $result .= $link_title . '</a>';  */ 

Regards

Valqui

[Jack_mcs]

@valquiria23I don't see anything wrong with the actual code but I think the file has a BOM problem. That might be due to copying from here but there is an extra space in this part

           $result .= $link_title . '</a></span>';
           

          if ( $level === 0 ) {

And the failure you mentioned previously is pointing at that "if". So try deleting the lines between those two and see if that helps.

[burt]

Is there some reason I'm unaware of not to use the spacerString to achieve this?

[Jack_mcs]

That would work for the OP's original question but not for the change that I mentioned, as far as I know.

[valquiria23]

Hi Jack @Jack_mcs,

It is seen that it was a problem related to copy and paste.
Your solution worked correctly !!! thank you very much!! but I did not like the style of how the categories were (like links) .

As I am going to use few levels of categories, so with my little knowledge of programming I use this code:

 I replace this line

/*         $result .= $link_title . '</a>';  */

with 

switch ($level) {
    case 0:
        $result .= $link_title . '</a>'; 
        break;
    case 1:
        $result .=   '111>&nbsp' . $link_title . '</a>'; 
        break;
    case 2:
        $result .=   '222>&nbsp' . $link_title . '</a>'; 
        break;
    case 3:
        $result .=   '333>&nbsp' . $link_title . '</a>'; 
        break;        
    default:
       $result .= $link_title . '</a>';
}

Now, what changes do I have to make to the code so that instead of "111" the symbol of fas fa-caret-right with blue color, and the same style of the categories  will appears?

@burt:

If you have a better solution I will be happy if you share it.

All help, recommendation, criticism is welcome!

Best regards

Valqui

 

[♥raiwa]

For me this works nice line 73 and forward:

          if ( $level === 0 ) {
            $result .= $this->root_start_string;
          } else {
            $result .= '<i class="text-info fas fa-chevron-circle-right pull-left" style="margin-top:13px; margin-left:13px;"></i>';
          }

Thenyou can use the level variable to change to different icon colors.

[burt]

This bolds the choosen category;

$OSCOM_CategoryTree->setCategoryPath($cPath, '<strong>', '</strong>');

This adds > in front of sub category;

$OSCOM_CategoryTree->setSpacerString('<i class="fa fa-angle-right"></i> ', 1);

 

I've only tested on standard Edge, so may not work in all circumstances and obviously won't work in modules that do not use the category_tree.

 

 

[burt]

2 hours ago, Jack_mcs said:

That would work for the OP's original question but not for the change that I mentioned, as far as I know.

Ok I thought there might be a SEO reason or something.

[ArtcoInc]

@burt

55 minutes ago, burt said:

This bolds the choosen category;

$OSCOM_CategoryTree->setCategoryPath($cPath, '<strong>', '</strong>');

This adds > in front of sub category;

$OSCOM_CategoryTree->setSpacerString('<i class="fa fa-angle-right"></i> ', 1);

 

I've only tested on standard Edge, so may not work in all circumstances and obviously won't work in modules that do not use the category_tree.

Where would you put this code?

[burt]

3 minutes ago, ArtcoInc said:

Where would you put this code?

It be these lines;

https://github.com/gburton/Responsive-osCommerce/blob/master/includes/modules/boxes/bm_categories.php#L37-L38

Any other module that uses (or extends) the category_tree class would/should/could do similar...

[valquiria23]

First I want to thank all those who contributed and helped  @raiwa ,  @Jack_mcs , @Omar_one and @burt

Just finished testing the @raiwa solution

Search in includes/classes/category_tree.php.

 if ( $level === 0 ) {
            $result .= $this->root_start_string;
          }

add below ......

else {
          
switch ($level) {

    case 1:
        $result .= '<i class="text-info fas fa-chevron-circle-right pull-left" style="margin-top:13px; margin-left:13px; "></i>';
        break;
    case 2:
        $result .= '<i class="text-info fas fa-sign-out-alt pull-left" style="margin-top:13px; margin-left:13px; "></i>';
        break;
    case 3:
        $result .= '<i class="text-info fas fa-chevron-circle-right pull-left" style="margin-top:13px; margin-left:13px; color:#3cbecc"></i>';
        break;        

}

Change the icon or color to your liking.

the result was :

I still do not try Brut's solution, later I'll tell you how it was

Best regards.

Valqui

[ArtcoInc]

@burt

Thank you

[♥raiwa]

8 hours ago, valquiria23 said:

Search in includes/classes/category_tree.php.

 if ( $level === 0 ) {
            $result .= $this->root_start_string;
          }

add below ......

else {
          
switch ($level) {

    case 1:
        $result .= '<i class="text-info fas fa-chevron-circle-right pull-left" style="margin-top:13px; margin-left:13px; "></i>';
        break;
    case 2:
        $result .= '<i class="text-info fas fa-sign-out-alt pull-left" style="margin-top:13px; margin-left:13px; "></i>';
        break;
    case 3:
        $result .= '<i class="text-info fas fa-chevron-circle-right pull-left" style="margin-top:13px; margin-left:13px; color:#3cbecc"></i>';
        break;      

You can include the root level in your switch case statement:

          switch ($level)
            case 1:
              $result .= '<i class="text-info fas fa-chevron-circle-right pull-left" style="margin-top:13px; margin-left:13px; "></i>';
              break;
            case 2:
              $result .= '<i class="text-info fas fa-sign-out-alt pull-left" style="margin-top:13px; margin-left:13px; "></i>';
              break;
            case 3:
              $result .= '<i class="text-info fas fa-chevron-circle-right pull-left" style="margin-top:13px; margin-left:13px; color:#3cbecc"></i>';
              break;      
            default:
              $result .= $this->root_start_string;
          }

The default value will apply on the root categories (level 0) and all other levels not matching 1-3.

 

9 hours ago, burt said:

$OSCOM_CategoryTree->setSpacerString('<i class="fa fa-angle-right"></i> ', 1);

This is great to apply the same style for all subcategories, but doesn't allow to use different styles for each level. Or do I miss something?

[burt]

3 hours ago, raiwa said:

This is great to apply the same style for all subcategories, but doesn't allow to use different styles for each level. Or do I miss something?

It's what the OP asked for.

[♥raiwa]

16 hours ago, valquiria23 said:

As I am going to use few levels of categories, so with my little knowledge of programming I use this code:

 I replace this line

/*         $result .= $link_title . '</a>';  */

with 

switch ($level) {
    case 0:
        $result .= $link_title . '</a>'; 
        break;
    case 1:
        $result .=   '111>&nbsp' . $link_title . '</a>'; 
        break;
    case 2:
        $result .=   '222>&nbsp' . $link_title . '</a>'; 
        break;
    case 3:
        $result .=   '333>&nbsp' . $link_title . '</a>'; 
        break;        
    default:
       $result .= $link_title . '</a>';
}

 

1 hour ago, burt said:

It's what the OP asked for.