Category Powered Decision Tree - show subcategories of selected category, show children of parent category

3 posts by 3 authors in: Forums > CMS Builder
Last Post: May 10, 2017   (RSS)

By Mikey - April 21, 2017

I need to build a Category Powered Decision Tree. In order to get this to work I need to show the next (children) category options of a selected (parent) category.

Example:

1) When you first visit the page, only the top tier categories should be listed. Top tier categories will need to always be shown.
2) Once you click on a top tier category, it's next subcategories appear as options that can be clicked.
3) Once you select a subcategory - the next subcategories appear as additional options that can be clicked... and so on.

I've attached an image for reference. In the image you can see that "Economy Car > City Cars" have been selected. Since City Cars is selected, I need "Microcar and Ultracompact Car" to be show as the next possible selection options... indicated with the red lines. If the user selects Microcar "Economy Car > City Cars > Microcar" then the next selection options "Supermini and Compact Car" would appear as selection options... allowing the user to drill down on the next available options to choose from, and so on.

Anyone have any suggestions on how to make the "Next" possible category options (which have not been selected as of yet) appear for it's selected parent category?

Below is the code I'm working with.

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
  /* STEP 1: LOAD RECORDS - Copy this PHP code block near the TOP of your page */

  // load viewer library
  $libraryPath = 'cmsb/lib/viewer_functions.php';
  $dirsToCheck = array('/home/abcd/public_html/','','../','../../','../../../');
  foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
  if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }

  // load records from 'vehicle_decision_tree'
  list($vehicle_decision_treeRecords, $selectedvehicle_decision_tree) = getCategories(array(
    'tableName'            => 'vehicle_decision_tree', //
    'categoryFormat'       => 'showall',  // showall, onelevel, twolevel, breadcrumb
    'defaultCategory'      => 'first',    // Enter 'first', a category number, or leave blank '' for none
    
    // advanced options (you can safely ignore these)
    'rootCategoryNum'      => '',      // Only categories _below_ this one will be shown (defaults to blank or 0 for all)
    'ulAttributes'         => 'class="tree"',      // add html attributes to <ul> tags, eg: 'class="menuUL"' would output <ul class="menuUL">
    'selectedCategoryNum'  => '',      // this record number is returned as the "selected category", defaults to getLastNumberInUrl()
    'ulAttributesCallback' => '',      // ADVANCED: custom function to return ul attributes, eg: 'myUlAttr' and function myUlAttr($category) { return "id='ul_uniqueId_{$category['num']}'"; }
    'liAttributesCallback' => '',      // ADVANCED: custom function to return li attributes, eg: 'myLiAttr' and function myLiAttr($category) { return "id='li_uniqueId_{$category['num']}'"; }
    'loadCreatedBy'        => false,   // loads createdBy.* fields for user who created category record (false is faster)
    'loadUploads'          => true,    // loads upload fields, eg: $category['photos'] gets defined with array of uploads (false is faster)
    'ignoreHidden'         => false,   // false = hide records with 'hidden' flag set, true = ignore status of hidden flag when loading records
    'debugSql'             => false,   // display the MySQL query being used to load records (for debugging)
  ));

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <style type="text/css">
    body          { font-family: arial; }
    .instructions { border: 3px solid #000; background-color: #EEE; padding: 10px; text-align: left; margin: 25px}
    .tree ul, .tree li {
        margin:0.5em;
    }
    .tree li {
        display:block;
        padding:12px;
        border:1px solid #000;
    }
    .tree > li > ul li {
        background:#f1f1f1;
    }
    .tree > li > ul li > ul li {
        background:#e4e4e4;
    }
    .tree > li > ul li > ul li > ul li {
        background:#cccccc;
    }
    .tree > li > ul li > ul li > ul li > ul li {
        background:#fff;
    }
  </style>
 </head>
<body>

<table border="1" cellspacing="0" cellpadding="2" width="100%">
  <tr>
    <td valign="top" width="45%">
     
      <h3>Category Menu</h3>
      <ul>
        <?php foreach ($vehicle_decision_treeRecords as $categoryRecord): ?>
          <?php echo $categoryRecord['_listItemStart'] ?>
      
          <?php if ($categoryRecord['_isSelected']): ?>
            <b><a href="<?php echo $categoryRecord['_link'] ?>"><?php echo $categoryRecord['name'] ?></a></b>
          <?php else: ?>
            <a href="<?php echo $categoryRecord['_link'] ?>"><?php echo $categoryRecord['name'] ?></a>
          <?php endif; ?>
      
          <?php echo $categoryRecord['_listItemEnd'] ?>
        <?php endforeach; ?>
      </ul>
    
    </td>
    <td valign="top" width="45%">
      
      <h3>Selected Category</h3>
      
    <?php if (!$selectedvehicle_decision_tree): ?>
      No category is selected!<br/>
    <?php endif ?>

    <?php if ($selectedvehicle_decision_tree): ?>
      Record Number: <?php echo htmlencode($selectedvehicle_decision_tree['num']) ?><br/>
      Parent Category: <?php echo htmlencode($selectedvehicle_decision_tree['parentNum']) ?><br/>
      Breadcrumb: <?php echo htmlencode($selectedvehicle_decision_tree['breadcrumb']) ?><br/>
      Name: <?php echo htmlencode($selectedvehicle_decision_tree['name']) ?><br/>
      Content: <?php echo $selectedvehicle_decision_tree['content']; ?><br/>
      _link : <a href="<?php echo $selectedvehicle_decision_tree['_link'] ?>"><?php echo $selectedvehicle_decision_tree['_link'] ?></a><br/>
    <?php endif ?>
      
      <br/><br/>
    </td>
  </tr>
</table>

</body>
</html>

Thanks, Zicky

Attachments:

Screen Shot 2017-04-21 at 4.03.51 AM.png 141K

By Toledoh - April 21, 2017

Hey Zicky,

I'd play around with some jQuery like http://stackoverflow.com/questions/39535411/toggle-childrens-when-parent-li-is-clicked

Cheers,

Tim (toledoh.com.au)