jQuery menu not loading PHP child categories

Question

We've had a custom jQuery menu which has worked well on our OpenCart store. However the 2nd level child categories will not display, the PHP isn't correct on either the altered or original menu. Anything with a category with 2 or more depth will not show.

So we have a 2 deep category at http://ocart.site/opencart/index.php?route=product/category&path=25_29_59

But you see it will not display in the main menu at http://ocart.site/opencart

If I add back in the default parts of the original default menu, it actually makes the breaks the menu. You can see the comparison of old and new menus at http://ocart.site/defaultmenutoJQ.html

Something is blocking the load of display somewhere, any ideas on what it could be?

Here is all the relevant code at JSFiddle https://jsfiddle.net/mtq5khz0/

  <?php if ($categories) { ?>
  <div id="cssmenu">
    <ul>
      <?php foreach ($categories as $category) { ?>
      <li><a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
          <?php for ($i = 0; $i < count($category['children']);) { ?>
          <ul>
            <?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
            <?php for (; $i < $j; $i++) { ?>
            <?php if (isset($category['children'][$i])) { ?>
            <li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
            <?php } ?>
            <?php } ?>
          </ul>
          <?php } ?>
        <?php } ?>
      </li>
    </ul>
  </div>
  <?php } ?>

Entire header code for OpenCart - Edited Code https://jsfiddle.net/v5vmLbjj/

Entire header code for OpenCart Default Installation https://jsfiddle.net/tneqy2qt/

(Category dropdown menu code, close to footer of code block)

and here is the JQuery menu code the PHP works with https://jsfiddle.net/ezhnnbsg/

why post a jsfiddle with the php? do you think it will miraculously turn into valid html ? — madalinivascu, Dec 20 '16 at 08:56
the site sees to display the subcategories correctly, you can see the children of the subcategory in the page of the subcategory — madalinivascu, Dec 20 '16 at 09:00
@merch89 can you update and include the output of `print_r($categories)` or `var_dump($categories)`? I think it has all the subcategories recursively and you need to do a recursive category *parent > children* for each category item. — Christos Lytras, Dec 23 '16 at 13:11
@madalinivascu i thing @Christos is right, Show the output of `var_dump($categories)` — Aabir Hussain, Dec 26 '16 at 10:29

score 3 · Answer 1 · answered Dec 20 '16 at 09:47

Your internal loop code seems quite odd. Following the code, it looks like it would work, but it's possible error prone. So I rewrote it a little:

if ($categories) {
    echo '<div id="cssmenu">';
    echo '  <ul>';
    foreach ($categories as $category) {
        echo '    <li><a href="' . $category['href'] .'">' . $category['name'] . '</a>';

        if (count($category['children']) > 0) {
            $columns = array_chunk($category['children'], ceil(count($category['children']) / $category['column']));
            foreach ($columns as $children) {
                echo '      <ul>';
                foreach ($children as $child) {
                    echo '        <li><a href="' . $child['href'] . '">' . $child['name'] . '</a></li>';
                }
                echo '      </ul>';
            }
        }
    }
    echo '    </li>';
    echo '  </ul>';
    echo '</div>';
}

Thanks Ronald, just having a bit of trouble integrating this. I have tried with https://jsfiddle.net/nfr1dmho and get this error https://doc-10-58-docs.googleusercontent.com/docs/securesc/3j8cv73604l8fr6lnv9jtes7d1iia283/1igdg0psbrb4frnr8d6o9mnnboj29h7c/1482480000000/06264479721830385231/06264479721830385231/0B3ArIuPt8mKRZjFHaG4xN1EtR1U?e=view — me9867, Dec 23 '16 at 09:57

score 0 · Answer 2 · answered Dec 23 '16 at 10:20

You using the double quotes within single quotes Try this

<?php 
     if ($categories) {
          echo "<div id='cssmenu'>";
             echo "  <ul>";
                  foreach ($categories as $category) {
                        echo "    <li><a href='".$category['href']."'>".$category['name']."</a>";

                              if (count($category['children']) > 0) {
                                   $columns = array_chunk($category['children'], ceil(count($category['children']) / $category['column']));
                                   foreach ($columns as $children) {
                                   echo '      <ul>';
                                        foreach ($children as $child) {
                                             echo "        <li><a href='" . $child['href'] ."'>" . $child['name'] . "</a></li>";
                                        }
                                   echo "      </ul>";
                                   }
                              }
                   }
                     echo "    </li>";
             echo "  </ul>";
         echo "</div>";
      }
?>

Sorry Vijaya, still no 3rd level cats coming through. Jquery code is above, the answer could lie in there maybe (Home » Category » 2nd Level Category » 3rd Level Category) — me9867, Dec 23 '16 at 12:20

score 0 · Accepted Answer · answered Dec 29 '16 at 08:07

If I understand you correctly, there are a couple of things that stand out to me from looking at your code.

Firstly, you are only looping through $categories and each $category['children']. To get to the '2nd Level' children, you will need to do another loop. eg:

if(!empty($category['children'][$i]['children'])) {
    echo '<ul>'; 
    foreach($category['children'][$i]['children'] as $children2) {
        echo '<li/>';
    }
    echo '</ul>'; 
}

The second issue I see is with your fiddle css.

You have this:

#cssmenu ul ul li a { font-size: 12px; font-weight: 400; z-index: 9999; width: 250px; padding: 11px 15px; text-decoration: none; color: #000; border-bottom: 1px solid rgba(150, 150, 150, .15); background: #ddd; webkit-font-size: 11.5px; }

and

#cssmenu .submenu-button { position: absolute; z-index: 99; top: 0; right: 0; display: block; width: 46px; height: 32px; cursor: pointer; border-left: 1px solid rgba(120, 120, 120, .2); }

#cssmenu .submenu-button is the class that triggers the dropdown so it needs a z-index above #cssmenu ul ul li a

So change it to this:

#cssmenu ul ul li a { font-size: 12px; font-weight: 400; z-index: 98; width: 250px; padding: 11px 15px; text-decoration: none; color: #000; border-bottom: 1px solid rgba(150, 150, 150, .15); background: #ddd; webkit-font-size: 11.5px; }

Notice z-index: 98; instead of z-index: 9999;?

Hopefully that helps solve your issue.

Hi, Any help on how I can incorporate that PHP into https://jsfiddle.net/mtq5khz0? — me9867, Jan 03 '17 at 14:24
It's the incorporating into the PHP of the Opencart header I am struggling with. I've marked your answer anyway. — me9867, Jan 04 '17 at 09:33
Thanks for that @merch89. If you can give me a dump of the ```$categories``` array, I can update my answer to incorporate that. — CUGreen, Jan 04 '17 at 09:54

jQuery menu not loading PHP child categories

3 Answers3