Jump to content

Add subcategory thumbnails on top menu


Recommended Posts

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 :

 

illustration.jpg

 

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

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Pedro Pinto (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
  • 4 years later...

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

Share this post


Link to post
Share on other sites
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.

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
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More