Jump to content

Changer icone panier

edlefou
 Share

Recommended Posts

edlefou Newbie

edlefou

Posted
Posted

Bonjour,

 

Utilisant le theme par default, je souhaite changer l'icone du panier par une icone personnelle. Prestashop 1.6 utilisant la bibliotheque FontAwesome, je ne sais comment faire pour enlever l'icone présent et la remplacer par mon icone.

En vous en remerciant par avance

Link to comment
Share on other sites
slykereven Newbie

slykereven

Posted
Posted

Bonjour,

 

D'abord pour enlever le caddie il faut commenter le fichier blockcart.css :

.shopping_cart > a:first-child:before {
      /*content: "\f07a";*/

Ensuite pour insérer une image, il faut rajouter le chemin suivant dans le fichier blockcart.tpl :

<!-- MODULE Block cart -->
{if isset($blockcart_top) && $blockcart_top}
<div class="col-sm-12{if $PS_CATALOG_MODE} header_user_catalog{/if}">
{/if}
	<div class="shopping_cart">
		<a href="{$link->getPageLink($order_process, true)|escape:'html':'UTF-8'}" title="{l s='View my shopping cart' mod='blockcart'}" rel="nofollow">
		<img src="/img/imagedupanier.png" id="imagedupanier">

Je rajoute un ID pour pouvoir intervenir facilement dessus en CSS après  :)

Link to comment
Share on other sites
edlefou Newbie

edlefou

Posted
  • Author
Posted

Bonjour,

 

D'abord pour enlever le caddie il faut commenter le fichier blockcart.css :

.shopping_cart > a:first-child:before {
      /*content: "\f07a";*/

Ensuite pour insérer une image, il faut rajouter le chemin suivant dans le fichier blockcart.tpl :

<!-- MODULE Block cart -->
{if isset($blockcart_top) && $blockcart_top}
<div class="col-sm-12{if $PS_CATALOG_MODE} header_user_catalog{/if}">
{/if}
	<div class="shopping_cart">
		<a href="{$link->getPageLink($order_process, true)|escape:'html':'UTF-8'}" title="{l s='View my shopping cart' mod='blockcart'}" rel="nofollow">
		<img src="/img/imagedupanier.png" id="imagedupanier">

Je rajoute un ID pour pouvoir intervenir facilement dessus en CSS après  :)

 

Merci beaucoup

J'avais trouvé comment enlever le panier mais pas comment rajouter l'image, en fait c'etait tout simple. 

Merci encore 

Link to comment
Share on other sites
  • 7 months later...
  • 2 months later...
  • 8 months later...
mlp13 Newbie

mlp13

Posted
Posted

Bonjour

Je souhaite remplacer l'icone existante par l'icone "shopping-bag / f290"

Quand je modifie le code dans le .css, il ne se passe rien

Que dois je faire de plus ?

Merci par avance

 

J'ai poursuivi mes recherches, il me semble que cette icone n'existe pas nativement dans PS 1.6

J'ai essayé de l'ajouter dans font-awesome.css et dans global.css

Mais sans résultat pour le moment malgré vidages du cache

Link to comment
Share on other sites
slykereven Newbie

slykereven

Posted
Posted

Bonjour,

là je n'ai pas trop le temps de regarder en profondeur, mais oui je pense que l'icone n'est pas nativement dans prestashop, en théorie il faudrait déclarer le lien vers fontawesome en rajoutant dans le header du template utilisé 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

je verrais si j'ai plus de temps dans le weekend ou la semaine prochaine.

Bonne continuation ;)

Link to comment
Share on other sites
mlp13 Newbie

mlp13

Posted
Posted

Bonjour,

là je n'ai pas trop le temps de regarder en profondeur, mais oui je pense que l'icone n'est pas nativement dans prestashop, en théorie il faudrait déclarer le lien vers fontawesome en rajoutant dans le header du template utilisé 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

je verrais si j'ai plus de temps dans le weekend ou la semaine prochaine.

Bonne continuation ;)

Bonjour

J'ai ajouté ce lien dans le header.tpl (avant la balise </header>) et malheureusement ça ne semble pas marcher  :(

Merci de votre aide

Je poursuis également ce we

Link to comment
Share on other sites
  • 4 weeks later...
Frédérique Newbie

Frédérique

Posted
Posted

Bonjour,

 

Je relance le sujet. J'ai le même souhait: changer l'icône "shopping-cart" par "shopping-bag" de la version 4.5 de FontAwesome.

