Jump to content

Font Awesome & Prestashop 1.6


Recommended Posts

Question pour un champion ... ou Pour un Noob  :ph34r:

Je cherche à comprendre comment fonctionne Font Awesome..??!!

 

Dans Prestashop; ou est ce qu'on trouve tous les codes Font Awesome à insérer ??

 
 
 

Share this post


Link to post
Share on other sites

Ok pour récupérer le code voulu dans le dossier SASS

J'étais pas allé encore fouiller ce dossier

 

Quand je veux l'incorporer dans une feuille CSS existante genre par exemple global.css

 

Le code se présente de cette façon...

 

CSS

content: "\f09a";

et toi tu me dit de coller ça : 

<i class="icon-quetuveux"></i>

Désolé si ma question parait nul mais j ai encore jamais utilisé Font Awesome  :blink: 

Share this post


Link to post
Share on other sites

Je veux les utiliser ... Ou pour être plus précis en changer un par un autre déjà existant pour le moment...

 

Après si jpeux apprendre à en utiliser sur les fiches produits, cms, ect ...Je dis pas non ...  ;)

Share this post


Link to post
Share on other sites

  • 2 months later...

Bonjour à tous

Je relance ce sujet parce que je cherche à mon tour à ajouter une icône mais dans un fichier TPL.

J'ai essayé d'ajouter <i class="fa-calendar"></i> je vois bien la déclaration dans le source mais l’icône n'apparaît pas.

lokiiy, tu as réussi à insérer ton icône depuis le temps ?

Merci pour votre aide

Share this post


Link to post
Share on other sites

Bonjour à tous

Merci jomcdonald

 

Finalement, je m'en suis sorti en modifiant le format

des préconisations Font Awesome http://fortawesome.github.io/Font-Awesome/ :
<i class="fa fa-calendar"></i>

 

Par le format PS :

<i class="icon-calendar"></i>

 

Je me demande d'ailleurs pourquoi PS a eu besoin de modifier ce format par rapport à l'original...

Edited by pierrewebmaster (see edit history)

Share this post


Link to post
Share on other sites

Alors j'ai voulu afficher une petite vignette "check" à coté de la mention en stock sur la fiche produit mais ça ne marche pas.

 

Testé sur le fichier product.tpl avec

<i class="fa fa-check"></i>

ou

<i class="icon-check"></i>

 

Rien ne marche...

 

Si quelqu'un connait l'astuce, je mis prend sans doute mal mais j'aimerais savoir pourquoi.

 

Merci

Share this post


Link to post
Share on other sites

Et bien non, justement.

 

Voila ou je l'ai placé:

 

product.pl

<span id="availability_value"{if $product->quantity <= 0} class="warning_inline"{/if}>{if $product->quantity <= 0}{if $allow_oosp}{$product->available_later}{else}{l s='This product is no longer in stock'}{/if}{elseif $product->available_now}{$product->available_now}{else}<i class="icon-check"></i>{l s='In stock'}{/if}</span>	

Share this post


Link to post
Share on other sites

En ce qui me concerne j'ai masqué la  disponibilité parce que j'ai des produits uniques mais j'essaierai de mettre la balise sur la ligne juste au dessus (ligne 210) :

<span id="availability_label"><i class="icon-check"></i>{l s='Availability:'}</span>

Share this post


Link to post
Share on other sites

Effectivement à ce niveau ça marche... 

Y aurait'il un problème si la balise est placé dans un if ???

 

Mystère, mais là ce n'est pas fonctionnel...

 

EDIT: Finalement le souci provient apparemment du javascript intégré à la balise "availability_value".

Si on enlève id="availability_value" l'icone est visible mais la mention coloré en stock disparaît et le statut n'est plus actualisé si un produit est hors stock...

Edited by jomcdonald (see edit history)

Share this post


Link to post
Share on other sites

Oui, ça marche en dehors de la zone "en stock". Ton code est bon et m'affiche bien l'icone mais si un produit n'est pas dispo, l'icone est toujours affiché, ce n'est donc pas fonctionnel.

 

Et si on place l'icone à coté de la mention en stock, ça ne s'affiche plus . Conflit avec le javascript.

