Jump to content

Mettre une icone en face de chaque categorie

Fluorite

By Fluorite
in Modules et thèmes gratuits

 Share

Recommended Posts

Fluorite Newbie

Fluorite

Posted
Posted

Bonjour a tous

Voila j'aimerais que dans le block catégories le ( menu ) quoi ,

je voudrais mettre des icônes pour chaque catégorie a coté de chaque lien de la catégorie.

Exemple catégorie Minéraux je voudrais y mettre un icono ,pareil pour les autres catégories .

Enfaite je voudrais que chaque catégorie sois designer par une icône ?

Aise faisable et comment faire.

Je voudrais demander aussi,
si un jour on auras l'occasion d'avoir un bon tutoriel sur la mise en place d'un template sur Prestashop

car personnellement j'arrive a faire des templates avec Photoshop la rien de compliquer,
mais en ce qui concerner le découpage et y remettre les codes PHP la je traine et j'ai peur de foutre le boxon.

Donc un Tutorial sur non pas la conception,mais sur la mise en place d'un thème fraichement sortie de photoshop ,comment l'intégrer au mieux.

Donc la si vous pouviez me dire comment ajouter les icônes dans le menu catégorie pour chaque catégorie,seras la bien venue.

Merci de votre temps
Bonne journée
Yannick

Link to comment
Share on other sites
astragor Newbie

astragor

Posted
Posted

Dans ton cas le soucis c'est que le catégories sont variables donc cela implique de modifier non seulement le thème mais aussi la base de donnée.
Et pour pouvoir attribuer une icone a chacune des catégories, il faudrait pouvoir aussi le faire via le BO !
Donc c'est faisable mais c'est un dévelloppement lourd qui ne nécessiterait pas qu'une simple modification de TPL !

Link to comment
Share on other sites
StoreCommander Newbie

StoreCommander

Posted
Posted

Bonjour

pas forcément si lourd que ça, il suffit de créer un répertoire /icones par exemple, d'y placer les icones correspondant à chaque catégorie sous le format [idCategorie].gif (exemples : 5.gif ; 48.gif) et de modifier le template du bloc categorie pour afficher les images.
Il faudra bien placer une image par catégorie sinon le rendu ne sera pas bon.

Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted

Bonjour,
une autre solution consiste à ajouter l'id de la catégorie dans l'id des balises du fichier modules/blockcategories/category-tree-branch.tpl



puis d'ajouter dans ton fichier css tes pictos en background-image associés aux #id correspondantes.

C'est à mon avis plus correct d'un point de vue sémantique car l'icône n'apporte pas de nouvelle info par rapport au texte du lien, elle l'illustre simplement.

pa.

Link to comment
Share on other sites
StoreCommander Newbie

StoreCommander

Posted
Posted

Bonjour

en théorie oui mais en pratique non :)
Le fichier css n'est pas dynamique, il faudrait alors renseigner chaque catégorie à la main dans celui-ci.
Avec 10 catégories, pourquoi pas mais avec plus...
Par contre il est possible d'indiquer le background directement dans la balise style de

D'un point de vue logique, il serait bon de tester la présence de l'icône dans php puis d'envoyer une variable à smarty.

Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted

Effectivement, je voyais la chose sur un menu de 10 liens max, et pas d'icône pour les sous-catégories. Je doute qu'un site avec un menu de 100 entrées sur la page d'accueil soit très ergonomique. Le but c'est quand même de faire un boutique qui donne envie d'acheter.
Selon cet article, le nombre idéal de liens dans un menu est 9 : http://www.aliasdmc.fr/wai/accessibilite131.html

cela dit tu as raison, si il s'agit d'ajouter une icône pour un nombre important de catégorie et sous catégorie, cette méthode devient très vite fastidieuse.

Link to comment
Share on other sites
  • 1 month later...
fly_in_the_sky Newbie

fly_in_the_sky

Posted
Posted


Salut,

J'aimerais aussi mettre des icones dans le menu.
Je n'ai pas bien compris ton explication. Et encore moin la ligne de code que as mis ...
Tu peu donner un peu plus dévlopper ta solution ?
Merci d'avance
Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted

L'idée est de rajouter l'image en background css au lien de la catégorie.

le code que j'avais posté permet simplement de rajouter l'attribut l'id de la catégorie a la balise lien : id="{$node.id}"

ensuite il suffit de styler le lien dans global.css : 

#id_de_la_categorie {

backbround : etc...

}




effectivement si on a 15 000 catégories ça devient vite fastidieux, d'ou la remarque de PShopExpert

Link to comment
Share on other sites
fly_in_the_sky Newbie

fly_in_the_sky

Posted
Posted

Merci pour ta réponse, ...
Moi cela ne pose pas de problème, je n'ai que 6 catégories...
Encore deux petite questions :

