Jump to content
Latest News: (loading..)
valquiria23

How to distinguish the sub categories in the category box?

Recommended Posts

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


I'm using oscommerce Edge v2.3.4.1

Get here the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

Share this post


Link to post
Share on other sites

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 = '';

 

Share this post


Link to post
Share on other sites

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>';

 

Share this post


Link to post
Share on other sites

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


I'm using oscommerce Edge v2.3.4.1

Get here the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;
          }
 

Edited by valquiria23

I'm using oscommerce Edge v2.3.4.1

Get here the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

Share this post


Link to post
Share on other sites

@valquiria23   there is an    /*       before this line

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

remove it 

Edited by Omar_one

Share this post


Link to post
Share on other sites

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


I'm using oscommerce Edge v2.3.4.1

Get here the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 


I'm using oscommerce Edge v2.3.4.1

Get here the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

 


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


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


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

@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?


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get the latest community-supported responsive "Frozen" release here

Share this post


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


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

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 :

66362814_categoriasdestacadas.jpg.03f74e387d8888bbaeb2b794afbd8408.jpg


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

Best regards.

Valqui

Edited by valquiria23

I'm using oscommerce Edge v2.3.4.1

Get here the latest osCommerce Online Merchant Community Bootstrap Edition v2.3.4.1 CE

Share this post


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

Edited by raiwa

Share this post


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


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


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

 

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

×