Share this post


Link to post
Share on other sites

  • 1 month later...

Effectivement à ce niveau ça marche... 

Y aurait'il un problème si la balise est placé dans un if ???

 

Mystère, mais là ce n'est pas fonctionnel...

 

EDIT: Finalement le souci provient apparemment du javascript intégré à la balise "availability_value".

Si on enlève id="availability_value" l'icone est visible mais la mention coloré en stock disparaît et le statut n'est plus actualisé si un produit est hors stock...

 

Pour moi ca fonctionne comme ca :

<span id="availability_value"{if $product->quantity <= 0 && !$allow_oosp} class="warning_inline"{/if}>  {if $product->quantity <= 0}{if $allow_oosp}<i class="icon-check"></i> YO {$product->available_later}{else} <i class="icon-warning-sign"></i> {l s='This product is no longer in stock'}{/if}{else}<i class="icon-check"></i> {$product->available_now}{/if}</span>

Un icone CHECK quand c'est en stock

Un icone POINT D'EXCLAMATION quand c'est indispo.

Share this post


Link to post
Share on other sites

Pour moi ca fonctionne comme ca :

<span id="availability_value"{if $product->quantity <= 0 && !$allow_oosp} class="warning_inline"{/if}>  {if $product->quantity <= 0}{if $allow_oosp}<i class="icon-check"></i> YO {$product->available_later}{else} <i class="icon-warning-sign"></i> {l s='This product is no longer in stock'}{/if}{else}<i class="icon-check"></i> {$product->available_now}{/if}</span>

Un icone CHECK quand c'est en stock

Un icone POINT D'EXCLAMATION quand c'est indispo.

 

 

Pardon le bon code est celui-ci :

					<span id="availability_value"{if $product->quantity <= 0 && !$allow_oosp} class="warning_inline"{/if}>  {if $product->quantity <= 0}{if $allow_oosp} {$product->available_later}{else} <i class="icon-warning-sign"></i> {l s='This product is no longer in stock'}{/if}{else}<i class="icon-check"></i> {$product->available_now}{/if}</span>
				</p>

Le precedent contenait mes reperes ;)

Share this post


Link to post
Share on other sites

Je sens que je vais faire des heureux donc suivez ce tuto et vous aurez toutes les icones dispo sur l’éditeur de texte pour pouvoir faire des superbes descriptions produits.

 

http://blobmarket.com/blog/utiliser-fontawesome-dans-prestashop-1-6.html#.U3ut2Pl_tyV

 

Bonjour,

 

J'ai bien suivi les explications fournies en lien...Et après plusieurs essais et vérifications le résultat est catastrophique.

 

Il n'y a simplement plus les barres d'options des menus pour les informations des produits, et cela nul part (CMS, etc.) dans le Back-Office.

 

J'ai remplacé par les fichiers d'origine...Mais l'erreur subsiste toujours !?

Edited by myselfidem (see edit history)

Share this post


Link to post
Share on other sites

Pardon le bon code est celui-ci :

					<span id="availability_value"{if $product->quantity <= 0 && !$allow_oosp} class="warning_inline"{/if}>  {if $product->quantity <= 0}{if $allow_oosp} {$product->available_later}{else} <i class="icon-warning-sign"></i> {l s='This product is no longer in stock'}{/if}{else}<i class="icon-check"></i> {$product->available_now}{/if}</span>
				</p>
Le precedent contenait mes reperes ;)

 

 

Oui, ça fonctionne bien quand un produit n'a pas de déclinaison mais sinon il y a un conflit javascript.

Teste avec un produit à déclinaison pour voir...

Share this post


Link to post
Share on other sites

  • 3 years later...

Bonjour,

 

Je ressors ce vieux sujet pour le mettre d'actualité. J'aimerai ajouter quelques icon sur mon site presta et d'après le site font awesome le code est: 

<i class="fas fa-shipping-fast"></i>

Problème, prestashop ne reconnait pas FAS fa- mais uniquement FA fa-, du coup impossible d'insérer les nouvelles icones.

Quelqu'un a-t-il une solution à mon problème?

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
 Share

×
×
  • Create New...

Important Information

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