Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

How to distinguish the sub categories in the category box?


valquiria23

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.  

 

Link to comment
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.

Link to comment
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

:heart: Community Oscommerce fan :heart: You'll find the latest osC community version here.

 

Link to comment
Share on other sites

Just do it. But if for an addon, please add the suggested default for users who forget to add all levels they use in their store.

Link to comment
Share on other sites

  • 2 months later...

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

:heart: Community Oscommerce fan :heart: You'll find the latest osC community version here.

 

Link to comment
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

 

 

 

Link to comment
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

:heart: Community Oscommerce fan :heart: You'll find the latest osC community version here.

 

Link to comment
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

Link to comment
Share on other sites

  • 4 months later...

If you download this add-on from the marketplace it is still missing

 

at the end. Just put another } under the one that is there

@burt using the code from the add-on the icon moves off center of the text depending on what device you look at it on margin-top:8px works for my laptop but for my phone it need to be the margin-top:13px

Using your below code in public_html/includes/modules/boxes/bm_categories.php is there a way of setting another string for sub category even if we need to add extra lines to public_html/includes/classes/category_tree.php

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

Or at the least stop it adding an extra icon for each sub category under

 

Link to comment
Share on other sites

Seems a bit over engineered to me, this can be done with just CSS.

I've done some basic CSS/HTML below to give you an idea, I've also created a fiddle for you https://jsfiddle.net/z6jhexLc/

ul.classOfParentUL > li { /* will target first level li tags only */ }
ul.classOfParentUL > li > a { /* will target first level li with a tags only */ }
ul.classOfParentUL > li > a::before { /* sets the icon of first level li with a tags */
	font-family: 'FontAwesome'; 
	content: '\f061'; 
  	/* If not using FontAwesome comment out or delete the two lines above*/
  
	/* content: '>'; */ 
  	/* If not using FontAwesome uncomment the line above */
	position: relative; 
	margin-right: 5px;
	font-size: 110%;
} 
ul.classOfParentUL > li > ul > li > a { /* will target second level li with a tags only */ }
ul.classOfParentUL > li > ul > li > a::before { /* sets the icon of second level li with a tags only */
	font-family: 'FontAwesome'; 
	content: '\f054'; 
  	/* If not using FontAwesome comment out of delete the two lines above*/
	
  	/* content: '>'; */ 
  	/* If not using FontAwesome uncomment the line above */
	position: relative; 
	margin-right: 5px;
	font-size: 110%;
} 
ul.classOfParentUL > li > ul > li > ul > li > a { /* will target third level li with a tags only */ }
ul.classOfParentUL > li > ul > li > ul > li > a::before { /* sets the icon of third level li with a tags only */
	font-family: 'FontAwesome'; 
	content: '\f138'; 
  	/* If not using FontAwesome comment out of delete the two lines above*/
	
  	/* content: '>'; */ 
  	/* If not using FontAwesome uncomment the line above */
	position: relative; 
	margin-right: 5px;
	font-size: 110%;
} 
<ul class="classOfParentUL">
  <li><a href="#">Category 1</a>
    <ul>
      <li><a href="#">2nd Level category 1</a></li>
      <li><a href="#">2nd Level category 2</a></li>
      <li><a href="#">2nd Level category 3</a></li>
      <li><a href="#">2nd Level category 4</a>
        <ul>
          <li><a href="#">Third Level category 1</a></li>
          <li><a href="#">Third Level category 2</a></li>
          <li><a href="#">Third Level category 3</a></li>
          <li><a href="#">Third Level category 4</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Category 2</a></li>
  <li><a href="#">Category 3</a></li>
  <li><a href="#">Category 4</a></li>
</ul>

 

If it still don't work, hit it again!

Senior PHP Dev with 18+ years of commercial experience for hire, all requirements considered, see profile for more information.

Is your version of osC up to date? You'll find the latest osC version (the community-supported responsive version) here.

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...