Jump to content
greasemonkey

Tell me about your Bootstrap categories box/menu?

Recommended Posts

A little back story and context.... I've had my bootstrap store up and running for almost 6 months. Things have been going very well.

 

Previously I was using 2.3.4 standard with iOSC - and in my standard (desktop and tablet) store was delivering my categories with a horizontal navbar with a megamenu.

 

As mentioned - things in almost all google analytics stats (specifically mobile and tablet) have improved greatly. With one VERY important exception.... Desktop.

 

We still receive 50% of our traffic from desktop - which results in 75% of our conversions (conversions percent and avg dollar value have improved on all viewports.... so no concern here).

 

Where I see an issue/problem (and to get to the point of my post) is in Desktop Pages/Session and Avg. Session Duration. Desktop has seen a 13% drop in pages/session and a 4% drop in avg session duration.

 

Other than the look feel of the store (on desktop) very little has changed. Same products (in fact about 20% more sku's) and same product categories.

 

The only BIG change in desktop was from the horizontal navbar with megamenu to a vertical superfish style (from here)

 

So, my self diagnosis is.... it must be the category menu that is causing the drop.... (in a megamenu all subcats and sub/sub cats where displayed on hover over a main category)

 

Unless you only have a few main categories - I feel a horizontal superfish/nabar style menu just doesn't work with responsive. Because we use container-fluid, as screen sizes change (even in desktop) the navbar would change.

 

I've recently hacked up @@kymation vertical superfish menu (link above) with thoughts from here to make a vertical style megamenu (I really like how it turned out) which I will display only on -lg- viewports. I look forward to testing it live on my site in the coming days to see if I am correct.

 

Others using bootstrap.... what are you doing for cat menu?

 

 

Share this post


Link to post
Share on other sites

More than 5 top level cats?

More than 1 subcat (SC) for any of those top level cats (TLC)?

 

Answer is yes to either (or both) of those...

 

Hori Menu is not correct for you in my opinion.

 

Let's take a typcial shop that has 15 TLC and each one has 5 SC with a few of those having further SC...

 

Brainstorming;

 

#1

Have a Hori Menu that shopowner has selected his 5 most important categories to run horizontal.

Each of those is limited to show just 1 level SC.

 

+ easy to code

+ bootstrap supportable

- not all TLC and/or not all SC show

- not quite right on XS

 

#2 

Have some flyout superfish style menu

 

+ shows all TLC and SC

- PITA to code for bootstrap

- complete fubar on XS view

 

#3

Have something like  #1 in views > XS

In XS (great band btw), dont show that Hori Menu, and instead create a new menu, maybe a dropdown just of TLC

 

+ good in > XS

+ good in XS

- does not show all TLC > XS and does not show SC in XS 

 

 

I'm sure we can put the hive mind at work and think of more options...


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest Responsive osCommerce CE (community edition) here

Share this post


Link to post
Share on other sites

Let's take a typcial shop that has 15 TLC and each one has 5 SC with a few of those having further SC...

does not sound typical to me. What about the best practise to show no more than 7 options ?

I would think 15 categories could be organised better in fewer TLC's (another great band with a rip) , with a megamenu, see the first level categories is just a hover away in desktop.

 

Mine (not bootstrap) is based on the Ubermenu wpmegamenu.com code, a rather popular wordpress commercial plugin. Have a look at the demo and see how it collapses from a single css source, no javascript trickery....


KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Share this post


Link to post
Share on other sites

A horizontal superfish menu can be adjusted to break into a accordion style at some breakpoint

 

The (small view) accordion can have technically unlimited subcategories, its an other question if that makes a sense, same for the expanded view

Share this post


Link to post
Share on other sites

@@burt and others.....

 More than 5 top level cats?

More than 1 subcat (SC) for any of those top level cats (TLC)?

Yes, 7 to 9 top level and many subcats with multiples...

 

#1 hori

+ easy to code

+ bootstrap supportable

- not all TLC and/or not all SC show

- not quite right on XS

I agree... I've mocked this up with both superfish and (tried) in bootstrap.... but its just not right for anyone with more than a few topcats. And not very "deep" in subcats. @@multimixer yes I've seen the responsive versions and no question some are very nice.... but again, it's just not right for "me" with the vast array of "lg" screen sizes.

#2 

Have some flyout superfish style menu

+ shows all TLC and SC

- PITA to code for bootstrap

- complete fubar on XS view

I "have" been using a superfish on large viewport - and then, the standard cat box/menu on sm and md... but also added something like THIS to compliment on all viewports - in particular xs.... I couldn't even attempt something like this in BS.... WAY beyond my very limited skill.

 Have something like  #1 in views > XS

In XS (great band btw), dont show that Hori Menu, and instead create a new menu, maybe a dropdown just of TLC

+ good in > XS

+ good in XS

- does not show all TLC > XS and does not show SC in XS

 

This is where I'm going..... Bootstrap is great.... don't get me wrong. My only issue is - I/we have to remember that it can't be all things to all viewports.

 

So, I'm looking to start a conversation on taking the next steps with bootstrap store - to optimize the category menu delivery for each viewport.

 

So at this time, I have 4 cat menu's.

 

1) In ALL viewports , I have something like THIS in the nav content module. The only issue is on xs viewport it's hidden in the hamburger menu....

 

