Jump to content

OpenCart webshop menu coding (recoding menu for design)

Recommended Posts

Hello W3Schools! Its been a while :)


I am trying to help a friend setting up he's webshop. It is already online but trying to make it look more nice according to webdesign template :) - this is hes website shop (www.thai-online.dk)


i have already changed A LOT on this design, now i mostly need the menu...


as you see the menu navigation has a lot of categories, and he told me that he wanted to add a lot more in the future if this shop could run online, so i am trying to figure out a solution for this.


I already like the design myself, except the menu, so i have come to a solution that i am working on and hopefully you can help me out, work with me.


As you see i currently have added 13 Categories, now my idea is to code some PHP into the menu on OpenCart so that if the menu design is ABOVE "1100px" in width AND has more than 7-8 categories on the menu, it will only show the 7-8 categories and at the end of it all show a little plus sign "+", when clicked on the plus sign a little side-menu will appear out from that little plus sign.


The reason for using the 1100px width thing is to know if its on a pc orr on a mobile (if you know a better way please tell me, this is just to show you what i want)


i know for sure the "plus sign" already has been made somewhere, but how to actually do it?


We are using opencart version or something like that... this is the code i found on the .tbl file:

            <?php foreach ($categories as $category) { ?>
            <?php if ($category['children']) { ?><li class="dropdown"><a href="<?php echo $category['href']; ?>" class="dropdown-toggle" data-toggle="dropdown"><span><?php echo $category['name']; ?></span>  <img width="8" height="8" class="menu-close" src="catalog/view/theme/atr374opc2101/image/menu_close.gif" /><img width="8" height="8" class="menu-open" src="catalog/view/theme/atr374opc2101/image/menu_open.gif" /></a>
          <div class="dropdown-menu">
          <div class="dropdown-inner">
            <?php foreach (array_chunk($category['children'], ceil(count($category['children']) / $category['column'])) as $children) { ?>
            <ul class="list-unstyled">
            <?php foreach ($children as $child) { ?><!--
            --><li><a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a></li><!--
            --><?php } ?>
            <?php } ?>
          <a href="<?php echo $category['href']; ?>" class="see-all"><span><?php echo $text_all; ?> <?php echo $category['name']; ?></span></a></div>
        </li><?php } else { ?><!--
        --><li><a href="<?php echo $category['href']; ?>"><span><?php echo $category['name']; ?></span></a></li><?php } ?>
            <?php } ?>

On another note, we are also using BootStrap (latest version) to make the design responsive. And the reason why i use the 1100px width, like i said before is because of knowing if the screen is that wide AND to tell if i should be adding the category addon... if the screen however is less than 1100px (or so...), the menu should be normal.


Reason why i do this is because i already like the responsive design, i only need to edit the PC-Screen design a little bit so the menu can fit without problems.


Hope you all can help out one way or another, still struggling with this little thing :)


Thanks in advance and again, its been a while, so..... HELLO ;):P


// rootKID

  • Like 1
Link to post
Share on other sites

i know this, but the problem is that we have "bought" a new design, and the design was not designed to handle stuff like this (that i am aware off). What other menus are you talking about? If you have some ideas that could help or a guideline that would be great :)


Thanks for the answer tho :P

Link to post
Share on other sites
  • 2 weeks later...

If there was a post there that got deleted before I replied, I didn't see it. Regardless, there's no reason to lob insults, and there's no reason to call people names. If you feel different please feel free to follow up via PM.

Link to post
Share on other sites
This topic is now closed to further replies.
  • Create New...