Arrange brands in horizontal top menu drop down in alphabetical folders?

[[email protected]]

Hello,

 

I'd like my brands in the drop down menu in the top horizontal menu to be arranged in alphabetical folders.  I'd like it to look the same way that the products do when I put a category folder inside another one.  So it would look like this:

 

A

->Apple

->Artisinal

 

B

->Borders

->Boston

 

etc..

 

The user would hover on the letter and then the brands starting with that letter would pop up exactly like products do inside the category folders I created.

 

I'm running 1.6.1.6 with a custom theme.

 

Is this easily achievable?

 

Thank you

Edited August 3, 2016 by [email protected] (see edit history)

[rocky]

I can tell you how to do it using the default theme. Hopefully, your custom theme is well designed and simply changes the CSS of the default theme's menu.

 

I can't think of a way to do it by modifying TPL files. I think you'd have to modify modules/blocktopmenu/blocktopmenu.php at lines 513-515:

                    foreach ($manufacturers as $key => $manufacturer) {
                        $this->_menu .= '<li><a href="'.$link->getManufacturerLink((int)$manufacturer['id_manufacturer'], $manufacturer['link_rewrite']).'" title="'.Tools::safeOutput($manufacturer['name']).'">'.Tools::safeOutput($manufacturer['name']).'</a></li>'.PHP_EOL;
                    }

to:

                    foreach ($manufacturers as $key => $manufacturer) {
                        $letter = Tools::substr($manufacturer['name'], 0, 1);                       
                        if ($letter != $previousLetter) {
                            $this->_menu .= ($previousLetter != '' ? '</ul></li>' : '').'<li>'.strtoupper($letter).'<ul>';    
                        }
                        $previousLetter = $letter;                        
                        $this->_menu .= '<li><a href="'.$link->getManufacturerLink((int)$manufacturer['id_manufacturer'], $manufacturer['link_rewrite']).'" title="'.Tools::safeOutput($manufacturer['name']).'">'.Tools::safeOutput($manufacturer['name']).'</a></li>'.PHP_EOL;
                    }
                    $this->_menu .= '</ul></li></ul></li>';

Hopefully, you can adapt this code to your needs.

[[email protected]]

FANTASTIC!!!  Thank you so much, this worked perfectly.

 

There's only 2 things missing that would make it a perfect match to the categories menu.  One is the animated arrow that appears when you click on a folder to reveal the subfolder and the other is that when hovering over a folder the pointer does not change to a pointing finger.  Is there a way to add these 2 items?

 

Thank you very much again!

[rocky]

You'll need to find the code that adds the arrow (maybe a <span>) and add it to my code above. You can add CSS code that selects just those letters and then add cursor: pointer; to it. It's hard to be more specific, since I'm using the default theme.

[[email protected]]

I attached my blocktopmenu.php file as it stands now with your added code.

 

Since I'm not familiar with this programing, could you please take a look at it and tell me where to add the 2 additional commands for the pointer and arrows?

 

Thank you.

 

 

blocktopmenu.php

[rocky]

Sorry, that won't help. I'd need full access to your website so I could check the TPL code and CSS too.

[[email protected]]

Sorry, that won't help. I'd need full access to your website so I could check the TPL code and CSS too.

I really appreciate your help. Without giving full site access is there any way you can help me to make these changes myself?

 

Thank you very much.

[rocky]

You could send the entire module to me in a private message.

[[email protected]]

You could send the entire module to me in a private message.

Absolutely. Please tell me exactly what to send.

 

Thank you.

[rocky]

The entire modules/blocktopmenu directory and themes/<your_theme>/modules/blocktopmenu directory if that exists too.

[rocky]