1. Est ce que l' #id_de_la_categorie { existe déjà dans mon css ? ou je dois le creer pour chaque categorie ? si oui commen mettre le bon nom ?

2. "{$node.link|escape:htmlall:'UTF-8'}"if $node.id == $currentCategoryId}class="selected"{/if} title="{$node.desc|escape:htmlall:'UTF-8'}">{$node.name|escape:htmlall:'UTF-8'}

Voici mon code, je fais quoi avec les if ???

Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted
1. Est ce que l’ #id_de_la_categorie { existe déjà dans mon css ? ou je dois le creer pour chaque categorie ? si oui commen mettre le bon nom ?


tu dois le rajouter, pour savoir quel est le bon nom sans risque de se tromper > firebug is your friend

2_ c'est un code qui vient d'ou et qui sert à quoi ?

Tu peux simplement tester le code que j'avais posté plus haut, qui se contente de générer les liens vers tes catégories en leurs rajoutant un id perso.

pa.
Link to comment
Share on other sites
fly_in_the_sky Newbie

fly_in_the_sky

Posted
Posted

Bon désolé, je suis encore en plein apprentissage de tripouillage dans les code ... :)

-Alors le code de la question deux , c'est celui de module/blockcatergory/category-tree-branch.tpl (bref celui dont tu n'ou a proposer de modifier en ajoutant l'id...dans la balise
Mais c'est vraie que je vais commencer par mettre ton code, sans trop me poser de question ... :D


- Et avec firebug j'obtiens



Tu me corrige si je me trompe ; Je prend donc id_category=11

Et je met dans le css un nouveau paragraphe : 

#id_category=11 {

backbround : url('../img/icone2.gif');
}



Ca te parait juste ?

Voici l'adresse de mon site, si cela est plus facile que de grand discourt ... :

Link to comment
Share on other sites
fly_in_the_sky Newbie

fly_in_the_sky

Posted
Posted

Effectivement, maintenant j'ai mis ton code, mais le problème, mais depuis que j'ai mis ton code il y a un bug ... : le problème c'est que lorsque j'ouvre la pages de mon siteweb, toute les sous catégorie sont déjà affichée... (l'arbre des sous catégorie déroulée) et ca ce n'est pas très beau , ni pratique ... )

Par contre, j'ai effectivement un id :) merci

Jeux surdimensionnés

Link to comment
Share on other sites
fly_in_the_sky Newbie

fly_in_the_sky

Posted
Posted

En effet , bizarre

revenons à nos moutons ;

Depuis que j’ai mis ton code il y a un bug … : le problème c’est que lorsque j’ouvre la pages de mon siteweb, toute les sous catégorie sont déjà affichée… (l’arbre des sous catégorie déroulée) et ca ce n’est pas très beau , ni pratique … )

regarde par toi même :

www.casse-noisettes.be/shop

Tu as une idéee pour résoudre ce problème ?
Merci d'avance

Nico

Link to comment
Share on other sites
fly_in_the_sky Newbie

fly_in_the_sky

Posted
Posted
bon... les id sont des nombres, peut etre est-ce gênant...
essaye juste ça : 
{$node.name|escape:htmlall:'UTF-8'}



J'ai toujours le même problème, ...

Mais le code que j'ai mis précédament est faux, il manque une partie que le forum de prestashop éfface chaque fois que je veux l'inserer

:


J'éssaye de l'inserrer tout seul ;

Voici la partie de mon code qui se trouve avant title

{if $node.id == $currentCategoryId}class="selected"{/if}


J'imagine que c'est aprceque j'ai ce code là que cela fonctionne ...
Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted

c'est normal, tu t'es pas mal éloigné du but avec toutes ces modif successives.
Je te rassure on est tous passé par là :)

{$node.id} = id_catégorie_actuelle = 11

donc

id="{$node.id}" équivaut à id="11" pour la catégorie onze...


//////////////////////////////////////////////////////////////////////

{if $node.id == $currentCategoryId}class="selected"{/if}

ça c'est autre chose, il faut le laisser et pas y toucher, ça sert à rajouter l'attribut class="selected" à la catégorie ou se trouve actuellement le visiteur. (SI l'id du nœud actuel == l'id de la catégorie actuelle >> ajouter class="selected")


N'hésite pas à aller sur le site officiel de SMARTY, il y a plein de ressources utiles pour commencer, en Français en + ;)

http://www.smarty.net/manual/fr/



ps : effectivement il y a un bug du forum qui empêche de copier coller correctement le code. :-S

Link to comment
Share on other sites
fly_in_the_sky Newbie

fly_in_the_sky

Posted
Posted

Effectivement,
j'ai mixé tout les code ... haha ..
Maintenant j'ai quelque chose de propre ...


C'est vraiment passionnant, et incroyable , la structure de prestashop ... C'est comme un bon livre que l'on découvre ...un peu plus tout les jours ...


