Jump to content

Recommended Posts

@rmandiga This is contribution that was developed for use with the BS or responsive version of osC....is that the version you are using?  You mentioned 2.34 which is a version before the one this add on was developed for but maybe that was just a typo.

Dan

Share this post


Link to post
Share on other sites

@Tsimi   @GLWalker

Well peeps, I'm back again .... :huh:

 

As I have indicated before, I had converted this to a navbar module. Here's my 'new' problem ...

When I was testing this, I was using the stock osCommerce installation, including all the stock categories. The code was working fine, or so I thought ...

595eb964dbed7_ScreenCapture-07-06-2017-A.JPG.2dd8a8359c047b794496dfa837fe0b2d.JPG

It even expands out nicely ...

595eb9a1c632e_ScreenCapture-07-06-2017-B.JPG.b38d3fbce72afae75083c6e867876278.JPG

 

But .... I ran into a problem when the length of the names of the categories were too short. The names of all the categories are displayed in a <ul><li></li></ul>  list, and because of the style associated with this particular list, the names wrap ...

595eba52ece3b_ScreenCapture-07-06-2017-C.JPG.2b95ebf21a2afc47e89d94e2dd167ffb.JPG

 

A quick Google search says that to prevent the list from wrapping, I need to change the style from

float: left

to

display: inline-block

When I try that using Inspect Element in Firefox (or Firebug), changing that ALSO changes the entire navbar, screwing that up.

I'm sure I just need to assign an unique class to the list, and style that, but I could use a little help ...

Thanks!

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

Hi Malcolm

You are persistent, aren't you. :)

Do you have the code or module for download somewhere so that we can install this? 

Have you tried to set a min-width to prevent it from shrinking?

Share this post


Link to post
Share on other sites

@Tsimi

I'll zip it all up in the morning.

I don't know what, or how, to min-width it. When this first happened to me, I had a couple of short category names and a couple of long ones. The short ones wrapped. Looked really odd :blink:

Been waiting for Edge to pass PHP 7 before I updated my site(s), so it was now time to get to work on them.

Malcolm

Edited by ArtcoInc

Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@ArtcoInc

Sorry for getting so late back to you regarding this menu stuff.
Inside the ../templates/catmenu.php file you added a class named maruko?

If so try to add the following above inside the <style> tags.

li, .maruko, li {
	min-width: 100px;
}

Tell me if this fixes it for you. It did for me.

Share this post


Link to post
Share on other sites

@Tsimi

Yes, I added a class named maruko in the attempt to solve this. But, I ended up not using it. After I spent a day or so on this, this is what I came up with ...

This fixed the categories drop-down ..

.nav.navbar-nav > li {
  clear: left;
}

but, it broke the right side of the NavBar, so I had to add this:

.navbar-right > li {
  float: right !important;
}

That fixed things on the large screen, but broke the small screen (no, I'm not using your small screen code ... sorry)

So, I added this ...

@media(max-width:767px) {
  .navbar-right > li {
    float: left !important;
  }
}

And now, it's working for me .... mostly. In large screen mode, the first Categories drop-down is double spaced, while all of the sub-categories are single spaced. And, I run into a few color shift issues in small screen mode. But, for the most part, I think I can live with it. I've moved on to other things now.

Thank you anyway!

Malcolm

 


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@Tsimi

 

9 hours ago, Tsimi said:

@ArtcoInc

Sorry for getting so late back to you regarding this menu stuff.
Inside the ../templates/catmenu.php file you added a class named maruko?

If so try to add the following above inside the <style> tags.


li, .maruko, li {
	min-width: 100px;
}

Tell me if this fixes it for you. It did for me.

Did you try this with a mix of long and short category names? Like, at least one long category, and several short ones?

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

You don't want to change core bootstrap code. Those classes that you changed can affect other places too.

Using a custom class like maruko is the way to handle this without affecting other places of your store. 

Edited by Tsimi

Share this post


Link to post
Share on other sites
1 minute ago, ArtcoInc said:

@Tsimi

 

Did you try this with a mix of long and short category names? Like, at least one long category, and several short ones?

Malcolm

Yes I did.

Share this post


Link to post
Share on other sites

@Tsimi

I will test your solution later. Thank you very much!

Do note that I did not change any core code. This is all CSS code in the module itself, and that what I was adjusting was only for the navbar

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@Tsimi

I tested your solution, and it works great. It even fixed another small issue I was having. Thank you!

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@Tsimi

Let's try this one more time ... :cool:

I am a distributor for a small overseas manufacturer, and I am working on a website for their products. While this is my website, I do want the manufacturer to be happy with it too. While I have spent a lot of time getting the menu system to work the way I like, alas, they don't care for it ... <sigh>

So, I am again trying to adapt the Horizontal Categories Menu BS to my site. The stock installation went fine, but I have two issues I want to address ...

1) I want the menu to only display the top-level categories. This way, the customer has to click into the top-level category before being able to click into either a lower-level category, or into individual products.

