Jump to content

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

Klaus Boutik
 Share

Recommended Posts

Klaus Boutik Newbie

Klaus Boutik

Posted
Posted (edited)

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)
Link to comment
Share on other sites
Klaus Boutik Newbie

Klaus Boutik

Posted
  • Author
Posted (edited)

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)
Link to comment
Share on other sites
Superbegood31 Newbie

Superbegood31

Posted
Posted

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
}
Link to comment
Share on other sites
Klaus Boutik Newbie

Klaus Boutik

Posted
  • Author
Posted (edited)

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)
Link to comment
Share on other sites
Superbegood31 Newbie

Superbegood31

Posted
Posted (edited)

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)
Link to comment
Share on other sites
Klaus Boutik Newbie

Klaus Boutik

Posted
  • Author
Posted

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

??

Link to comment
Share on other sites
Klaus Boutik Newbie

Klaus Boutik

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Klaus Boutik Newbie

Klaus Boutik

Posted
  • Author
Posted (edited)

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)
Link to comment
Share on other sites
Superbegood31 Newbie

Superbegood31

Posted
Posted

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
}
Link to comment
Share on other sites
Klaus Boutik Newbie

Klaus Boutik

Posted
  • Author
Posted

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

Link to comment
Share on other sites
Klaus Boutik Newbie

Klaus Boutik

Posted
  • Author
Posted (edited)

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)
Link to comment
Share on other sites
Klaus Boutik Newbie

Klaus Boutik

Posted
  • Author
Posted

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 ?

Link to comment
Share on other sites
Superbegood31 Newbie

Superbegood31

Posted
Posted

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

Link to comment
Share on other sites
Superbegood31 Newbie

Superbegood31

Posted
Posted

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;
}
Link to comment
Share on other sites
Klaus Boutik Newbie

Klaus Boutik

Posted
  • Author
Posted (edited)

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)
Link to comment
Share on other sites
Superbegood31 Newbie

Superbegood31

Posted
Posted

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...

Link to comment
Share on other sites
Klaus Boutik Newbie

Klaus Boutik

Posted
  • Author
Posted (edited)

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