Jump to content
Klaus Boutik

Création CSS sur alerte disponibilité d'un produit

Recommended Posts

Bonjour

Dans le bloc prix d'un article, je souhaiterais créer un CSS pour la ligne disponibilité de facon à l'afficher en rouge :

Exemple :

Disponibilité : disponible à partir du 25 Octobre

 

Avec Firebug j'ai reperé ceci :

<p id="availability_statut">

<span id="availability_label">Disponibilité :</span>
<span id="availability_value" class="warning-inline"> Disponible à partir du 25 Octobre. ATTENTION !! quantité limitée, pensez à réserver </span>
</p>

 

Mais après, comment intégrer un css pour cette ligne .

J'ai accès au css et aux fichiers.

Merci pour votre aide

Edited by Klaus Boutik (see edit history)

Share this post


Link to post
Share on other sites

Il vous suffit :

- éditer le fichier global.css de votre thème

- ajouter une règle comme suit :

  #availability_value{

    color:red

   }

- enregistrer et penser à vider les caches

Share this post


Link to post
Share on other sites

Ca marche ! c'était très simple en effet, merci beaucoup

 

Je lance une autre idée :

  • en stock : couleur verte
  • en réassort : couleur orange
  • en rupture : couleur rouge

Est ce réalisable ? merci

Edited by Klaus Boutik (see edit history)

Share this post


Link to post
Share on other sites

A ce moment là, vous pouvez faire comme suit :

 

Dans global.css:

Pour l'indispo

#availability_statut .warning-inline{

color : red

}

Pour en stock

#availability_value{

color:green

}

Share this post


Link to post
Share on other sites

Merci encore, c'est exactement ce que je voulais.

Cependant je souhaiterais différencier les couleurs de :

=> article en cours de réassort avec statut stock "Accepter les commandes" => en cours de réassort, dispo 25 octobre

=> article en rupture avec le statut stock "Refuser les commandes" => article épuisé

=> et article en stock => en stock

 

Est ce réalisable également ?

Merci

Edited by Klaus Boutik (see edit history)

Share this post


Link to post
Share on other sites

Bonjour

Je relance le sujet car j'ai vraiment besoin de solutionner ce problème car actuellement mes articles non dispos mais commandables s'affichent en vert d’où confusion pour le client.

Merci pour vos réponses

Share this post


Link to post
Share on other sites

Je n'ai pas trop le temps mais à première vue, vous pourriez faire comme suit :

product.tpl

				<span id="availability_value"{if $product->available_now} class="en_stock" {elseif $product->available_later} class="en_reappro" {elseif !$product->available_later && !$product->available_now} class="en_rupture"{/if}>

product.css

#availability_statut span.en_stock{
color:green!important
}
#availability_statut span.en_reappro{
color:orange!important
}
#availability_statut span.en_rupture{
color:red!important
}

Share this post


Link to post
Share on other sites

Merci pour votre réponse mais ca ne fonctionne pas, ca s'affiche toujours en vert qq soit le statut.

Dois-je ajouter la ligne ou remplacer une autre ?

Exemple :

http://www.klaus-boutik.com/creche-de-noel-en-bois/493-creche-de-noel-en-bois-avec-personnages.html

 

Je résume ma demande (uniquement les couleurs, le texte est lui saisi dans l'admin)

=> article en stock => en stock

=> article en cours de réassort mais avec statut stock "Accepter les commandes" => en cours de réassort

=> article en rupture avec le statut stock "Refuser les commandes" => article épuisé

 

Ci joint mon product.tpl actuel non modifié :

 

<!-- availability -->
            <p id="availability_statut"{if ($product->quantity <= 0 && !$product->available_later && $allow_oosp) OR ($product->quantity > 0 && !$product->available_now) OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
                <span id="availability_label">{l s='Availability:'}</span>
                <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}{else}{$product->available_now}{/if}
                </span>
            </p>
 

Pour le CSS c'est en principe bon :

 

/* Bloc prix couleur alerte */
    #mailalert_link{
    color: #890404;
    margin-top:0
}
#availability_statut .warning-inline{
    color:#DA0F00;
    font-weight: bold;
}
#availability_statut span.en_stock{
color:green!important;
font-weight: bold;
}
#availability_statut span.en_reappro{
color:orange!important
}
#availability_statut span.en_rupture{
color:red!important
}

 

Merci

Edited by Klaus Boutik (see edit history)

Share this post


Link to post
Share on other sites

