[Résolu] Modifier couleur des produits EN STOCK et HORS STOCK

[F4brice]

Bonjour,

Après avoir cherché un peu sur le net et sur ce forum, je n'ai pas trouvé réponse à ma question.

Est t'il possible de mettre 2 couleurs différentes, pour l'affichage des produit "EN STOCK" et "HORS STOCK" ?

J'aimerais que lorsque mes produits sont disponibles, l'indication "EN STOCK" soit de couleur verte, et lorsque mes produits sont indispo, "HORS STOCK" soit de couleurs rouge.

MERCI A TOUS !

[Cerberux76]

Je suis également intéressé par une réponse !

[singaii]

ca a l'air plus complexe qu'il n'y parait.
en générale la couleur est gérée via le css mais là les deux attributs en stock ou hors stock ont le même code pour le css. il faudrait modifier le code pour que les deux soit afficher mais que l'un des deux soit caché en fonction de la valeur dans la base, ce qui permettrait de leur attribuer deux code css différents.

malheureusement je n'ai pas les connaissances suffisante en php pour faire ce genre de chose

[Patric]

Déplacé dans Développement.

[jeckyl]

Bonjour,

Pourriez vous préciser votre exemple en donnant des captures d'écran, car chez moi, il suffit de modifier le css.

Lorsque le produit n'est pas en stock, mais commandable une class css apparait sur la disponibilité : class="warning-inline" il vous suffit donc de l'utiliser pour changer la couleur du texte affiché.

[F4brice]

La seul ligne de Commande qui change mes couleur est :

ul#product_list li span.availability{
   color:#2C9D12;
   font-size:0.9em;
}

Cela change mes produits "EN STOCK", "HORS STOCK" et "COMMANDABLE"

Pas moyen de faire 2 voir 3 couleurs différentes

J'ai modif :

.warning_inline {
   color:#FF0000;
   font-weight:bold;

Mais toujours rien ...

C'est de cette ligne que tu nous parle ?

Une idée ? :s

[Atch]

Bonjour,

Une petite modification de TPL s'impose avant de modifier le css :

Dans le fichier product-list .tpl de votre theme, localisez la ligne :

{if ($product.allow_oosp OR $product.quantity > 0)}{l s='Available'}{else}{l s='Out of stock'}{/if}

Nous allons utiliser ce code pour attribuer une class différente à chaque état :

{if ($product.allow_oosp OR $product.quantity > 0)}{l s='Available'} {else} {l s='Out of stock'}{/if}

Ensuite il vous faut ajouter les attributs dans le css comme suit :

ul#product_list li span.availability, ul#product_list li span.outstock {
float:right;
font-size:0.9em;
}

ul#product_list li span.availability {
color:#488C40;
}

ul#product_list li span.outstock {
color:#ff0000;
}

à la place de :

ul#product_list li span.availability {
color:#488C40;
float:right;
font-size:0.9em;
}

Voilà pour l'idée

V++

Atch

[jeckyl]

Salut Atch, bien vu sauf que comment savais tu que c'était product-list.tpl ?????

Perso j'ai travailler sur la page product.tpl et là la class css existe.

Donc il faudrait avoir plus d'info la prochaine fois.

[Atch]

Salut Jeckyl,

J'sais pas, j'ai vu une liste de 4 produits sur la photo, j'en ai donc déduit que c'était sur product-list!

Et puis il dit, la seul ligne qui change la couleur c'est

ul#product_list li span.availability{
   color:#2C9D12;
   font-size:0.9em;
}

J'en conclus que c'est bien dans une liste donc product-list

V++

Atch

[F4brice]

Alors sachant que j'avais modifié product-list.tpl, car les articles commandables, affichait "En Stock", donc je voulais un affichage personnalisé, de maniere a avoir :

- produit en stock
- produits hors stock
- produits commandable

ma ligne de code initiale c'était :

{if $product.quantity > 0}{l s='Available'}{elseif $product.allow_oosp}{l s='Available soon'}{else}{l s='Out of stock'}{/if}

J'ai donc modifié comme cela :

{if $product.quantity > 0}{l s='Available'} {elseif $product.allow_oosp}{l s='Available soon'}{else}{l s='Out of stock'}{/if}

et le css :

ul#product_list li span.availability, ul#product_list li span.soon, ul#product_list li 

span.outstock {
float:right;
font-size:0.9em;
}

ul#product_list li span.availability {
color:#2C9D12;
}

ul#product_list li span.soon {
color:#FFA200;
}

ul#product_list li span.outstock {
color:#FF0000;
}

Et la ca marche !!!! t'es trop fort

Alors seul truc que je comprend pas, ca a tout décalé mes affichages de l'etat des stock.

Avant tout était aligné a gauche, et la cé a droite :s

Je joint un apercu

Merci encore

[F4brice]

float:right;

Je l'avais pas vu celui la !!

Voila probleme réglé !!

Merci beaucoup les gars !

[jeckyl]

Salut Jeckyl,

J'sais pas, j'ai vu une liste de 4 produits sur la photo, j'en ai donc déduit que c'était sur product-list!

Et puis il dit, la seul ligne qui change la couleur c'est

ul#product_list li span.availability{
   color:#2C9D12;
   font-size:0.9em;
}

J'en conclus que c'est bien dans une liste donc product-list

V++

Atch

Sauf que moi au début j'ai pas eu tout ça.

[shugo42]

Salut

D'abord merci a tous pour cette exellent travail, j'aimerai pourvoir aussi l'integrer dans les fiche produits alors comment faire

bye

[easybizness]

Bonjour tout le monde.

F4brice tu dis que tu as trois etats pour tes produits: En stock, hors stock et commandable.

Je recherche à faire la même chose mais je ne sais pas comment m'y prendre.

J'aimerais pouvoir sélectionner lesquels de mes produits sont disponibles à la commande avec un message sur la fiche produit du style Uniquement sur commande: disponible en 4 jours.

j'aimerais savoir si il est aussi possible d'avoir une icône spécifique pour chacun des états.

Merci d'avance à toute personne qui pourra m'aider...

Vincent

[easybizness]

je reup ma demande a f4brice

[jeckyl]

je reup ma demande a f4brice

Ben pourquoi ne pas le contacter directement par mail ou mp ?

[easybizness]

en fait je l'ai fait juste apres

Merci jeckyl

[fitovita]

le problème c'est que cette technique change bien la couleur dans la liste des produits, mais comment faire pour mettre le "en stock" en couleur mais DANS la fiche produit ???

merci beaucoup

[Full Carbone 94]

Salut,

 

je suis intéresser par la manip, j'ai tout bien fait mais rien ne change (j'ai forcer la compilation)

 

le soucie vient peut etre de mon fichier TPL, il est different de l'exemple :

 

origine :

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}

 

transformer en :

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'} {else} {l s='Out of stock'}{/if}</span>{/if}

(ajout d'espace avant et apres {else} a la fin du code, comme dans l'exemple citer par Atch)

 

Une petite idée ?

 

le fichier CSS est modifier et ne prend en compte que la ligne :

ul#product_list li span.availability {

color:#488C40;

}

 

Merci a vous

[masquelier.camille]

Des idées pour intégrer cette modification sur prestashop 1.6? Merci