burt Posted October 11, 2018 Share Posted October 11, 2018 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 More sharing options...
MrPhil Posted October 11, 2018 Share Posted October 11, 2018 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 More sharing options...
valquiria23 Posted October 11, 2018 Author Share Posted October 11, 2018 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 Community Oscommerce fan You'll find the latest osC community version here. Link to comment Share on other sites More sharing options...
♥raiwa Posted October 11, 2018 Share Posted October 11, 2018 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. About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
valquiria23 Posted December 31, 2018 Author Share Posted December 31, 2018 Just publish the addon. Thanks to everyone who helped. Community Oscommerce fan You'll find the latest osC community version here. Link to comment Share on other sites More sharing options...
MyBookShop Posted January 2, 2019 Share Posted January 2, 2019 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 Link to comment Share on other sites More sharing options...
valquiria23 Posted January 2, 2019 Author Share Posted January 2, 2019 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; } } Community Oscommerce fan You'll find the latest osC community version here. Link to comment Share on other sites More sharing options...
MyBookShop Posted January 3, 2019 Share Posted January 3, 2019 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 More sharing options...
valquiria23 Posted January 3, 2019 Author Share Posted January 3, 2019 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 Community Oscommerce fan You'll find the latest osC community version here. Link to comment Share on other sites More sharing options...
ArtcoInc Posted January 3, 2019 Share Posted January 3, 2019 @MyBookShop Do you have this installed on a live site? If so, can you post (or pm) your site URL? M Link to comment Share on other sites More sharing options...
stratula Posted January 9, 2019 Share Posted January 9, 2019 @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 More sharing options...
valquiria23 Posted January 9, 2019 Author Share Posted January 9, 2019 Thank you very much @stratula for notifying that error. That is already fixed!!! Best regards. Valqui Community Oscommerce fan You'll find the latest osC community version here. Link to comment Share on other sites More sharing options...
SCH_001 Posted June 4, 2019 Share Posted June 4, 2019 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 More sharing options...
peterbuzzin Posted June 4, 2019 Share Posted June 4, 2019 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.