Try using the following code in blocktopmenu.php instead of the above:

                    $previousLetter = '';
                    foreach ($manufacturers as $key => $manufacturer) {
                        $letter = Tools::substr($manufacturer['name'], 0, 1);                       
                        if ($letter != $previousLetter) {
                            $this->_menu .= ($previousLetter != '' ? '</ul></li>' : '').'<li><span class="letter">'.strtoupper($letter).'</span><ul>';    
                        }
                        $previousLetter = $letter;                        
                        $this->_menu .= '<li><a href="'.$link->getManufacturerLink((int)$manufacturer['id_manufacturer'], $manufacturer['link_rewrite']).'" title="'.Tools::safeOutput($manufacturer['name']).'">'.Tools::safeOutput($manufacturer['name']).'</a></li>'.PHP_EOL;
                    }
                    $this->_menu .= '</ul></li></ul></li>';

You can then add the following to change the cursor over the letter to a pointer:

#block_top_menu .letter { cursor: pointer }

Unfortunately, I don't see any folder or animation, since I'm using the default PrestaShop theme, so I'm not sure how to help with that.

[[email protected]]

Try using the following code in blocktopmenu.php instead of the above:

                    $previousLetter = '';
                    foreach ($manufacturers as $key => $manufacturer) {
                        $letter = Tools::substr($manufacturer['name'], 0, 1);                       
                        if ($letter != $previousLetter) {
                            $this->_menu .= ($previousLetter != '' ? '</ul></li>' : '').'<li><span class="letter">'.strtoupper($letter).'</span><ul>';    
                        }
                        $previousLetter = $letter;                        
                        $this->_menu .= '<li><a href="'.$link->getManufacturerLink((int)$manufacturer['id_manufacturer'], $manufacturer['link_rewrite']).'" title="'.Tools::safeOutput($manufacturer['name']).'">'.Tools::safeOutput($manufacturer['name']).'</a></li>'.PHP_EOL;
                    }
                    $this->_menu .= '</ul></li></ul></li>';

You can then add the following to change the cursor over the letter to a pointer:

#block_top_menu .letter { cursor: pointer }

Unfortunately, I don't see any folder or animation, since I'm using the default PrestaShop theme, so I'm not sure how to help with that.

 

Thank you very much.

 

To which file and where does the following code get added?

 

#block_top_menu .letter { cursor: pointer }

 

I'm a bit confused by your comment:

 

"Unfortunately, I don't see any folder or animation, since I'm using the default PrestaShop theme, so I'm not sure how to help with that."

 

I'd like the manufacturers to show the same animated triangle as the categories currently does.  Are you saying the default theme doesn't have this but my custom theme does?

 

Thanks again.

Edited August 14, 2016 by [email protected] (see edit history)

[rocky]

You can put it in themes/default-bootstrap/css/modules/blocktopmenu/css/blocktopmenu.css.

 

Oh, now I understand. I didn't really understand what you meant before. That's going to be a lot more difficult.

[[email protected]]

You can put it in themes/default-bootstrap/css/modules/blocktopmenu/css/blocktopmenu.css.

 

Oh, now I understand. I didn't really understand what you meant before. That's going to be a lot more difficult.

The cursor modification worked brilliantly, as always thank you so much.  If you can figure out the folder animation I would be ecstatic!!

[[email protected]]

I am so grateful to rocky for his outstanding assistance.  The mod he helped me with works brilliantly.  There are only 2 issues that remain, I was hoping someone on this forum would know how to address these.

 

1.  Rocky made it so that my brands appear in alphabetical folders in the horizontal menu drop down.  When hovering on a letter the brands within that folder appear.  There is however no dynamic animation (the triangle that rotates from down to right) as there is when I hover on a category folder.  Although it's minor I'd love to implement this animation in my brands drop down menu.

 

2. Rocky also helped me to make the mouse pointer turn into a pointing finger when the brands alphabetical folders are hovered on.  This too works brilliantly.  Unfortunately it introduced a strange graphic glitch in the mobile version of the brands menu.  Have a look at the attached image below to see what I'm talking about.

 

Thank you very much, any help is greatly appreciated.