Du coup je comprends qu'il faut que je mette à jour FontAwesome. En téléchargeant le .zip sur le site officiel, le dossier comprend :

- un dossier .css

-un dossier fonts

-un dossier less

-un dossier scss

 

Est-ce que quelqu'un peut m'éclairer sur la procédure?

 

Merci beaucoup!

Link to comment
Share on other sites
slykereven Newbie

slykereven

Posted
Posted (edited)

Ok, exemple sur prestashop v 1.6.1.4

485055cartprestashop.jpg

 

1: Alors on commence par commenter le fichier /prestashop/themes/default-bootstrap/css/modules/blockcart/blockcart.css à la ligne 45 pour faire disparaître l'ancienne icone

/*.shopping_cart > a:first-child:before {
content: "\f07a";
font-family: "FontAwesome";
display: inline-block;
font-size: 23px;
line-height: 23px;
color: #fff;
padding-right: 15px; }*/ 

2: on rajoute la ligne pour avoir le dernier font awesome avec un lien via un CDN (ça héberge du code et donc allège votre serveur, il y a des CDN pour beaucoup d'application) dans le fichier prestashop/themes/default-bootstrap/header.tpl à la ligne 59 avant <!--[if IE 8]>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 

3: et pour finir on met la ligne de code pour insérer notre nouvelle icone au format fontawesome  <i class="fa fa-shopping-basket fa-inverse fa-lg"></i> dans le fichier prestashop/themes/default-bootstrap/modules/blockcart/blockcart.tpl à la ligne 31

<div class="shopping_cart">
        <a href="{$link->getPageLink($order_process, true)|escape:'html':'UTF-8'}" title="{l s='View my shopping cart' mod='blockcart'}" rel="nofollow">
        <i class="fa fa-shopping-basket fa-inverse fa-lg"></i>
            <b>{l s='Cart' mod='blockcart'}</b>

4: désactiver le cache dans la config performance de prestashop + Forcer la compilation à chaque appel

5: actualiser votre page et la nouvelle icone devrait être en place :)

Edited by slykereven (see edit history)
  • Like 2
Link to comment
Share on other sites
  • 4 weeks later...
slykereven Newbie

slykereven

Posted
Posted

Bonjour,

 

je possède un thème qui est une version un peu évolué du thème de base. J'ai bien effectué vos modifications mais désormais je me retrouve avec et le panier et caddie...

 

Pouvez m'aider?

 

http://www.discounteur.fr

 

Merci par avance

 

Bonjour,

 

Vous devez trouver dans le fichier css de votre thème la ligne avec 

 

content: "\f07a";

 

et donc la commenter avec /* content: "\f07a"; */ pour la désactiver ou alors la supprimer.

 

N'oubliez pas de désactiver votre cache, relisez bien la méthode citée précédemment.

Link to comment
Share on other sites
slykereven Newbie

slykereven

Posted
Posted

Super merci!!!

 

J'avais bien mis le commentaire en fin met pas au début. Encore désolé et merci pour l'astuce.

 

Au cas ou savez vous si on peut mettre une icône avec un sac?

 

Cordialement

Vous pouvez utiliser toutes les icônes font awesome

https://fortawesome.github.io/Font-Awesome/icons/

 

et donc pour une icône sac il y a fa-shopping-bag

 

:)

Link to comment
Share on other sites
  • 2 months later...
astrid2776 Apprentice

astrid2776

Posted
Posted

Bonjour!

Je relance le sujet... pour enlever l'icône par défaut dans le blockcart j'y suis arrivée sans problèmes. Par contre j'ai mis un lien dans le fichier tpl (toujours blockcart) comme indiqué pour que mon image s'affiche, seulement j'ai un message d'erreur. ça peut paraître bête mais au final je ne sais pas dans quel dossier placer l'image pour que mon lien fonctionne.

Link to comment
Share on other sites
slykereven Newbie

slykereven

Posted
Posted

Bonjour,

 

Alors je vais actualiser la méthode :

Il faut ouvrir le fichier de votre thème, ici c'est default-bootstrap :  prestashop/themes/default-bootstrap/modules/blockcart/blockcart.tpl

 

Ensuite remplacer :

<i class="fa fa-shopping-basket fa-inverse fa-lg"></i>

par 

<img src="{$img_ps_dir}votreimage.png" id="imagedupanier" alt="icone panier">

pour finir mettre votre image dans le dossier prestashop/img/

 

ça devrait être bon :)

Link to comment
Share on other sites
  • 1 year later...

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
 Share
Go to topic listing
×
×
  • Create New...