Jump to content
rootKID

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 2.0.1.2 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 } ?>
            </ul>
            <?php } ?>
          </div>
          <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

Share this post


Link to post
Share on other sites

There are plenty of responsive menus you can look at which might help. Otherwise, maybe treat the plus sign as just another category in the menu.

Share this post


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

Share this post


Link to post
Share on other sites

WHAT THE ARE YOU GOING ON ABOUT? 3 posts you have made, 3 posts unrelated to topics you replied to, why don't you go play with your little childish game somewhere else.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Don't worry about it, its what everyone has got use to from moderators of this forum, in that left hand does not know what right hand is doing, and blame someone else when it goes wrong.

Share this post


Link to post
Share on other sites

There's not an excuse for flaming the forum. If you see a problematic post, report it.

 

Since this thread has gone off the rails, I'll close it.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×