Bonjour,

 

Tentez ceci :

 

product.tpl

Remplacer

<span id="availability_value"{if $product->quantity == 0} class="warning-inline"{/if}>

Par

<span id="availability_value" class={if ($product->quantity <= 0 && $product->available_now && $allow_oosp && $product->available_for_order)}"en_reappro"{/if}>

Puis dans product.css

Mettez

#availability_statut span#availability_value {
	display:inline-block;
	padding:1px 5px;
	font-weight:bold;
	font-size:10px;
	color:green;
	text-transform:uppercase;
	background:#ffffff
}
#availability_statut span.en_reappro.warning_inline{
color:orange!important
}
#availability_statut span.warning_inline{
color:red!important
}

Bonne journée

 

Edit : remplacer warning-inline par warning_inline

Edited by SWITCHBOARD (see edit history)

Share this post


Link to post
Share on other sites

OK modif effectuée

 

mais si je ne fais que la modif du produt.tpl, ca ne marche que pour le statut en réapro (orange)

L'article en stock ne s'affiche pas en vert

L'article en rupture ne s'affiche pas en rouge

 

Si je fais la modif CSS en plus :

Tout reste en vert avec les modifs de mise en forme prise en compte

??

Share this post


Link to post
Share on other sites

Aucun changement !

Exemples :

devrait s'afficher en orange

http://www.klaus-boutik.com/creche-de-noel-en-bois/493-creche-de-noel-en-bois-avec-personnages.html

 

s'affiche en vert OK car dispo

http://www.klaus-boutik.com/creche-de-noel-en-bois/20-creche-de-noel-allemande-pyramide-27-cm.html

 

devrait s'afficher en rouge mais reste en vert

http://www.klaus-boutik.com/creche-de-noel-en-bois/45-creche-de-noel-allemande-pyramide-a-bougies-a-3-etages.html

 

Sinon très bien la mise en forme, j'ai juste enlevé le upper-case

Share this post


Link to post
Share on other sites

Tout ca a été fait déjà.

Mais je ne touche plus au cache car j'ai déjà planté le site à cause de cela !

Il semble que le problème vienne du CSS car avec Firebug les class changent bien selon les dispos et s'affichent correctement .

Mais pas de changement de couleur, c'est toujours le vert qui prédomine

 

les 3 exemples :

s'affiche en vert OK car dispo

http://www.klaus-bou...mide-27-cm.html

 

devrait s'afficher en orange mais reste en vert

http://www.klaus-bou...ersonnages.html

 

devrait s'afficher en rouge mais reste en vert

http://www.klaus-bou...a-3-etages.html

 

Merci

Edited by Klaus Boutik (see edit history)

Share this post


Link to post
Share on other sites

Bonjour,

 

Pour les produits disponibles en réapprovisionnement, mettez ceci :

#availability_statut span.en_reappro {
    color: #FFA500 !important;
}

Share this post


Link to post
Share on other sites

Essayez ceci

product.tpl (remplacer par)

<span id="availability_value" class={if ($product->available_later && $allow_oosp && $product->available_for_order)}"en_reappro"{/if}>

product.css (remplacer par)

#availability_statut span#availability_value {
	display:inline-block;
	padding:1px 5px;
	font-weight:bold;
	font-size:10px;
	color:green;
	text-transform:uppercase;
	background:#ffffff
}
#availability_statut span.en_reappro {
    color: green!important;
}
#availability_statut span.en_reappro.warning_inline{
color:orange!important
}
#availability_statut span.warning_inline{
color:red!important
}

Share this post


Link to post
Share on other sites

Ca ne marche toujours pas ! aucun changement c'est pire tout redevient vert mainteant qq qoit le statut

Le product.tpl modifié donne ca :

 

<!-- availability -->
            <p id="availability_statut"{if ($product->quantity <= 0 && !$product->available_later && $allow_oosp) OR ($product->quantity > 0 && !$product->available_now) OR !$product->available_for_order OR $PS_CATALOG_MODE} style="display: none;"{/if}>
                <span id="availability_label">{l s='Availability:'}</span>
                <span id="availability_value" class={if ($product->available_later && $allow_oosp && $product->available_for_order)}"en_reappro"{/if}>
                                {if $product->quantity == 0}{if $allow_oosp}{$product->available_later}{else}{l s='This product is no longer in stock'}{/if}{else}{$product->available_now}{/if}
                </span>
            </p>

 

