Ajout d'une image dans le menu pour les sous catégories

[info2a]

Bonsoir,

 

j'aimerai pouvoir utiliser un thumbnail pour les sous catégorie

lorsque l'on passe la souris sur une catégorie principale.

 

Une image vaut mille mots, alors voici un exemple en illustration :

 

 

 

 

Ma version de Prestashop est la 1.6.0.9, car j'ai installé un thème qui provient de Template Monsters,

et il est requis d'installer le thème sur une 1.6.0.9 (mais je peux upgrade vers 1.6.1.1 dorénavant)

 

Lorsque je me connecte sur le back office, je vois que je peux choisir un thumbnail pour les catégories principales, mais pas pour les sous catégories.

 

Est il possible de modifier Blocktopmenu.php afin d'utiliser l'image d'une sous catégorie en guise de thumbnail dans le menu ? 

 

Sinon je me suis connecté sur le back office de la demo de Prestashop 1.6.1.1 (avec le thème par défaut) et j'ai vu qu'il y avait un champ "Menu Thumbnail" pour les sous catégories, moi je n'ai pas option sur ma 1.6.0.9... Est ce que cette option est liée à la version 1.6.1.1 ? ou bien au thème default ?

 

 

Merci d'avance pour vos réponses,

Bonne soirée

 

 

 

 

[info2a]

Bonsoir,

 

si ça peut aider, une solution qui fonctionne sur la version 1.6.0.9 (peut être sur les plus récentes aussi)

 

En deux étapes :

 

Première étape : Modifier blocktopmenu.php

 

Il est situé dans modules/blocktopmenu/blocktopmenu.php

 

Faites une sauvegarde au cas où !

 

A la ligne 466, vous trouverez cette fonction :

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;
	}

Qu'il faut remplacer par celle-ci :

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;
	}

Une fois la modification faites, uploadez le fichier.

 

2ème étape : upload des thumbnails

 

Etant donné qu'on ne peut pas uploader les thumbnails pour les sous catégories

depuis l'interface d'administration, nous allons les uploader à la main.

 

Il faut les uploader dans le dossier img/c

 

Pour la taille , sur mon thème 200 par 100 ça donne bien !

 

Et surtout il faut leur donner un nom particulier , par exemple si votre sous catégorie

a le numéro id 52, il faut nommer votre thumbnail :

52-1_thumb.jpg

 

Voilà vous uploadez toutes vos thumbnails de sous catégories comme ça et ça devrait

rouler !

 

Les thumbnails s'affichent en dessous du titre de la sous catégories quand le menu se déroule.

 

 

Par contre les thumbnails ne sont pas cliquables, c'est regrettable, j'ai essayé

de faire la modification à ce niveau là :

		$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>';

En ajoutant <a href='.$link.'> avant <img et </a> après la fin de la balise img... comme ceci :

$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>';

Ca fonctionne, les images deviennent clickable, et les liens correspondent, mais ça m'ajoute un > bizarre

à côté des thumbnails bref si quelqu'un une idée de ce problème, je suis preneur !!

Bonne soirée

[info2a]

Finalement c'est ok, avec une petite règle css :

 

Pour avoir les images cliquables :

 

le code pour votre fichier blocktopmenu.php :

(même principe que plus haut)

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;
	}

Pour éviter le bug des  >  ,  il faut ajouter cette petite règle en css :

- à la fin de global.css si vous utilisez le thème défaut

ou

- à la fin du fichier superfish-modified.css du module blocktopmenu de votre thème

( themes/votretheme/css/modules/blocktopmenu/

 

A++

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

display: none;
}

[Thibaud ader]

Bonsoir Info2a,

 

Avez-vous une solution pour la version 1.6.1.0 ?

 

Dans la feuille blocktopmenu.php je ne trouve pas la fonction que vous proposez de remplacer.

 

 

Merci