Jump to content

Recommended Posts

@Tsimi

one minor correction: in change #1 of my aforementioned post above,…

removed class hidden-sm on line 18


fantastic contribution! ..should really be a default or integrated option for osC BS Edge.

If there is one thing I’d suggest is to minify and combine the two javascript files into one and add the css from /ext/menu_xs/css/component.css and the css code in /includes/modules/content/header/templates/catmenu.php to the user.css file.

This would reduce the number of resources called in /includes/modules/content/header/templates/catmenu_xs.php file from three to one and help with page loading speed.

However, I realize that these changes would also add an extra step to the installation (via the user.css file addition) and make it slightly more technical for the non-techie user.


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

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

Share this post


Link to post
Share on other sites

There is definitely room for improvement.

At first there was only one module, the regular horizontal menu, which was good but not satisfying for me at XS view mode. So I created that XS menu. At that time all this "no core code changes" idea was new and modules just started to become the new standard.

I wanted to find a "drop in and install" solution without touch even one file. And it did work pretty good.

Now that our understanding of modules and hooks have improved we could start to make more changes to this small addon/app.

I am currently working on a different project with raiwa but once that is done I could take another look at this horizontal menu and see what can be improved.

Edited by Tsimi

Share this post


Link to post
Share on other sites

@Tsimi

Lambros,

no worries man, ..there's no need to change it, I was just making a suggestion. I installed BS Edge about a month and half back and am learning the new osC structure all over again.

It's good stuff, though it's not a turn-key solution and contrary to Burt and other top contributors, ..I believe it should be.

 


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

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

Share this post


Link to post
Share on other sites

Hi All, I'm trying to find a solution which shows all categories, from what I see, this seems to be one such solution, however after adding it, I cannot see anything on the page even though it states its been installed via the BS content side.

I'm one 2.34 version. There are no real mods as yet as I'm trying to get the basics sorted first.

Has anyone else had this issue?

Cheers, Legotyres

 

Share this post


Link to post
Share on other sites
10 hours ago, legotyres said:

Hi All, I'm trying to find a solution which shows all categories, from what I see, this seems to be one such solution, however after adding it, I cannot see anything on the page even though it states its been installed via the BS content side.

I'm one 2.34 version. There are no real mods as yet as I'm trying to get the basics sorted first.

Has anyone else had this issue?

Cheers, Legotyres

 

This Horizontal Menu addon is only compatible with osC Bootstrap the community build.
You can get osC Bootstrap or also known as osC BS here

Edited by Tsimi

Share this post


Link to post
Share on other sites

@Tsimi

hey Lambros,

How do I add pages to the menu for both modules? Pages like About Us, Contact, FAQ, etc.,

I looked for something in the admin area - kind of like WordPress has where you add pages and add them to the menu, but could not find it. Or do I need to hard code them into both modules?

I should add that I will be using the menus for more than just categories.

 

 

Edited by Demitry

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

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

Share this post


Link to post
Share on other sites

@Demitry

The horizontal menu adds/removes categories dynamically. Meaning the menu shows only categories, nothing else.
So if you want anything else but categories then yes you will have to hard code it into both modules/menus.

Edited by Tsimi

Share this post


Link to post
Share on other sites

@Tsimi

Right, that's what I thought. I don't think it should be a problem. I think it's just adding some <li></li> links code towards the end of the related class files. I'll have to take a look and see.

 


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

Yeah, it depends on the menu for the normal menu you need a <ul><li> combination and for the XS menu only <li>.
And no not in the classes file. You have to add it into the template files.

Or I just save you the head aches and show you the code. :tongue::biggrin:

Here for the normal menu

open .../includes/modules/content/header/templates/catmenu.php and look fore this code
 

<?php echo build_hoz(); ?>

Add right after it this
 

<?php   
echo '<ul class="nav navbar-nav">';
echo '<li><a href="' . tep_href_link('index.php') . '">' . TEST . '</a></li>';
echo '<li><a href="' . tep_href_link('index.php') . '">' . TEST2 . '</a></li>';
echo '<li><a href="' . tep_href_link('index.php') . '">' . TEST3 . '</a></li>';
echo '</ul>';
?>

For the XS menu

open .../includes/modules/content/header/templates/catmenu_xs.php and look fore this code
 

<?php echo build_hoz_xs(); ?>

Add right after it

<?php   
echo '<li><a href="' . tep_href_link('index.php') . '">' . TEST . '</a></li>';
echo '<li><a href="' . tep_href_link('index.php') . '">' . TEST2 . '</a></li>';
echo '<li><a href="' . tep_href_link('index.php') . '">' . TEST3 . '</a></li>';
?>

Of course you'll have to replace the links and add new text definitions. I just used TEST for ...well testing.
If you want to have those hard coded links before the categories then just place the codes I showed you above not after but before build_hoz...bla,bla,bla

Hope that helps.

Share this post


Link to post
Share on other sites

@Tsimi

Lambros,

Thanks man! That really helps...  I've modified the catmenu_xs.php templates to include the header buttons and a hamburger menu icon for tablets and mobile. For some reason I thought the end of the class file was the way to go because the list structure is defined there, but I'll def use the template files instead. Thanks again.

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

@Tsimi

hey Lambros,

I am almost finished with those two menu modules and my site header is looking really great!

I'm having a problem with the divider not displaying in the XS version. I added the insert statement to function install() and the MODULE_CONTENT_HEADER_CATMENU_XS_DIVIDER to the function keys() array in /includes/modules/content/header/cm_header_catmenu_xs.php ..then checked in admin and it shows the divider as enabled. However, it is not displaying in the actual menu. Do you know what it could be? did I miss something?


