Dans le cas d’un site dont l’activité est liée à une ou plusieurs saisons, il peut être intéressant de faire varier l’ambiance graphique du site en fonction de la période.
Avoir par exemple des couleurs plus vives pour l’été ainsi qu’un entête différent.
A titre d’exemple un site internet qui vendrait des vêtements, pourrait avoir 2 périodes, une période hiver et une période été.
C’est ce que qui va être fait dans cet article.
La première chose consiste à connaître les dates des saisons.
Pour faire simple, nous dirons que la saison d’été du site débute du 20 mars de chaque année et se termine le 23 septembre de chaque année.
Le reste du temps, c’est la saison d’hiver.
Pour la deuxième étape, il faut disposer d’éléments graphiques qui changeront en fonction de la saison.
Pour faire simple, je vous conseille de changer un nombre limité d’éléments comme l’image de fond de votre site ainsi que l’entête.
Vous devez donc avoir des jeux d’images différents.
La suite consiste à décliner certaines des classes CSS de votre thème par saison.
A titre d’exemple, pour la saison d’hiver, qui sera la saison par défaut, le code CSS du corps de ma page sera construit sous cette forme :
body {
color:#828282;
font-size:11px;
text-align:center;
font-family:Trebuchet MS, Arial, Verdana, Sans-Serif;
background:url('../img/fd_page.jpg') 50% 0 no-repeat #c4dadf;
}
La version pour l’été sous cette autre forme :
body.saison_ete {
color:#828282;
font-size:11px;
text-align:center;
font-family:Trebuchet MS, Arial, Verdana, Sans-Serif;
background:url('../img/fd_page_ete.jpg') 50% 0 no-repeat #eff6cd;
}
La seule différence tient dans l’image de fond, et comme vous pouvez le constater, la balise « body » de la page se voit ajouter une class « saison_ete ».
L’astuce, dans le thème Prestashop, consistera à ajouter une classe « saison_ete » sur la balise « body » au moment voulu.
En résumé, pour l’hiver, la balise body du template Prestashop se présentera comme ceci :
<body>
Et se présentera comme cela en été :
<body class="saison_ete">
Au besoin, et selon la manière dont est construit votre thème Prestashop, vous pourrez appliquer cette classe sur d’autres éléments (par exemple une balise <div>).
L’étape suivante consiste à modifier votre thème.
Dans mon cas, le fichier à modifier se trouve dans /themes/montheme/header.tpl ainsi que dans /themes/montheme/footer.tpl (j’ai besoin d’appliquer la classe « saison_ete » sur un <div> présent en pied de page).
Dans le fichier header.tpl après la balise </head>, j’ajoute le code suivant :
{php}
$now = time();
$debut = mktime(1,1,1,3,20, date('Y'));
$fin = mktime(1,1,1,9,23, date('Y'));
if($now >= $debut && $now <= $fin) {
$this->assign('saison_ete', true);
} else {
$this->assign('saison_ete', false);
}
{/php}
La variable $debut contient un timestamp qui correspond au 20 mars de chaque année à 1h01:01 du matin (donc ma date de début de période d’été)
La variable $fin quant à elle contient le 23 septembre à 1h01:01 du matin (donc ma date de fin de période d’été).
Consultez la documentation de la fonction mktime() de Php pour en connaitre les paramètres ainsi que le fonctionnement.
Le code qui suit test si la date du jour est comprise dans la période d’été, si c’est le cas, on crée une variable Smarty « saison_ete » a qui on donne la valeur « vrai » pour indiquer l’été.
Dans le cas contraire, on crée aussi une variable Smarty « saison_ete » mais qui contient faux pour indiquer qu’on est en hiver.
Il ne reste plus ensuite qu’à ajouter la classe « saison_ete » à ma balise body de cette manière :
<body {if $saison_ete == true}class="saison_ete"{/if}>
J’applique ce même test dans mon pied de page (footer.tpl) :
<div id="endfooter" {if $saison_ete == true}class="saison_ete"{/if}></div>
Et le tour est joué !
De manière totalement automatique, mon thème Prestashop changera de saison tous les ans, tout seul !
?
Très bonne astuce. Sympa comme idée.