Add subcategory thumbnails on top menu

info2a · October 15, 2015

Hello everyone,

i would like to have subcategories thumbnails when i hover a main category in

the top menu, like the image of exemple below :

The problem is that in the back office, i can only upload thumbnails in a main category,

there isn't field for thumbnails in subcategories.

My version of Prestashop is 1.6.0.9 because my theme bought on Template Monsters

required this version to work correctly. (I can upgrade to 1.6.1.1 if i want to)

Is there a way to activate this feature ?? Modifying blocktopmenu.php??

I noticed that if you connect to Prestashop official demo back end, if you go to a edit a

sub category, there is a field called "Menu thumbnail" where you can upload an image.

I don't have this feature on 1.6.0.9.... does this feature came with 1.6.1.1 ??

Help would be very appreciated, thanks to all by advance,

Nice evening

peterbjergsted · October 21, 2015

I have the same problem. Except that I even can't upload in main category.

Hope that someone can help us.

Pedro Pinto · October 27, 2015

Hi all

any solution??

thanks

info2a · October 29, 2015

Hello everyone,

with the help of Maheshmohan1093, we can display thumbnail for subcategories in top menu.

In 2 steps (works with 1.6.0.9) :

First step :

Modifify your blocktopmenu.php (found on modules/blocktopmenu/blocktopmenu.php)

Once you made a save of this file (just in case).

You have to locate at approximatively line 466, this function :

	private function generateCategoriesMenu($categories)
	{
		$html = '';

		foreach ($categories as $key => $category)
		{
			if ($category['level_depth'] > 1)
			{
				$cat = new Category($category['id_category']);
				$link = Tools::HtmlEntitiesUTF8($cat->getLink());
			}
			else
				$link = $this->context->link->getPageLink('index');

			$html .= '<li'.(($this->page_name == 'category'
				&& (int)Tools::getValue('id_category') == (int)$category['id_category']) ? ' class="sfHoverForce"' : '').'>';
			$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';

			if (isset($category['children']) && !empty($category['children']))
			{
				$html .= '<ul>';
				$html .= $this->generateCategoriesMenu($category['children']);

				if ((int)$category['level_depth'] == 2)
				{
					$files = scandir(_PS_CAT_IMG_DIR_);

					if (count($files) > 0)
					{
						$html .= '<li id="category-thumbnail">';

						foreach ($files as $file)
							if (preg_match('/'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $file) === 1)
								$html .= '<div><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
								.'" alt="'.Tools::SafeOutput($category['name']).'" title="'
								.Tools::SafeOutput($category['name']).'" class="imgm" /></div>';

						$html .= '</li>';
					}
				}

				$html .= '</ul>';
			}

			$html .= '</li>';
		}

		return $html;
	}

Replace with this (just some lines are removed) :

private function generateCategoriesMenu($categories)
	{
		$html = '';

		foreach ($categories as $key => $category)
		{
			if ($category['level_depth'] > 1)
			{
				$cat = new Category($category['id_category']);
				$link = Tools::HtmlEntitiesUTF8($cat->getLink());
			}
			else
				$link = $this->context->link->getPageLink('index');

			$html .= '<li'.(($this->page_name == 'category'
				&& (int)Tools::getValue('id_category') == (int)$category['id_category']) ? ' class="sfHoverForce"' : '').'>';
			$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';

				$html .= '<ul>';
				
				$html .= $this->generateCategoriesMenu($category['children']);
				

					$files = scandir(_PS_CAT_IMG_DIR_);

					if (count($files) > 0)
					{
						$html .= '<li id="category-thumbnail">';

						foreach ($files as $file)
							if (preg_match('/'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $file) === 1)
								$html .= '<div><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
								.'" alt="'.Tools::SafeOutput($category['name']).'" title="'
								.Tools::SafeOutput($category['name']).'" class="imgm" /></div>';

						$html .= '</li>';
					}

				$html .= '</ul>';

			$html .= '</li>';
		}

		return $html;
	}

Second step :

According the fact there are no field to upload thumbnail for subcategories in the back office,

you have to upload manually your thumbnail (200 x 100 looks fine).

You have to upload them in the img/c/ folder.

And you have to name them in a particulary way.

The name has to be :

idsubcategorynumber-1_thumb.jpg

for example if my subcategory id is 52, the filename has to be :

52-1_thumb.jpg and so on.

It will be display the thumbnail just under the title of the subcategory.

I hope it will help you.

With this code, the thumbnail are display fine, but there are not linked....

I tried to make changes on this :

		$html .= '<div><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
								.'" alt="'.Tools::SafeOutput($category['name']).'" title="'
								.Tools::SafeOutput($category['name']).'" class="imgm" /></div>';

And add <a href='.$link.'> before <img and </a> before the end.....

Like this :

$html .= '<div><a href='.$link.'><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file).'" alt="'.Tools::SafeOutput($category['name']).'" title="'.Tools::SafeOutput($category['name']).'" class="imgm" /></a></div>';

it work, but it add a weird > near thumbnail on the menu ? can some one help me about that ?

See you people

info2a · October 30, 2015

Finally it's ok, thanks to Mahesh

To get thumbnail clickable :

The code for your blocktopmenu.php

(same steps as above)