Bon par contre je bloque toujours car il n'y a pas d'incone qui apparait...

Voici mon code dans le css :

#id="11" {
background: url(../img/icon/sitemap.gif) no-repeat top left;
}

J'ai éssayer sans le no-repeat top left
rien n'y fait...
J'ai encore louper une case ?

Link to comment
Share on other sites
Peha Newbie

Peha

Posted
Posted

#11 {
...
}

je suis ravi de t'aider
mais ce genre de chose est simplissime, c'est la base du css, que tu peux aborder très facilement sur Alsacreations en quelques heures.

Tu seras alors plus libre dans la customisation de ta boutique...
et tu poseras moins de question :)

Link to comment
Share on other sites
  • 3 years later...
zasami Newbie

zasami

Posted
Posted

bonjour

je viens de débuter avec PS, je veux ajouter une icone Home à la place de mot accueil sur le menu horizontal, je bien chercher avec toute les langue et sur tout les forums mais sans piste .... quelqu’un a une idée,

je pense que ici je suis pas loin, mais je trouve pas ou changer tous ces code est-ce dans le global.css?

merci d'avance

Link to comment
Share on other sites
  • 2 weeks later...
Azureaweb Newbie

Azureaweb

Posted
Posted (edited)

Si ça peut aider...

 

J'ai mis en place ce sytème vérifiable ici : www.edistrint.com

 

Dans mon cas, j'utilise le blocktopmenu de Julien Breux

 

Dans le fichier blocktopmenu.php vers la ligne 420 remplacer la fonction getCategory par celle-ci :

 

 

private function getCategory($id_category, $id_lang, $estEnfant=false)
 {
   global $page_name;
   $categorie = new Category($id_category, $id_lang);
   if(is_null($categorie->id))
  return;
   $selected = ($page_name == 'category' && ((int)Tools::getValue('id_category') == $id_category)) ? ' class="sfHoverForce"' : '';
   $this->_menu .= '<li'.$selected.'>';
   if(count(explode('.', $categorie->name)) > 1)
  $name = str_replace('.', '', strstr($categorie->name, '.'));
   else
  $name = $categorie->name;
/*if(file_exists(_THEME_CAT_DIR_.$id_category.'.png'))
$this->_menu .= '<img src="'._THEME_CAT_DIR_.$id_category.'.png" style="float:left;" /><a href="'.$categorie->getLink().'">'.$name.'</a>';
else
$this->_menu .= '<a href="'.$categorie->getLink().'">'.$name.'</a>';
*/
   $childrens = Category::getChildren($id_category, $id_lang);
if(!$estEnfant)
$this->_menu .= '<a href="'.$categorie->getLink().'">'.$name.'</a>';
else{
$mypng = _THEME_CAT_DIR_.$id_category.'.png';
// CHECK IF FILE EXIST
//if(file_exists($mypng))
$this->_menu .= '<img src="'._THEME_CAT_DIR_.$id_category.'.png" style="float:left;" /><a href="'.$categorie->getLink().'">'.$name.'</a>';
/*else
$this->_menu .= '<img src="'._THEME_CAT_DIR_.'18.png" alt="'.$mypng.'" style="float:left;" /><a href="'.$categorie->getLink().'">'.$name.'</a>';*/
}
   if(count($childrens))
   {
  $this->_menu .= '<ul>';
  foreach($childrens as $children)
    $this->getCategory($children['id_category'], $id_lang, true);
  $this->_menu .= '</ul>';
   }
   $this->_menu .= '</li>';
 }

 

Dans le fichier admin_directory/tabs/AdminCategories.php

 

Vers la ligne 187, fonction postImage, ajouter après la fermeture du if "}" et avant le return :

 

// UPLOAD LOGO FOR THE MENU
move_uploaded_file($_FILES['imagemenu']['tmp_name'], _PS_CAT_IMG_DIR_.$id_category.'.png');

 

Vers la ligne 210, juste après la déclaration du fieldset, ajouter ce code :

 

<label>'.$this->l('Logo pour le menu :').' </label>
<div class="margin-form">';
echo  '<img src="../img/c/'.$obj->id.'.png" />';
echo ' <br /><input type="file" name="imagemenu" />
<p>'.$this->l('Upload category logo from your computer').'<br />'.$this->l('ATTENTION : Le format du logo doit IMPERATIVEMENT être PNG').'</p>
</div>
<div class="clear"><br /></div>

 

Conclusion

 

Dans l'interface admin, votre logo est uploadable lors de l'ajout d'une catégorie. Ce logo va être sauvegardé dans le dossier "img/c/" et portera comme nom : id_de_la_categorie.png

 

Voilà, en espérant que cela serve à quelqu'un !

 

@ plus !

Edited by Azureaweb (see edit history)
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...