Inserer des photos dans le menu

[manworms2]

Bonjour , debutant sous prestashop , j'aimerais inserer les photos dans le menu

comme dans l'image ci joint.

je n'ai aucune idee de la procedure à suivre.

 

Merci pour votre aide.

 

[Eolia]

Bonjour,

 

Une solution bricolée, mais qui fonctionne:

Ouvrez le fichier blocktopmenu.php du module blocktopmenu et remplacez la fonction generateCategoriesMenu() par celle-ci:

	private function generateCategoriesMenu($categories, $is_children = 0)
	{
		$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"' : '').'>';
			$mini = $category['id_category'].'_mini.jpg';
			if(file_exists(_PS_CAT_IMG_DIR_.$mini))
				$html .= '<img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$mini).'" style="height:40px;padding-top:10px" />';
			$html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';

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

				if ((int)$category['level_depth'] > 1 && !$is_children)
				{
					$files = scandir(_PS_CAT_IMG_DIR_);

					if (count($files) > 0)
					{
						$html .= '<li class="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;
	}

Si une image id_de_la_categorie_mini.jpg existe dans le répertoire /img/c, celle-ci sera affichée au dessus du nom de la catégorie.

Donc, récupérez les id de vos catégories et créez vos images 1_mini.jpg, 2_mini.jpg, etc...

 

Il faudra également modifier un peu le css pour rendre l'affichage correct.

Dans votre_theme/css/modules/blocktopmenu/css/superfish-modified.css ajoutez la propriété text-align au bloc .sf-menu (ligne 13) :

.sf-menu {
position: relative;
padding: 0;
width: 100%;
border-bottom: 3px solid #e9e9e9;
background: #f6f6f6;
text-align: center;
@media (max-width: 767px) {
    .sf-menu {
      display: none; } }
}

et passer à 96px la valeur top dans le bloc .sf-menu li ul  à la ligne 91:

.sf-menu li ul {
  display: none;
  left: 0;
  top: 96px;
  /* match top ul list item height */
  z-index: 99;
  padding: 12px 0px 18px 0px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  -moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 13px; }
  @media (max-width: 767px) {
    .sf-menu li ul {
      top: 0; } }

Pensez à prévoir une image par élément du menu, sinon ceux qui n'en auront pas seront décalés en hauteur.

Cette modification ne concerne que les catégories.

Attention, si vous mettez le module à jour plus tard, vous perdrez vos modifications, donc faites une sauvegarde au cas où...

[manworms2]

merci beaucoup ça fonctionne a merveille