private function generateCategoriesMenu($categories)
	{
		$html = '';

		foreach ($categories as $key => $category)
		{
			if ($category['level_depth'] > 1)
			{
				$cat = new Category($category['id_category']);
				$link = Tools::HtmlEntitiesUTF8($cat->getLink());
			}
			else
				$link = $this->context->link->getPageLink('index');

			$html .= '<li'.(($this->page_name == 'category'
				&& (int)Tools::getValue('id_category') == (int)$category['id_category']) ? ' class="sfHoverForce"' : '').'>';
			$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';
			

				$html .= '<ul>';
				
				$html .= $this->generateCategoriesMenu($category['children']);
				

					$files = scandir(_PS_CAT_IMG_DIR_);

					if (count($files) > 0)
					{
						$html .= '<li id="category-thumbnail">';
			

						foreach ($files as $file)
							if (preg_match('/'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $file) === 1)
                                
								
								$html .= '<div><a href='.$link.'><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
								.'" alt="'.Tools::SafeOutput($category['name']).'" title="'
								.Tools::SafeOutput($category['name']).'" class="imgm" /></a></div>';

						$html .= '</li>';
					}

				$html .= '</ul>';

			$html .= '</li>';
		}

		return $html;
	}

And to avoid the > bug :

You have to add a little css rules :

.sf-menu li li li a::before {

display: none;
}

At the end of global.css if you are using default theme,

or at the end of superfish-modified.css if you are using another theme.

(at themes/yourtheme/css/modules/blocktopmenu/)

Hope it will help some one,

bye

Pedro Pinto · November 2, 2015

hi,

if i put the thumb with the id of the subcategory it doesnt appear, but if i put the id of parent category it shows the thumb on the first subcategory.

info2a · November 2, 2015

Hi Pedro,

which version of Prestashop do you use?

I have 1.6.0.9 and a theme from monsters template,

it works with me.

The category thumbnail are already a feature of Prestashop,

it's normal it appears under the first subcatory title.

You can send us your blocktopmenu.php ?

See you

Pedro Pinto · November 2, 2015

hi, my version is 1.6.1.1 with default theme

i override the blocktopmenu with the code:

private function generateCategoriesMenu($categories)
    {
        $html = '';

        foreach ($categories as $key => $category)
        {
            if ($category['level_depth'] > 1)
            {
                $cat = new Category($category['id_category']);
                $link = Tools::HtmlEntitiesUTF8($cat->getLink());
            }
            else
                $link = $this->context->link->getPageLink('index');

            $html .= '<li'.(($this->page_name == 'category'
                && (int)Tools::getValue('id_category') == (int)$category['id_category']) ? ' class="sfHoverForce"' : '').'>';
            $html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';

                $html .= '<ul>';
                
                $html .= $this->generateCategoriesMenu($category['children']);
                

                    $files = scandir(_PS_CAT_IMG_DIR_);

                    if (count($files) > 0)
                    {
                        $html .= '<li id="category-thumbnail">';

                        foreach ($files as $file)
                            if (preg_match('/'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $file) === 1)
                                $html .= '<div><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
                                .'" alt="'.Tools::SafeOutput($category['name']).'" title="'
                                .Tools::SafeOutput($category['name']).'" class="imgm" /></div>';

                        $html .= '</li>';
                    }

                $html .= '</ul>';

            $html .= '</li>';
        }

        return $html;
    }

blocktopmenu.php

info2a · November 2, 2015

Could you also send your modified blocktopmenu.php ?

Pedro Pinto · November 3, 2015

He's modified by override with this:

class BlocktopmenuExntended extends Blocktopmenu
{
private function generateCategoriesMenu($categories)
{
$html = '';


foreach ($categories as $key => $category)
{
if ($category['level_depth'] > 1)
{
$cat = new Category($category['id_category']);
$link = Tools::HtmlEntitiesUTF8($cat->getLink());
}
else
$link = $this->context->link->getPageLink('index');


$html .= '<li'.(($this->page_name == 'category'
&& (int)Tools::getValue('id_category') == (int)$category['id_category']) ? ' class="sfHoverForce"' : '').'>';
$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';




$html .= '<ul>';


$html .= $this->generateCategoriesMenu($category['children']);




$files = scandir(_PS_CAT_IMG_DIR_);


if (count($files) > 0)
{
$html .= '<li id="category-thumbnail">';




foreach ($files as $file)
if (preg_match('/'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $file) === 1)
                                


$html .= '<div><a href='.$link.'><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
.'" alt="'.Tools::SafeOutput($category['name']).'" title="'
.Tools::SafeOutput($category['name']).'" class="imgm" /></a></div>';


$html .= '</li>';
}


$html .= '</ul>';


$html .= '</li>';
}


return $html;
}
}

Edited November 3, 2015 by Pedro Pinto (see edit history)

info2a · November 3, 2015

I don't understand? just this???

you have to override just only one function, no the whole blocktopmenu.php

Especially theses few lines :


			if (isset($category['children']) && !empty($category['children']))
			{
				


//and 

				if ((int)$category['level_depth'] == 2)
				{

// and also the corresponding two closing brackets

I will modify your original blocktopmenu.php and send it back to you to see if it can works, but

i can't promess.

dcoste · April 9, 2020

Hello,

My shop is displaying incorrect thumbnails using this system.

For example Cat ID 8 is showing images 8-0_thumb and also 18-0_thumb

The cat ID that are being displayed are cat ids 8 to 26 and seems to double images on cats 8 & 9 (these are also showing the thumbs for cats 18 &19)

It seems to be an issue in preg_match ???

Shop link is shop.volkstuning.com to see the example

Thanks

Prescol · April 9, 2020

6 hours ago, dcoste said:

Hello,

My shop is displaying incorrect thumbnails using this system.

For example Cat ID 8 is showing images 8-0_thumb and also 18-0_thumb

The cat ID that are being displayed are cat ids 8 to 26 and seems to double images on cats 8 & 9 (these are also showing the thumbs for cats 18 &19)

It seems to be an issue in preg_match ???

Shop link is shop.volkstuning.com to see the example

Thanks

Open a new thread for that.

Add subcategory thumbnails on top menu

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in