We are almost there...the new code you wrote functions properly -- almost...it does configure $div_class.
Unfortunately its logic is off somewhere.
Here is the new code (I renamed the styles and configured it for <li> instead of <span> because the indent/separator does not do word wrap, LI does word wrap...
Things I see happening:
- The styles don't apply unless they are also on the A tag as well as the LI tag, I don't yet know why...I don't think this is the code's fault.
- The logic doesn't apply properly somehow.
What should happen:
- click a category, show products within category, do not show other categories' products
- click any product within category, show products within the product's category
- click a new category, show its products, hide all other categories' products
- if the page is not a category or product page show no products
What happens with current code:
-
product LI tags are not nested under category LI, I have not figured where/how to emplace the UL tags to properly nest the products under the category. The UL tag cannot be contained within $content because then every LI gets an UL which we don't want, even the default tpl_categories.php does not use UL tags...If you have any suggestions that would be great...
-
classes don't work unless applied to the A tag -- I don't yet know why, I don't think this is the code/sidebox's fault though, I also don't know if this is something to do with Bootstrap, I'm not sure...even default tpl_categories.php applies classes to A tag...
Here is the current code, then I'll explain what actually happens upon clicking things :)
CSS CODE:
.category {color: green;}
.category-current-product-selected {color: blue;} /* is never used */
.category-selected-products {color: pink;}
.category-any-other-product {color: yellow; }
.category-current-category-selected {color: purple;}
Using colors is easier for initial testing, but I did test a little with display:none and noticed that using display:none leaves a gap between category names where the products would normally be...I think this is because display:none gets applied only to the A tag
PHP CODE:
$content = "";
$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
for ($i=0;$i<sizeof($box_categories_array);$i++) {
// 2/7/13 new code to show/hide products
$div_class='category';//default to unselected cat tag
if ($products_id && ($box_categories_array[$i]['products_id']==$products_id)) {//current product page
$div_class='category-current-product-selected';
}elseif (zen_get_products_category_id($box_categories_array[$i]['products_id']) == $cPath){//all products under current
category
$div_class='category-selected-products';
}elseif ($box_categories_array[$i]['products_id']) {//any other product in other categories
$div_class='category-any-other-product';
}elseif (($current_category_id!=0)&&($box_categories_array[$i]['category_id']==$current_category_id)){//current category
$div_class='category-current-category-selected';
}
// some debug code
//echo ' products_cat1=' . zen_get_products_category_id($products_id);
echo ' products_cat=' . zen_get_products_category_id($box_categories_array[$i]['products_id']);
// set top style
if ($box_categories_array[$i]['top'] == 'true'){
$a_class = 'category-top';
}elseif($box_categories_array[$i]['has_sub_cat']){
$a_class = 'category-subs';
}else{
$a_class='category-products';
}
// link to cat or prod
if ($box_categories_array[$i]['is_product'] == true){
$link = zen_href_link(FILENAME_PRODUCT_INFO, $box_categories_array[$i]['path']);
}else{
$link = zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']);
}
//indent
if($box_categories_array[$i]['is_product'] == true){
$indent = str_repeat(CATEGORIES_SUBCATEGORIES_INDENT, $box_categories_array[$i]['level']+1);
}else{
$indent = str_repeat(CATEGORIES_SUBCATEGORIES_INDENT, $box_categories_array[$i]['level']);
}
//cat sub separator
if (($box_categories_array[$i]['level'] == 0)&&($box_categories_array[$i]['is_product'] == false)){
$separator = '';
}else{
$separator = CATEGORIES_SEPARATOR_SUBS;
}
// count
$count='';
if (SHOW_COUNTS == 'true') {
if($box_categories_array[$i]['is_product'] != true){
$count = CATEGORIES_SEPARATOR.CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] .
CATEGORIES_COUNT_SUFFIX ;
}
}
//add content
// this content line works, div_class only works on the a tag, why??
$content .= '<li class="'. $div_class . '">'. '<a class="'. $div_class . ' " href="'. $link .'">'.
$box_categories_array[$i]['name'] .'</a>'. $count . '</li>';
//$content .='<ul>';
// this correctly assigns class to li but the class does not work...
//$content .= '<li class="'. $div_class . '">'. '<a href="'. $link .'">'. $box_categories_array[$i]['name'] .'</a>'.
$count . '</li>';
// this correctly assigns class but class does not apply, why?? also need an ul to nest these li elements
//$content .= '<span class="'. $div_class . '"><li>'. '<a href="'. $link .'">'. $box_categories_array[$i]['name'] .'</a>'. $count . '</li></span>';
// this content line works
//$content .= '<span class="'. $div_class . '">'. $indent.$separator . '<a class="'. $a_class . ' ' . $div_class . ' " href="'. $link .'">'. $box_categories_array[$i]['name'] .'</a>'. $count . '</span><br />';
// this content line does not work
// $content .= '<span class="'. $div_class . '">'. $indent.$separator . '<a class="'. $a_class . ' ' . ' " href="'. $link .'">'. $box_categories_array[$i]['name'] .'</a>'. $count . '</span><br />';
//$content .='</ul>';
}
What happens when clicking links:
Click the home page header links:
all cats = pink (wrong, should be green)
all prods = yellow, should not appear, display: none not being used anywhere
Click category link containing products:
current cat name = purple (correct)
current cat prods = pink (correct)
other cats = green (correct)
product under other cats = yellow, should not appear
Click any product link within category (becomes current category by default):
current cat name = pink (wrong, should be purple)
current cat prods = yellow (wrong, should be pink)
other cats = pink (wrong, should be green)
product under other cats = yellow, should not appear
Click any category with no products (edge case, will not happen):
current cat name = purple (correct)
current cat prods = pink (correct)
other cats = green (correct)
product under other cats = yellow, should not appear
Click any other page link besides home page or cat/prod:
all cats = pink (wrong, should be green)
all prods = yellow, should not appear, display: none not being used anywhere
Does this make any sense?? Can send snapshots if you wish...
Not rushing this, customer (people at work) will be told it will be ready when it's ready
Thank you for reading this, Tom