2) So, in xs ONLY I added header content module version of above.

 

3) And then in sm and md I deliver the "stock" category box mod, which sorts to near the bottom.... where its probably not used often (ROOM for improvement?????). Plus (as mentioned) the nav content mod.

 

4) And now in lg (I actually deliver this at  1024px or greater to catch a landscape iPad) I'm delivering "my hacked up" version of the vertical megamenu. A "full" featured "rich" menu which delivers all 7 topcats and on hover open all sub and subsubs for each topcat. I would LOVE to figure this type of menu out in BS.

 

Maybe I'm over complimenting.... But I will be keeping a close eye on the 2 key stats in desktop, tablet and mobile in the coming days/weeks to see if there are any changes.

Share this post


Link to post
Share on other sites

@@greasemonkey, ok, install the default yamm menu into your BS store, get that working first.

 

Now, look at its list layout, can you imagine the section titles in the list layout being your top categories?

 

Next, basically, you want each list to be as output by this:

 

$category_tree = $OSCOM_CategoryTree->getBranch($node['id'])

 

Inside your navbar, output yamm this way...

 

          <li class="dropdown">
            <a href="<?php echo tep_href_link(FILENAME_DEFAULT, 'cPath=' . $node['id'], (($request_type == 'SSL') ? 'SSL' : '')); ?>"><?php echo strtoupper($node['name']); ?></a>
            <ul class="dropdown-menu">
              <li>
               <div class="yamm-content">
                  <div class="row">
<?php
                    $OSCOM_CategoryTree->setFollowCategoryPath(false);
                    $OSCOM_CategoryTree->setShortCode(true);
                    $OSCOM_CategoryTree->setSpacerString('  ', 3);
                    $OSCOM_CategoryTree->setParentGroupString('<ul class="nav nav-pills nav-stacked">', '</ul>', true);
                    $category_tree = $OSCOM_CategoryTree->getBranch($node['id']);
                    echo $category_tree;
?>
                  </div>
                </div>
              </li>
            </ul>
          </li>

 

Ok, if a category has mulitple sub cat, they will stack. So for now I manually use js to remove the nav-stacked class so the sub cat will go acorss...down the line when I may come up with something more eloquent but this is a quick fix...

 

<script>
  $('#nav-menu .yamm-content:eq(1) ul:nth-child(1)').removeClass('nav-stacked');
  $('#nav-menu .yamm-content:eq(2) ul:nth-child(1)').removeClass('nav-stacked');
</script>
 

 

Also, depending on how many levels of cat you have, it is obvious that you may want to limit that...also, I have added a way to define when a cat is what I call a nav node...so this mega menu outputs only nav nodes on top....

 

This was the concept I had used to implement Yamm, and the codes above include I think the lines you need to move forward with Yamm...I did a lot of upgrade to the catagories as well as had extended the cat tree class for other functionalities so I think if I post my codes here they would just be darn confusing...

 

If you put your codes on github or something I will look at it and help when i can...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×