2) I also want to change the Categories Menu XS from a Header module to a NavBar module, so that the menu structure does not interrupt the flow of the screen, I've only just begun working on this, but I don't think this will be a problem.

I may have more questions once I start playing around with the CSS to style the page. Until then ...

TIA!

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

*** Update ***

I guess it wasn't as difficult as I thought it might be :cool:

1) To display only the top-level categories, I only had to comment out the sub-category code in /includes/classes/catmenu.php

          if (isset($this->_data[$category_id]) && ($level != 0)) {

// --- Commented out the following to only show the top level categories --- 10-01-2017

//            $result .= '<li class="dropdown dropdown-submenu"><a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">';
//            $caret = '';
//
//          } elseif(isset($this->_data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level + 1))) {
//            $result .= $this->root_start_string;
//            $result .= '<a href="#" tabindex="-1" class="dropdown-toggle" data-toggle="dropdown">';
//            $caret =   ' <span class="fa fa-caret-down"></span>';
                        
          } else {
            $result .= $this->child_start_string;
            $result .= '<a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">';           
            $caret = false;
          }

59d27d000a1fa_ScreenCapture-10-02-2017-A.JPG.e37f9377c5ed02e0180a8543a8d71844.JPG

2) I then converted the Categories_Menu_XS module from a Header module to a Navbar module. This cleaned up the screen in XS mode

59d27d68d9756_ScreenCapture-10-02-2017-B.JPG.0b71c8e813aaeeee25daa604291b88fe.JPG

When the customer clicks on the Hamburger ...

59d27d9f2b66f_ScreenCapture-10-02-2017-C.JPG.68dd38d541501f752b3307492ce0e380.JPG

And when they click on the Products drop-down ...

59d27ddb8bc99_ScreenCapture-10-02-2017-D.JPG.87e0c2985970308bdf9bc3d3c1800235.JPG

I also had to make the same changes to the /includes/classes/catmenu-xs.php file to only show the top-level categories.

Now to see if my supplier likes it :ph34r:

Malcolm

Edited by ArtcoInc

Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@Tsimi

Hi, ..very nice contribution!

I know the instructions file says that XS menu will only show in SM and XS viewport however, I was wondering if there is a way to have this altered to respond to media screen width instead?, ..or perhaps there is another responsive menu module that I could use with the Horizontal Categories Menu?

 

 

 


osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites

@Tsimi

Also, I found a minor error: in /includes/classes/catmenu_xs.php line 64 is missing an opening <span> tag for the nested span set. It should be:

$root_link_title =  '<strong><span><span class="fa fa-list fa-lg"></span>&nbsp;' . $link_title . '</span></strong>';

 


osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites

@Demitry

Thanks for spotting the lonely span tag.
You better change that line of code to this

$root_link_title =  '<strong><span class="fa fa-list fa-lg"></span>&nbsp;' . $link_title . '</strong>';

There is no need to keep that empty span tag there.

What exactly do you mean with

Quote

if there is a way to have this altered to respond to media screen width instead

The XS and SM view are controlled via media setting inside the default bootstrap css file(s).

Edited by Tsimi

Share this post


Link to post
Share on other sites

@Tsimi While I have you here ... :ph34r:

In /includes/modules/content/header/templates/catmenu.php, you have ...

<?php
  if(MODULE_CONTENT_HEADER_CATMENU_XS_STATUS == 'True') {
    echo '<div id="catMenu" class="col-sm-12 hidden-xs hidden-sm">';
  } else {
    echo '<div id="catMenu" class="col-sm-12">';
  }
?>

  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target="#bs-navbar-collapse">
        <span class="sr-only">Toggle Navigation</span>
          <i class="fa fa-chevron-down"></i> <?php echo TEXT_COLLAPSE_MENU; ?>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="bs-navbar-collapse">
      <?php echo build_hoz(); ?>
    </div>
  </nav>
</div>

This is a Header module. If I may ask, why do you have all of the navbar classes? I had troubles adjusting the CSS for this module without changing the CSS I already had for my existing navbar modules.

