Jump to content

Recommended Posts

@Tsimi The first style is being applied correctly but if you have a third level of categories then the second level (the one in the drop-down) gets capitalized too, which looks odd. How do we overwrite that style for the second level?

Share this post


Link to post
Share on other sites

@rulegacy

I see...

Ok let's try the following.

First let's add a new custom class to avoid conflicts with other dropdown classes.

Open your ../includes/classes/catmenu.php file and look for this code

$root_start_string = '<li class="dropdown">',

add a new class, in this example I use yourclass (*you can name that whatever you like just make sure you also change the css definition as well.)

$root_start_string = '<li class="dropdown yourclass">',

Save and close the file.
Next let's add the new css definitions inside the user.css file

.dropdown-submenu a {text-transform:none;}
.yourclass > a {text-transform:uppercase;}

Make sure the css code is inserted exactly like that. If you would switch those 2 new css definitions around it won't work.

Now you should have all Caps in the first categories only and the rest below inside the sub-menus should be normal.

Edited by Tsimi

Share this post


Link to post
Share on other sites

Here is a new version of the Horizontal Menu BS (v1.5).
This one is made with CSS only and not using any javascript or jquery. It uses hover, meaning that when you mouse over the category names the drop down tab opens up. However you will have to use this new menu in conjunction with the Categories Menu XS since this new menu cannot be used on XS or SM view port due to lack of touch support.

Special thanks to @rulegacy for the pure CSS and hover idea and for testing the menu.

Here the package:

Horizontal Menu BS v1.5.zip

Enjoy!

Edited by Tsimi

Share this post


Link to post
Share on other sites

@Tsimi

 

Thanks a lot for your addon.

I have installed this addon to test, but it seems that it cannot set the limitation of categories to be displayed.

it is a problem if there are over 10 of first level categories.

I was trying to add this to the module code:

tep_db_query("insert into configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added) values ('Sort Order', 'MODULE_CONTENT_HEADER_CATMENU_MAX__NUM_CATEGPRIES', '5', 'MAX Categories of display. <br /><em>*Default is 5.</em>', '6', '5', now())");

but when I looked at the class of catmenu.php, it gets the data from the category_tree.php.

I changed the query of mysql in category_tree.php:

        $categories_query = tep_db_query("select c.categories_id, c.parent_id, c.categories_image, cd.categories_name, cd.categories_description, cd.categories_seo_description, cd.categories_seo_keywords, cd.categories_seo_title from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.categories_id = cd.categories_id and cd.language_id = '" . (int)$languages_id. "' order by c.parent_id, c.sort_order, cd.categories_name limit 0,7");

the category box of catalogue is showing also 7 categories.

Do you have another way to achieve it?

Thanks in advanced.

chuntse

Share this post


Link to post
Share on other sites

@chuntse

This is what I said in the first post of this thread.

Quote

*Please note:
To offer a horizontal menu as a general module is always difficult since it is not matching for every store. Some stores have a large amount of categories and sub-categories and therefore it might not fit. Best is always to create a "tailored" horizontal menu that fits best for your store. Some do this the hard-coded way some would like to have it dynamic. If you need such a tailored menu please ask in the Commercial Support area, thank you.

A horizontal menu is not always the right solution for everyone. There is a Horizontal Megamenu made by Kymation if you want to have a look at that.
The horizontal menu in my add-on is just an "extension" of the existing category_tree class meaning that whatever change you apply there (category_tree.php) affects all category menus in the store. So if you limit the categories to a certain amount then it will also limit the categories box. Not sure restricting the categories makes any sense though. Customers would not be able to see all what you have to offer.

Another solution would be to copy the category_tree.php class file, rename the functions and all the necessary codes, apply your query there to limit the categories and then extend the horizontal menu from it. That way you can have the categories box with the stock osC layout and the horizontal menu with the limited categories listing. Hope that makes sense.

(your_category_tree.php)