btw, I found this javascript fix for when the dropdown-menu goes off screen, ..in case you want to use it. I just added it to the script in /includes/modules/content/header/templates/catmenu.php bottom of page.

// fix for when the dropdown menu goes off screen
$(document).on('shown.bs.dropdown', function () {
  OffsetDropdown()

  $(window).on('resize.bs.dropdown', function () {
    OffsetDropdown()
  })
})

$(document).on('hide.bs.dropdown', function() {
  $(window).off('resize.bs.dropdown')
})

var OffsetDropdown = function() {
  var dropdown = $('.open>.dropdown-menu')

  if (dropdown.length == 0)
    return

  var rightOffset = dropdown.offset().left + dropdown.width()
  var browserWidth = $('body').innerWidth()
  var neededLeftOffset = dropdown.position().left - (rightOffset - browserWidth)

  if (neededLeftOffset < 0) {
    dropdown.css({ left: neededLeftOffset - 3 })
  } else {
    dropdown.css({ left: 0 })
  }
}

 


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
21 minutes ago, Demitry said:

@Tsimi

I added the insert statement to function install() and the MODULE_CONTENT_HEADER_CATMENU_XS_DIVIDER to the function keys() array in /includes/modules/content/header/cm_header_catmenu_xs.php ..then checked in admin and it shows the divider as enabled. However, it is not displaying in the actual menu. Do you know what it could be? did I miss something?

What about the classes file ( catmenu_xs.php ) did you add the divider there too?

 

Edited by Tsimi

Share this post


Link to post
Share on other sites

@Tsimi

just tested it and it's not working. Thinking about it, ..the class files are for structuring the the dynamic categories menu list, but I had added more menu options to it and those had <li class="divider"></li> tags, which were not showing up. So, the class file missing that divider code was not the issue.


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

Where exactly do you want to show that divider in the XS menu?

Never mind... I think I know where... let me take a quick look at the files...

Edited by Tsimi

Share this post


Link to post
Share on other sites

@Tsimi

hang on, let me fix something first before you mess with it. I made a change that is now causing that divider option not to show up in the admin panel. So let me fix that before you spend any time on it. Sorry about that. I'll let you know once I fix that piece and if the divider is still not displaying.. thanks man

 


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

ok, ..what is was is that I renamed a variable and then uploaded all files with the changed variable name. After that, the admin panel was displaying an inputbox instead of a the choice to enable the divider. So, I uninstalled and re-installed both modules and that fixed it. However, the dividers are still not displaying in the XS menu... not sure why.

Edited by 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

Got it!

Well first off, I could not use/show the Bootstrap divider. Not sure why and I didn't want to waste more time hunting a bug like that.
UPDATE: I know now why it won't show. The divider only shows in combination with the bootstrap dropdown class which is not used inside the XS menu.

First we need to add the divider switch into the catmenu_xs module.

Add the following line above the sort order line within the function install() { area.

      tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, set_function, date_added) values ('Enable divider', 'MODULE_CONTENT_HEADER_CATMENU_XS_DIVIDER', 'True', 'Do you want to show a divider for more clarity?', '6', '3', 'tep_cfg_select_option(array(\'True\', \'False\'), ', now())");

Then add this within the function keys() { area above or before the sort order key.

'MODULE_CONTENT_HEADER_CATMENU_XS_DIVIDER',

Now open the catmenu_xs classes file and look for this code

            $result .= '<li><a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">' . $root_link_title . '</a></li>';

And REPLACE WITH one of the following 2 options
            
Option 1

using a <hr /> tag

    // divider added for clarity //
        if (MODULE_CONTENT_HEADER_CATMENU_XS_DIVIDER == 'True') {
            $result .= '<li><a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">' . $root_link_title . '</a></li><hr />';
        } else {
            $result .= '<li><a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">' . $root_link_title . '</a></li>';
        }


        
Option 2

using inline css to emulate divider class

    // divider added for clarity //            
        if (MODULE_CONTENT_HEADER_CATMENU_XS_DIVIDER == 'True') {
            $result .= '<li style="border-bottom:solid 1px #e5e5e5;"><a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">' . $root_link_title . '</a></li>';
        } else {
            $result .= '<li><a href="' . tep_href_link('index.php', 'cPath=' . $category_link) . '">' . $root_link_title . '</a></li>';
        }

The advantage of the inline css option is you can change that line to dotted or dashed.       

Now uninstall and re-install the catmenu_xs module. Done!
 

Edited by Tsimi

Share this post


Link to post
Share on other sites

Uploaded new version (v1.3.2)

https://apps.oscommerce.com/42x4C&horizontal-categories-menu-bs

Added the divider feature for XS menu
Removed the unnecessary closing span tag (Thx to @Demitry for spotting it.)
Added version number to the modules

And added a screenshot to the App which shows the normal menu in normal and XS view and the XS menu. So you can see what it would look like before installing. Even though the install is not a difficult task at all.

 

 

Share this post


Link to post
Share on other sites

Hello @Tsimi I have been working on this addon and now I have it as fixed menu when you scrolling the page. what you think about it?

59ea50484aacf_Screenshotfrom2017-10-2022-34-54.png.ba2fabd655e04ac7460e7345efa6c781.png

 

Screenshot from 2017-10-20 22-35-30.png

Screenshot from 2017-10-20 22-35-57.png


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

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

×