For my store, I have this menu showing for the SM, MD, and LG modes. I then converted the Catmenu_XS module to a Navbar module. (see post above)

What I ended up doing was stripping out all of the formatting in this file. And, since the Catmenu_XS module is now a Navbar module, I also added a test for it too.
 

<?php
  if(MODULE_CONTENT_HEADER_CATMENU_XS_STATUS == 'True') {
    echo '<div id="catMenu" class="col-sm-' . MODULE_CONTENT_HEADER_CATMENU_CONTENT_WIDTH . ' hidden-xs">';
  } elseif (MODULE_NAVBAR_CATMENU_XS_STATUS == 'True') {
    echo '<div id="catMenu" class="col-sm-' . MODULE_CONTENT_HEADER_CATMENU_CONTENT_WIDTH . ' hidden-xs">';
  } else {
    echo '<div id="catMenu" class="col-sm-' . MODULE_CONTENT_HEADER_CATMENU_CONTENT_WIDTH . '">';
  }
?>

  <?php echo build_hoz(); ?>
</div>

(Oh, and I also added the ability to set the Content Width, even if it wasn't really necessary)

This seems to be working for me :cool:. Thanks!

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@ArtcoInc

The reason why the navbar classes are there is simple. If you use the module as stand alone without the XS menu then you need those navbar classes for the SM and XS view mode.

Share this post


Link to post
Share on other sites

@Tsimi

hey Lambros, ..thank you for the reply.

yeah, I thought that containing span tag was unnecessary, but I figured I'd stay consistent with the rest of the contribution because /includes/classes/catmenu.php has the same nested span set on line 70. I'll remove them in both files.

As far as the other thing, I'm a bit new to BS and I did not want to alter that BS grid structure for XS and SM. I'll take a look at that file today.

I redesigned the header layout and was looking to have the horizontal menu change to the compact mobile version, but at a screen width that would accommodate my layout design. That change needs to be made where the screen width is smaller than the one controlled by the BS grid for XS and SM.

So, I need to find a solution to somehow manage that switch, ..whether from the user.css file or some other place. Is there a specific file and code block where I could change it so that it responds to my own setting for screen width to switch over to the compact mobile version menu? Thanks.

 


osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites

@Demitry

What you want is to change the so called brakepoint when the navbar collapses. I have no access to a my data at this very moment but this following links might help you get what you want or at least let you understand how those brakepoints work.

https://stackoverflow.com/questions/19827605/change-bootstrap-navbar-collapse-breakpoint-without-using-less

https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint

You could also create your own customized bootstrap css file set by accessing the getbootstrap website.

 

Share this post


Link to post
Share on other sites

@Tsimi

cool, ..thanks Lambros

somehow I had to write three paragraphs to say that I needed to change the brake-points for when the navbar collapses. lol

I'll take a look at these links now.

 


osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

Share this post


Link to post
Share on other sites

@Demitry

So finally I got access to my data.
Here is a piece of css code that I use on a non-osC website to force it to show the hamburger menu button (top-right) already at the SM view mode. (Normally that menu button shows only in XS view mode.)
Add the code below into your user.css file and try to change max-width: 992px to any width size you like. See if that does the trick.

Be aware that this will affect not only the horizontal menu but also the stock osC Navbar.

@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
		margin-top: 7.5px;
	}
	.navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
  		display:block !important;
	}
	.visible-xs-block {
		display: block !important;
	}
}

 

Edited by Tsimi

Share this post


Link to post
Share on other sites

@Tsimi

hey Lambros,

I appreciate the follow-up. Actually, I did not need to change any of the CSS for that. The default state of the navbar collapse break-point is 992px (I think). And I needed it to be 767px. So, I resolved it by making the following two changes.

1) /includes/modules/content/header/templates/catmenu.php

removed class hidden-sm on line 17, so that it looks like this:

echo '<div id="catMenu" class="col-sm-12 hidden-xs">';

2) /includes/modules/content/header/templates/catmenu_xs.php

removed class visible-sm on line 20, so that it looks like this:

<div id="dl-menu" class="dl-menuwrapper visible-xs" style="z-index:10000;">

 

That's it! Works awesome! ...and btw, I love that it is two separate modules, because this way I can just change the sort order and make the XS menu display at the top of the page for mobile devices. Thank you for all your help.

Demitry


osCommerce: made for programmers, ...because store owners do not want to be programmers.

https://trends.google.com/trends/explore?date=all&amp;geo=US&amp;q=oscommerce

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

×