class your_category_tree { 

(your_catmenu.php)

class explode_your_category_tree extends your_category_tree {


 

Share this post


Link to post
Share on other sites

2.3.4.1 CE

I'm using only the BS menu and not the XS one.  Only installed the first one.

The arrow icons that should be appearing next to my subcats are only displaying small boxes with plus signs in them.

icons.PNG.f48e5e87eddc35e6c70fc5f7a3101fb2.PNG

The chevron-down icons are appearing next to my main category names, but I guess that's only because they are hard-coded in the files.

How can I fix the problem with the other icons not showing?  Using the latest version of this contribution.  Thanks!

- Andrea

Share this post


Link to post
Share on other sites

@puggybelle

Open your template_top.php file

FIND

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

REPLACE WITH

<!--<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>//-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

That should fix it.

Edited by Tsimi

Share this post


Link to post
Share on other sites
On 8/23/2018 at 10:45 AM, Dan Cole said:

@Tsimi Lambros this may have been reported before...I didn't see but it might have been. 

The use of this code in /includes/modules/content/header/templates/catmenu.php...


<?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">';
	  } 
?>

Will result in an undefined constant warning if Categories Menu XS is not installed.  Obviously it's not a big deal but since I noticed it I thought I'm mention it FWIW.

Dan

When using PHP 7.2 and higher it will throw an UNDEFINED error. To fix this you could replace that code with this

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

 

Share this post


Link to post
Share on other sites

I don't think it was just with 7.2 issue but irregardless, getting it sorted is a good thing. :thumbsup:

Dan

Share this post


Link to post
Share on other sites

Simplified snippet I use for these cases:

<?php if ( defined('MODULE_CONTENT_HEADER_CATMENU_XS_STATUS' && 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">';
	  } 
?>

 

Share this post


Link to post
Share on other sites

Hello @Tsimi.

Today install your addon Categories Menu XS v1.4 in an EDGE version.

I uploaded the files and followed the installation instructions, but in XS devices it does not work, I always get the normal categories menu.

Any idea what is happening?

Best regards

Valqui

Share this post


Link to post
Share on other sites

@valquiria23

Hi

I just had a look at your store and the menu does show just fine on XS and SM viewport.

However the live chat popup is blocking a very large area of the screen on XS and the menu is hidden behind it. The live chat popup window also cannot be closed unless you click on the chat button left bottom since the x to close the chat bubble is not visible in XS viewport.

Share this post


Link to post
Share on other sites

@Tsimi  hi,

I had installed the superfish and it works perfectly as I have many tier of the subcategories. And I also installed your horizontal categories menu, with extra help for the thumbnail. (Thank you very much!) I had tried to change the script at the template of your addon to superfish and paste the css, but it doesn't seems working.

Is it possible to have your addon have the effect to show the tiers of sub categories?

Many thanks! Lyn

Share this post


Link to post
Share on other sites

@ce7

I lost you there.

What do you mean with "show the tiers of sub categories"? I thought the horizontal menu shows subcategories.
If you want a mouse over or so called hover menu then look at this post here

Share this post


Link to post
Share on other sites

@Tsimi   Hi Tsimi,

Sorry not explained myself clear.
Please find the image below, when i click on the categories, it show the first tier with/without sub-categories...

horizontal-menu-01.thumb.PNG.3e168f8dd303c38af2bfe718ff4c647f.PNG

And if i have multi tiers of subcategories, like the image show below:

horizontal-menu-02.thumb.PNG.7f4feeee0a6e4bdf406c414a389bc0ef.PNG

So in the horizontal menu, if it can have the sub-sub-categories also show up (ideally unlimited tiers of sub-categories), something like this, will be great...

horizontal-menu-03.PNG.650b0bff90e055d28ae60e8e942947d5.PNG

Many thanks!  Lyn

 

  

Share this post


Link to post
Share on other sites

@ce7

Ah! Now I understand.
Looks like the dropdown is a bit short for your setup.
Please open the following file

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

FIND
 

.menu_custom_width {
 min-width: 200px;
}

change the pixel number to something more matching for you. Maybe try 230px or 250px?
Also please update the font awesome path inside the templates_top.php file

Look here

Share this post


Link to post
Share on other sites

@Tsimi  hi,

Thank you very much for the solution. Follow your instruction, and it works as expected. Still two tiny things need your further support though....

if you choose the subcategories, you need to point to very left end on the icon▶️,
and if I dont point it right and quick, then it will disappear or if i click not right on the icon, then it can be on just product in that sub-categories. To avoid this, how can I make the icon size bigger or a better way you suggest?

2nd thing, i had tried to change the css background color, what I want is that when the mouse point to the one with sub-category, it change the to dark grey colour (hopefully text then can be set as white), what class or id should I use to achieve, if set background colour at .dropdown-submenu, it just show different colour for all un-selected sub-categories.... (the image is min-width: 450px; )

horizontal-menu-04.thumb.PNG.682fad5208168039071956829e63c0da.PNG

Many thanks!  Lyn

Share this post


Link to post
Share on other sites

Hello,

Im trying to install it on OSC2.3.4, I downloaded "Horizontal Categories Menu BS 1.3.2", uploaded the files in their directories, then installed the module from the back end, all seems good, no errors or something.

Now I want to display the nav menu, I placed in the header.php

<?php echo $oscTemplate->getBlocks('cm_header_catmenu'); ?>

But nothing is showing, my website have bootstrap installed, the bootstrap css and js files are in the header, but I think its not a bootstrap issue, its related to php.

Can you offer some advise please ? thanks

Share this post


Link to post
Share on other sites

@Tsimi

hi Lambros,

While customizing my product_info page, I decided to run the W3C HTML Validator on that page. I got 22 errors and warnings, most of which are related to base osC software for BS Edge. However, there was an error and a couple of warnings related to this addon – see the screenshot below.

I searched all of the addon files (css, js, classes, modules, templates) of the Horizontal Menu version I have (v1.3.1) for a reference or a defined value of that “catMenu” ID and could not find it.

Same goes for role=”navigation” …I found nothing associated with it and am not sure what the role attribute does for the nav tag in that desktop menu.

So, I removed these and tested both menus. Nothing seemed off and the menus work as they should. Is there a purpose for these attributes that I am not aware of? Or, is it ok to move forward without them? Thanks.

 

catMenu-W3C-errors.png


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

role="navigation" is stock bootstrap code. Not sure for what but it is used for the nav-bar element. Guess it can be removed for the horizontal menu.

If the catMenu ID isn't used anywhere inside the css file or anywhere else you can remove it.

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

×