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

How to distinguish the sub categories in the category box?

Recommended Posts

For real?  Let it go.  OP asked;

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

My answer gave that, in the simplest possible way.  

 


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

Try to have some redundancy in how you visually present this, for people with different vision issues. Color by itself is no good for people with color vision problems ("color blindness"). Bold may not be distinguished by some. Didn't category display used to show --> arrows, with indented text? That may look old-fashioned, but everyone can see it (I don't know about screen readers/voice output). If your page is UTF-8, you can probably use real arrows and lines, for a crisp appearance. Something that looks and acts like File Explorer, with twistors to expand and collapse sections, would be ideal. Having good hints for screen readers (say "sub category" for each -->) would be perfect. Also make sure that you don't get too wide when presenting on a phone.


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get (stable) Frozen or (unstable) Edge. See also the naming convention and the latest community-supported responsive "Edge" release

Share this post


Link to post
Share on other sites

Hello Rainer @raiwa, como estas?

7 hours ago, raiwa said:

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

I prefer that the root level has a standard oscommerce format.

7 hours ago, raiwa said:

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

Since I'm going to have only 3 levels of sub categories with this code, I'm fine.
A person who has more levels of subcategories should add the missing cases if he wants to give them a particular style.

Do you think it's a good idea to publish it as an addon? If you can not do it, I could do it, that's if you allow me to use your code  :) 

Beso

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
Posted (edited)

Distinguish sub categories category box

This didn't seem to work on my mash up of a BS3 site. The whole site went  blank on editing and upload.

Could you post your complete .php file so I can compare. In case I cant follow the ridiculously simple instruction. :)

 

Ta

Edited by MyBookShop
Cuase i think better. Ans spell worse.

Share this post


Link to post
Share on other sites

Dear @MyBookShop

Please find the contents of my PHP file: includes/classes/category_tree.php

 

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

      
          
/*Begin Distinguish sub categories category box*/
 if ( $level === 0 ) {
            $result .= $this->root_start_string;
          } 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;
    case 4:
        $result .= '<i class="text-info fas fas fa-sign-out-alt pull-left" style="margin-top:13px; margin-left:13px; color:#3cbecc"></i>';
        break;        
    default:
       $result .= $this->root_start_string;
}
        
          }
/*End Distinguish sub categories category box*/

          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>';  
        
          if ( $level === 0 ) {
            $result .= $this->root_end_string;
          }

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

          if ( isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level+1)) ) {
            if ( $this->follow_cpath === true ) {
              if ( in_array($category_id, $this->cpath_array) ) {
                $result .= $this->_buildBranch($category_id, $level+1);
              }
            } else {
              $result .= $this->_buildBranch($category_id, $level+1);
            }
          }
          
          $result .= $this->child_end_string;          
        }
      }

      $result .= ((($level === 0) && ($this->parent_group_apply_to_root === true)) || ($level > 0)) ? $this->parent_group_end_string : null;

      return $result;
    }

    function buildBranchArray($parent_id, $level = 0, $result = '') {
      if (empty($result)) {
        $result = array();
      }

      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[] = array('id' => $category_link,
                            'title' => str_repeat($this->spacer_string, $this->spacer_multiplier * $level) . $category['name']);

          if (isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level+1))) {
            if ($this->follow_cpath === true) {
              if (in_array($category_id, $this->cpath_array)) {
                $result = $this->buildBranchArray($category_id, $level+1, $result);
              }
            } else {
              $result = $this->buildBranchArray($category_id, $level+1, $result);
            }
          }
        }
      }

      return $result;
    }

    function buildBreadcrumb($category_id, $level = 0) {
      $breadcrumb = '';

      foreach ($this->_data as $parent => $categories) {
        foreach ($categories as $id => $info) {
          if ($id == $category_id) {
            if ($level < 1) {
              $breadcrumb = $id;
            } else {
              $breadcrumb = $id . $this->breadcrumb_separator . $breadcrumb;
            }

            if ($parent != $this->root_category_id) {
              $breadcrumb = $this->buildBreadcrumb($parent, $level+1) . $breadcrumb;
            }
          }
        }
      }

      return $breadcrumb;
    }

/**
 * Return a formated string representation of the category structure relationship data
 *
 * @access public
 * @return string
 */

    public function getTree() {
      return $this->_buildBranch($this->root_category_id);
    }

/**
 * Magic function; return a formated string representation of the category structure relationship data
 *
 * This is used when echoing the class object, eg:
 *
 * echo $osC_CategoryTree;
 *
 * @access public
 * @return string
 */

    public function __toString() {
      return $this->getTree();
    }

    function getArray($parent_id = '') {
      return $this->buildBranchArray((empty($parent_id) ? $this->root_category_id : $parent_id));
    }

    function exists($id) {
      foreach ($this->_data as $parent => $categories) {
        foreach ($categories as $category_id => $info) {
          if ($id == $category_id) {
            return true;
          }
        }
      }

      return false;
    }

    function getChildren($category_id, &$array = array()) {
      foreach ($this->_data as $parent => $categories) {
        if ($parent == $category_id) {
          foreach ($categories as $id => $info) {
            $array[] = $id;
            $this->getChildren($id, $array);
          }
        }
      }

      return $array;
    }