C'est bien ca ? car on en est  à 5 modifs sur le tpl maintenant.

Merci

Share this post


Link to post
Share on other sites

Bonjour

Oui je désactive performance maximum et rafraichit la page à chaque fois.

Etes vous sur de mon code TPL modifié ?

Merci

Share this post


Link to post
Share on other sites

Toujours aucun résultat, désolé

Le CSS est bien pris en compte (passage en majuscule)  mais tout les textes restent vert !

 

Rappel : en version précédente, le réassort passait bien en orange mais l'indispo restait en vert eu lieu de rouge

 

Avez vous vérifié le code du product.tpl indiqué plus haut ?

Je laisse ainsi jusqu'à demain afin que vous constatiez-vous même

 

Rappel des liens :

devrait s'afficher en orange mais reste en vert

http://www.klaus-bou...ersonnages.html

 

devrait s'afficher en rouge mais reste en vert

http://www.klaus-bou...a-3-etages.html

Edited by Klaus Boutik (see edit history)

Share this post


Link to post
Share on other sites

Sur mon site, vider les caches c'est désactiver le smarty

J'ai consulté mon prestataire, il m'a dit de faire cela

Sinon dites moi quelle manip faire ? Sauf que l'autre jour j'ai planté le site en essayant d'effacer les caches !

 

Par ailleurs la version precedente fonctionnait presque. Sauf le rouge,  ne croyez vous pas que c'est de ce coté qu"il faudrait chercher ?

Share this post


Link to post
Share on other sites

Pour vider les caches :

1 - Cocher "Forcer la compilation" et Désactiver le "Cache" dans BO > Paramètres Avancés > Performances

2 - Vider le contenu de /cache/smarty/cache sauf index.php

3 - Vider le contenu de /cache/smarty/compile sauf index.php

4 - Vider le contenu de /themes/votre_theme/cache/ sauf index.php

5 - Dans le navigateur, faites un CTRL+F5

Share this post


Link to post
Share on other sites

Si malgré tout cela ça ne fonctionne toujours pas, essayez ceci :

product.tpl

<span id="availability_value" class={if ($product->available_later && $allow_oosp && $product->available_for_order)}"en_reappro"{elseif (!$allow_oosp && $product->quantity <= 0) OR !$product->available_for_order}"warning_inline"{/if}>

product.css

#availability_statut span.en_reappro {
    color: #FFA500 !important;
}

Share this post


Link to post
Share on other sites

CA MARCHE !!!!! :)

 

Mais j'ai rétabli le CSS précédent

Merci pour votre aide. Je ferai une récap dans un prochain post pour ceux que ca intéresse

Share this post


Link to post
Share on other sites

Grrrr parlé trop vite :wacko:

 

Drôle de phénomène maintenant

On a bien l'orange et le rouge qui fonctionne mais le vert de dispo devient orange pour articles qui ont le statut "Accepter les commandes" en cas de rupture donc on a "en stock" en orange

 

exemple : http://www.klaus-boutik.com/bougies-pour-creches-de-noel/27-bougies-rouges-14mm-pour-creche-de-noel.html

 

Sur les autres articles dispos qui ont le satut "refuser les commandes", il est bien vert

 

???

Edited by Klaus Boutik (see edit history)

Share this post


Link to post
Share on other sites

Rajouter un !important après #3A9C0F dans la la règle #availability_statut span#availability_value

#availability_statut span#availability_value {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #3A9C0F !important;
    font-size: 10px;
    font-weight: bold;
}

Il s'agit d'un problème de navigateurs...

Share this post


Link to post
Share on other sites

OK

mais tout est vert maintenant quel que soit le statut ! grrrrrrrrrr

 

LE CSS

* Bloc prix couleur alerte */
    #mailalert_link{
    color: #890404;
    margin-top:0
}
#availability_statut span#availability_value {
    font-weight:bold;
    font-size:10px;
    color:#3a9c0f !important;
    background:#ffffff
}
#availability_statut span.warning_inline{
color:red!important
}

#availability_statut span.en_reappro {
    color: #fc801c!important;
}

Edited by Klaus Boutik (see edit history)

Share this post


Link to post
Share on other sites

Alors annulez la dernière modif avec le !important

 

Le lien ci-dessus m'affiche bine le stock en vert.

 

Testé sous FF, IE mais sous CHROME c'est Orange...

Edited by SWITCHBOARD (see edit history)

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

×
×
  • Create New...

Important Information

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