/**
 * Return category information
 *
 * @param int $id The category ID to return information of
 * @param string $key The key information to return (since v3.0.2)
 * @return mixed
 * @since v3.0.0
 */

    public function getData($id, $key = null) {
      foreach ( $this->_data as $parent => $categories ) {
        foreach ( $categories as $category_id => $info ) {
          if ( $id == $category_id ) {
            $data = array('id' => $id,
                          'name' => $info['name'],
                          'parent_id' => $parent,
                          'image' => $info['image']);

            return ( isset($key) ? $data[$key] : $data );
          }
        }
      }

      return false;
    }

/**
 * Return the parent ID of a category
 *
 * @param int $id The category ID to return the parent ID of
 * @return int
 * @since v3.0.2
 */

    public function getParentID($id) {
      return $this->getData($id, 'parent_id');
    }

    function setRootCategoryID($root_category_id) {
      $this->root_category_id = $root_category_id;
    }

    function setMaximumLevel($max_level) {
      $this->max_level = $max_level;
    }

    function setRootString($root_start_string, $root_end_string) {
      $this->root_start_string = $root_start_string;
      $this->root_end_string = $root_end_string;
    }

    function setParentString($parent_start_string, $parent_end_string) {
      $this->parent_start_string = $parent_start_string;
      $this->parent_end_string = $parent_end_string;
    }

    function setParentGroupString($parent_group_start_string, $parent_group_end_string, $apply_to_root = false) {
      $this->parent_group_start_string = $parent_group_start_string;
      $this->parent_group_end_string = $parent_group_end_string;
      $this->parent_group_apply_to_root = $apply_to_root;
    }

    function setChildString($child_start_string, $child_end_string) {
      $this->child_start_string = $child_start_string;
      $this->child_end_string = $child_end_string;
    }

    function setBreadcrumbSeparator($breadcrumb_separator) {
      $this->breadcrumb_separator = $breadcrumb_separator;
    }

    function setBreadcrumbUsage($breadcrumb_usage) {
      if ($breadcrumb_usage === true) {
        $this->breadcrumb_usage = true;
      } else {
        $this->breadcrumb_usage = false;
      }
    }

    function setSpacerString($spacer_string, $spacer_multiplier = 2) {
      $this->spacer_string = $spacer_string;
      $this->spacer_multiplier = $spacer_multiplier;
    }

    function setCategoryPath($cpath, $cpath_start_string = '', $cpath_end_string = '') {
      $this->follow_cpath = true;
      $this->cpath_array = explode($this->breadcrumb_separator, $cpath);
      $this->cpath_start_string = $cpath_start_string;
      $this->cpath_end_string = $cpath_end_string;
    }

    function setFollowCategoryPath($follow_cpath) {
      if ($follow_cpath === true) {
        $this->follow_cpath = true;
      } else {
        $this->follow_cpath = false;
      }
    }

    function setCategoryPathString($cpath_start_string, $cpath_end_string) {
      $this->cpath_start_string = $cpath_start_string;
      $this->cpath_end_string = $cpath_end_string;
    }
  }


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

Thankyou, The only compare difference was

$cpath_start_string = '---',    //mine was $cpath_start_string = ''

Uploaded your file and while the site did not go blank this time, (must have been a formatting thing)  I could see no changes to the Categories menu.

I guess I will retry when I update the website to BS4.

 

Thanks

 

 

 

Share this post


Link to post
Share on other sites

Hello  @MyBookShop

My site is in BS3 so it should work without any problem.

You will not see the difference in the main categories, but when you enter to a sub category you will notice the difference.

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

@MyBookShop

Do you have this installed on a live site? If so, can you post (or pm) your site URL?

M


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

@valquiria23

I installed the addon but it didn't work on my CE/BS3.

After i tried the version of your category_tree.php it works fine.

/*Begin Distinguish sub categories category box*/
 if ( $level === 0 ) {
            $result .= $this->root_start_string;
          } 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;
    case 4:
        $result .= '<i class="text-info fas fas fa-sign-out-alt pull-left" style="margin-top:13px; margin-left:13px; color:#3cbecc"></i>';
        break;        
    default:
       $result .= $this->root_start_string;
}
        
          }
/*End Distinguish sub categories category box*/

The addon from the marketplace has a missing

 

at the end.

 

thanks for your work

Best Regards

Stefan

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

×