Table des matières - Sommaire
Préambule
Nouvel épisode de la série consacrée à PrestaShop, ou nous verrons comment manipuler et modifier les fichiers dans un thème enfant, afin de personnaliser le thème. Mais nous parlerons également des possibilités que nous avons de coder de nouvelles règles css et également comment intégrer du JavaScript.
Pour coder un exemple concret, je vous montrerai comment afficher une bannière à nos utilisateurs sur la page d’accueil de notre boutique PrestaShop. Imaginons que nous ayons des promotions en cours, et que nous souhaitons afficher un compte à rebours jusqu’à la fin de ces promos. Et bien, nous le ferons en modifiant le code des fichiers depuis le thème enfant. Puis nous finirons sur la modification de la page produit, avec un autre exemple.
Bannière avec compte à rebours sur page d'accueil : Exemple 1
Animation sur la page produit : Exemple 2
Le choix pour suivre ce tutoriel
Comme toujours sur le blog Activateur Web, vous le savez, vous avez le choix entre suivre ce tutoriel par le biais du tutoriel vidéo, ou vous pouvez également suivre ce tutoriel à lire où je vous guide pas à pas dans la mise en place des différentes étapes.
A vous de voir, mais vous êtes libres de faire les 2 à la fois, bien entendu.
Bon visionnage ou bonne lecture.
Tutoriel Vidéo : Série PrestaShop Épisode 3
PrestaShop : Les atouts des modifications depuis le thème enfant
Vous le verrez, modifier son thème PrestaShop depuis le thème enfant vous permettra de personnaliser votre boutique, sans modifier les fichiers du thème parent. Mais le plus gros atout, est que lorsque vous ferez votre prochaine mise à jour de votre version de PrestaShop, vos modifications ne seront pas perdues, et votre thème personnalisé sera toujours actif.
Et si vous travaillez avec PrestaShop, vous verrez que les raisons de faire évoluer sa version vers les dernières versions sont parfois nombreuses.
Avertissements :
Développement sur serveur local
- Comme toujours lorsqu’on développe sur PrestaShop, je vous conseille vivement de travailler depuis une version “locale” de votre boutique. Si vous n’avez pas encore mis de serveur local en place, contenant une version de votre boutique, n’hésitez pas à suivre l’épisode 1 de cette série consacrée à PrestaShop, ou je vous explique pas à pas comment procéder. J’insiste sur le fait que toutes les modifications devraient être faites en local, suivi des tests nécessaires, avant la mise en production. Si malgré cet avertissement, vous modifiez directement votre boutique en production, soyez très prudent lors des modifications, et mettez votre site en maintenance pendant la réalisation de ces changements à minima.
Personnalisation et modifications avec un thème enfant
2. Autre point à aborder, dont je vous ai déjà touché quelques mots précédemment, est le fait de modifier le code des fichiers dans un thème enfant. De manière générale, lorsque nous modifierons du code dans les fichiers de notre boutique PrestaShop, nous ferons toujours en sorte de ne pas toucher au cœur de PrestaShop. Concernant le thème, il est primordial de mettre en place un thème enfant, et là encore, je vous encourage vivement à le faire. Si ce n’est pas encore fait, vous pouvez suivre l’épisode 2 de cette série, ou je vous explique comment créer et mettre en place un thème enfant.
Attention lors de modifications dans le thème parent
Pour ceux qui ne veulent pas mettre en place de thème enfant, vous pouvez bien entendu faire les modifications du code qui suivra dans ce tutoriel, directement sur les fichiers du thème parent. Mais sachez, qu’à la première mise à jour de votre version de PrestaShop, vous devrez recommencer tout le travail car tout sera perdu. Ce qui ne sera pas le cas, si vous mettez en place un thème enfant. Mais c’est à vous de voir.
Faire évoluer son code
3. Le dernier point que je souhaite évoquer, est que pour ce tutoriel, nous allons mettre en place du code qui permettra d’afficher des éléments sur nos pages. Le but de ce tutoriel et de ce code est de vous expliquer comment nous pouvons personnaliser notre boutique simplement, et surtout comment se servir de son thème enfant. Dans le cadre du premier exemple, et la mise en place d’un compte à rebours sur la page d’accueil, sachez qu’il serait beaucoup plus judicieux de faire cela depuis la mise en place d’un module. En effet, dans cet exemple, nous allons configurer le compte à rebours directement dans le code, c’est à dire coder en dur. Avec un module, on aurait une page de configuration du compte à rebours depuis notre tableau de bord. On pourrait aussi l’activer et le désactiver à notre guise, ce qui ne sera pas le cas dans cet exemple.
Apprendre pas à pas
Mais la réalisation de module est un sujet plus complexe, que j’aborderai dans un futur tutoriel de cette série. Prenons les étapes les unes après les autres pour avancer sereinement dans le développement avec PrestaShop.
Prérequis
Pour suivre ce tutoriel, vous aurez besoin :
- Accéder au tableau de bord et à votre boutique en ligne PrestaShop (en local de préférences).
- Un éditeur de code. Pour ma part, j’utilise VsCode.
- Ouvrir le dossier de votre boutique dans l’éditeur de code.
Pour ceux qui n’ont pas encore d’éditeur de code, vous pouvez suivre le tutoriel sur l’installation de VsCode. Cet éditeur est gratuit et convient parfaitement aux développeurs. Tout autre éditeur de code fera l’affaire sans problème.
Mon éditeur de code est configuré avec l’enregistrement automatique activé. Je vous conseille d’en faire autant, ou sinon pensez à enregistrer votre travail. Enregistrez au fur et à mesure que le projet avance, et à chaque modification. Ceci afin de voir les changements en direct dans le navigateur.
Versions PrestaShop
Ce tutoriel est réalisé sur la version 8.1.1 de PrestaShop, mais il peut être exécuté sur les versions antérieures (1.7.x.x par exemple).
Ceci étant dit, nous pouvons maintenant commencer ce tutoriel consacré aux modifications du thème PrestaShop depuis un thème enfant.
Réglages PrestaShop et outils du navigateur.
Afin que nos changements soient pris en compte rapidement, et ne pas vider le cache en permanence, configurons PrestaShop. Je vous montre la configuration que j’ai dans ma version locale de ma boutique PrestaShop, ainsi que le réglage du cache du navigateur.
Si malgré ces réglages, lors de modifications, votre bannière ne change pas d’apparence, il se peut que vous soyez obligé de vider le cache. Pour ça, depuis le tableau de bord de votre boutique PrestaShop :
- vous allez dans l’onglet “Paramètres avancés”, puis dans “Performances’, et en haut à droite, cliquez sur le bouton “Vider le cache”.
- Attendez de recevoir la notification comme quoi votre cache a été vidé, avant de poursuivre.
Attention comme évoqué plus haut, assurez vous que votre code est bien enregistré automatiquement, ou sinon que vous avez bien enregistré le fichier dans lequel vous avez modifié le code. Assurez vous également de bien actualiser la page du navigateur après chaque changement.
Dans PrestaShop
Paramètres avancés - Performances
Smarty
Ici, nous réglerons le moteur de templates Smarty, pour :
Compilation des templates = Forcer la compilation à chaque appel.
Cache = Non
Mode Debug – Option facultative :
Réglage du Mode debug sur Oui. Ce réglage permet d’afficher la barre de debug dans le bas de notre tableau de bord. On dit qu’on passe en mode développeur. Elle peut être très utile lorsque vous développez, car elle affichera les erreurs, mais vous pouvez également voir un tas de choses comme par exemple, quel contrôleur est appelé, quelle fonction, quelle page, les variables, etc.
Pour ce tutoriel, nous ne nous en servirons pas, mais chez moi, il est activé en permanence sur mes boutiques en local.
Paramètres de la boutique - Trafic et SEO - SEO et URL
Configuration des URLs
Afin de pouvoir utiliser des images et leur chemin relatif, nous allons configurer les URLs pour le développement :
URL simplifiée => Non
Rediriger vers l’URL canonique => Aucune redirection
A modifier lors de la mise en production
ATTENTION de bien penser à modifier ces paramètres si vous mettez votre boutique en production. Les URLs simplifiées seront alors réglées sur “Oui” et la redirection sera sur “301”. Concernant les performances, la compilation des templates sera mise sur “Ne jamais recompiler les fichiers de templates” et le cache sera réglé sur “Oui”.
Dans les outils de navigateur
Dans le navigateur, je vous conseille d’ouvrir les outils de navigateur. Placez-vous sur la page d’accueil de votre boutique et tapez sur la touche F12 de votre clavier. Vous pouvez également les ouvrir en faisant un clic droit puis sélectionner “Inspecter”.
Une fois les outils ouverts, rendez vous dans l’onglet “Réseau” puis cochez la case à cocher “Désactiver le cache”.
Exemple 1 - Modification de la page d’accueil depuis le thème enfant.
Connaître le template à modifier
Tout d’abord, sachez que lorsqu’on parle de template, cela équivaut à parler d’un modèle, c’est à dire dans notre cas, une mise en page. Dans PrestaShop les templates sont codés dans des fichiers ayant l’extension .tpl et plus récemment avec l’intégration de Symfony dans PrestaShop, des fichiers ayant l’extension . html.twig. Pour tout ce qui concerne le frontend (partie visible par vos visiteurs), ce sont en général des fichiers .tpl.
Pour notre 1er exemple, nous avons besoin de modifier la page d’accueil. Comment savoir quel template est utilisé pour la page d’accueil ? Nous avons en fait plusieurs possibilités.
Avec les outils de navigateur :
La plus rapide peut être est de nous servir de nos outils de navigateur. Lorsque je vais dans l’onglet “éléments” de ces outils, je peux regarder la première ligne qui indique pour la page d’accueil : <! – begin index.tpl – >, et je peux également regarder l’id et les classes (css) attribuées au body de la page. Si je regarde donc ces classes, j’ai ces informations :
class = “lang-fr country-fr currency-eur layout-full-width page-index tax-display-enabled”
Ici, 2 de ces classes sont intéressantes : layout-full-width et page-index.
La première m’indique que nous utilisons le template layout-full-width.tpl , et la seconde que nous sommes sur la page nommée index.
Sur le tableau de bord PrestaShop :
Une autre manière de savoir quel template est utilisé est de rendre sur le tableau de bord de sa boutique, dans l’onglet “Apparence”, puis sur “Thèmes et logo”, et en bas à droite, cliquez sur le bouton “Choisir la mise en page”.
Ensuite, nous devons regarder quel layout (mise en page) est appliqué à notre page d’accueil, qui est nommée index. Nous pouvons voir que le template utilisé pour cette page index, est le layout-full-width.tpl.
Maintenant que nous connaissons le fichier utilisé, nous pouvons l’ouvrir dans l’éditeur de code.
Ouvrir le fichier layout-full-width.tpl
Pour commencer, nous allons ouvrir le fichier layout-full-width du thème parent, c’est-à-dire par défaut le thème “classic”.
Dans l’éditeur de code, je vais dans le dossier contenant tous les dossiers et fichiers de ma boutique.
A la suite de quoi, je vais dans le dossier “thèmes”, puis dans le dossier “classic”, puis dans le dossier “templates”, et enfin dans le dossier “layouts”, où se trouve mon fichier layout-full-width.tpl, que je peux ouvrir.
Après l’ouverture de ce fichier layout-full-width.tpl, on peut voir que la première ligne de code correspond à étendre ce fichier depuis le fichier nommé layout-both-columns.tpl.
Cela signifie que tout le code qui se trouve dans ce fichier layout-both-columns.tpl sera exécuté et ensuite les balises ”blocks” qui sont codés en dessous seront modifiées selon le code qui se trouve à l’intérieur ou non.
Tous les layouts s’étendent depuis le layout-both-columns.tpl
En étant curieux, vous pouvez regarder les autres fichiers de ce dossier “layouts”, et vous vous apercevrez que tous les fichiers des layouts étendent ce fichier layout-both-columns.tpl.
Analyse des layouts
Lorsqu’on analyse ceci, on peut dire que le layout-both-columns.tpl sert de gabarit, et qu’ensuite les différentes mises en page sont faites en modifiant le code contenu dans les balises “blocks”. Si on reprend notre layout-full-width.tpl, on peut voir que les 2 blocks nommés “left-column” et “right-column”, sont vides. En effet, vu que lorsque nous utilisons la disposition full-width, nous disons que nous mettons la mise en page en pleine largeur, et donc aucune colonne. On prend le code du layout-both-columns.tpl, mais on dit que le code et notamment les hooks présents dans les blocks “left-column” et “right-column” du fichier layout-both-columns.tpl, ne s’exécutent pas, lorsqu’on fait appel au layout-full-width.tpl, puisqu’on les définit vides dans ce fichier.
Modification du layout-both-columns.tpl
Vous serez donc d’accord avec moi, qu’il est alors peut être plus judicieux pour notre exemple, de modifier directement le fichier layout-both-columns.tpl. Comme cela, peu importe la mise en page, nous pourrons utiliser le code.
Souvent, pour modifier une partie de la mise en page, nous recherchons où se situe, et le nom de la balise à modifier et nous ajouterons du code à l’intérieur de celle-ci.
Lorsque je dis qu’il serait plus judicieux de modifier le fichier layout-both-columns.tpl, je veux bien entendu parler du layout-both-columns.tpl qui se trouve dans notre thème enfant. Si vous rappelez, nous ne toucherons jamais aux fichiers du coeur de PrestaShop.
Le problème est que ce fichier n’existe pas encore dans notre thème enfant !
Création de la structure des dossiers et du fichier layout-both-columns.tpl dans le thème enfant .
Pour modifier un fichier à partir de notre thème enfant, la méthode sera toujours la même :
- Recréer la même structure de dossier que dans le thème parent.
- Créer le fichier avec le même nom que celui présent dans le thème parent.
- Étendre le fichier du thème parent à l’intérieur du fichier “enfant”.
- Modifier une balise “block” existante, ou en créer une nouvelle.
Construction de la structure et du fichier :
Lorsque je regarde la structure des dossiers de mon fichier layout-both-columns.tpl, je vois qu’il se trouve dans le thème “classic”, puis un dossier “templates”, puis dans un dossier “layouts”.
En premier lieu, je me rends donc dans le dossier de mon thème enfant, qui se nomme classic_child pour ma part. Ensuite, je dois donc créer le dossier “templates” à l’intérieur, et à l’intérieur de celui-ci, un nouveau dossier “layouts”. Enfin à l’intérieur du dossier “layouts”, je créai un nouveau fichier que je nomme layout-both-columns.tpl.
Étendre le fichier du thème parent
Pour commencer, nous devons étendre le fichier du thème parent dans le fichier du thème enfant. Ceci afin d’éviter de recopier tout le code, et de seulement modifier la balise block qui nous convient, tout en assurant que le code du fichier “parent” s’exécute. .
Pour étendre le fichier layout-both-columns.tpl du thème parent, on code ceci :
{extends file='parent:layouts/layout-both-columns.tpl'}
Notez l’utilisation du mot-clé parent: pour étendre notre fichier parent. Ici, nous disons que nous faisons une extension du même modèle.
Vous rencontrerez ou utiliserez ce même code sans le mot-clé parent: lorsque vous souhaitez redéfinir le modèle de la page.
Modifier ou ajouter un bloc
Dans notre exemple, je n’ai pas trouvé de balise block permettant d’afficher la bannière de compte à rebours que nous allons créer, uniquement sur la page d’accueil. En effet, la plupart des pages de notre site utilisent la mise en page full-width.
Ici, je vais donc devoir étendre le template index.tpl (correspondant à la page d’accueil), et je vais ensuite créer une balise à l’intérieur de ce fichier index.tpl du thème enfant.
Création du fichier index.tpl, extension du fichier parent et création d’un bloc.
Premièrement, comme ce fichier index.tpl se trouve à la racine du dossier “templates” de mon thème parent, je n’ai pas besoin de recréer une structure de dossier puisque notre dossier “templates” est déjà créé dans notre thème enfant. En conséquence, nous allons donc simplement créer le fichier index.tpl dans le dossier “templates” de notre thème enfant “classic_child”. Pour poursuivre, nous allons étendre le fichier index.tpl du parent, et modifions la balise block nommée “page_content”. Je copie donc la totalité de ce bloc, depuis le fichier parent, et le colle dans le fichier du thème enfant. Enfin, à l’intérieur, après l’ouverture de cette balise block, je créerai une nouvelle balise block que je vais nommer “counter” par exemple.
Code :
{extends file='parent:index.tpl'}
{block name='page_content'}
{*! Activateur Web - Tutoriel #17 - ajout du bloc de compte à rebours *}
{block name='counter'}{/block}
{*! Fin d'ajout du code *}
{block name='hook_home'}
{$HOOK_HOME nofilter}
{/block}
{/block}
Pour finir, nous pouvons fermer ce fichier index.tpl, dans lequel nous ne ferons plus de modifications.
Conception du block “counter” dans le layout-both-columns.tpl du thème enfant.
Maintenant dans notre thème enfant, nous pouvons coder cette balise block ‘counter’ dans le fichier layout-both-columns de notre thème enfant.
Voici le code que nous ajoutons :
Code :
{block name="counter"}
<div id="countdown">
<div class="counter" id="counter">
<p>Les Promos sur tout le site sont encore valables pendant : </p>
</pre>
<span>
<font size="3">
<font face="arial">
<font color="#9bfc88">
<div align="center">
<center>
<script language="JavaScript">
TargetDate = "09/17/2023 02:05 PM";
BackColor = false;
ForeColor = false;
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = " %%D%% jours %%H%% heures %%M%% minutes %%S%% secondes ";
FinishMessage = "C'est fini ! 🤧 Mais bientôt de retour ! 😉";
</script>
<script language="JavaScript" src="themes/classic_child/assets/js/countdown.js"></script>
</center>
</div>
</span>
<pre>
</div>
</div>
{/block}
Ici, comme je vous l’ai annoncé en début de tutoriel, nous codons la bannière et le compte à rebours en dur. C’est pourquoi, nous devons donc configurer la date à laquelle nous voulons que le compte à rebours se termine, en mettant à jour la valeur de la variable “TargetDate” à l’intérieur du script. (TargetDate => Date cible en français). Soyez Attentif, l’heure doit être configurée avec les attributs “PM” pour le soir (entre midi et minuit) ou “AM” pour le matin (entre minuit et midi).
La date correspond au format : Mois/Jour/Année.
Dans le code ci-dessus, j’ai donc configuré ma date pour le 17 septembre 2023 à 14 h 05.
Les configurations possibles concernent la taille de la police, la police d’écriture utilisée ainsi que sa couleur en changeant les valeurs des balises “font”, et également l’alignement du compte à rebours dans la div en modifiant la valeur de “align”. Cela changera les paramètres par défaut, mais nous verrons que nous utiliserons plutôt le code CSS pour cela.
Insertion de JavaScript dans un thème enfant
Ajout du script countdown.js
Vous l’avez certainement remarqué, mais dans le code, nous faisons appel au script countdown.js. Nous indiquons la source du script avec son chemin relatif :
<script type="text/plain" data-service="youtube" data-category="marketing" language="JavaScript" src="themes/classic_child/assets/js/countdown.js">
Bien entendu, nous devons créer cette structure et ce fichier.
Vous pouvez donc depuis un thème enfant ajouter du code JavaScript. Lorsque nous créons de petites fonctions JavaScript, réutilisables à divers endroits de notre site, la plupart du temps, nous pourrons les coder dans un fichier que nous nommerons custom.js. Ce fichier se place dans un dossier nommé “js“ à l’intérieur du dossier “assets” de votre thème enfant.
Ici, dans notre exemple, le code étant uniquement réservé à notre compte à rebours, j’ai décidé de le mettre dans un fichier à part, mais toujours placé dans le dossier “js” du thème enfant. Commençons donc par créer ce dossier “js” à l’intérieur du dossier “assets” du thème enfant. A la suite, dans ce dossier “js“, créons un fichier nommé custom.js, qui restera vide pour le moment. Ajoutons également un fichier nommé countdown.js, ou nous écrirons le code du compte à rebours.
Code :
function calcage(secs,num1,num2){
s=((Math.floor(secs/num1))%num2).toString();
if(LeadingZero&&s.length<2)
s="0"+s;return "<b>"+s+"</b>";
}
function CountBack(secs){
if(secs<0){
// TODO On affiche le message paramètré dans la variable FinishMessage
document.getElementById("cntdwn").innerHTML=FinishMessage;
//TODO Autre possibilité : ne plus rien afficher -commenter la ligne précédente & décommenter les 3 lignes suivantes
// document.getElementById("countdown").classList.add("hideCounter");
// document.getElementsByClassName("blue_bckgrnd").classList.add("hideCounter");
// document.getElementsByClassName("yellow_bckgrnd").classList.add("hideCounter");
return;
}
DisplayStr=DisplayFormat.replace(/%%D%%/g,calcage(secs,86400,100000));
DisplayStr=DisplayStr.replace(/%%H%%/g,calcage(secs,3600,24));
DisplayStr=DisplayStr.replace(/%%M%%/g,calcage(secs,60,60));
DisplayStr=DisplayStr.replace(/%%S%%/g,calcage(secs,1,60));
document.getElementById("cntdwn").innerHTML=DisplayStr;
if(CountActive)
setTimeout("CountBack("+(secs+CountStepper)+")",SetTimeOutPeriod);
}
function putspan(backcolor,forecolor){
document.write("<span id='cntdwn' style='background-color:"+backcolor+"; color:"+forecolor+"'></span>");
}
if(typeof(BackColor)=="undefined")
BackColor="white";
if(typeof(ForeColor)=="undefined")
ForeColor="black";
if(typeof(TargetDate)=="undefined")
TargetDate="12/31/2020 5:00 AM";
if(typeof(DisplayFormat)=="undefined")
DisplayFormat="%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if(typeof(CountActive)=="undefined")
CountActive=true;
if(typeof(FinishMessage)=="undefined")
FinishMessage="";
if(typeof(CountStepper)!="number")
CountStepper=-1;
if(typeof(LeadingZero)=="undefined")
LeadingZero=true;
CountStepper=Math.ceil(CountStepper);
if(CountStepper==0)
CountActive=false;
var SetTimeOutPeriod=(Math.abs(CountStepper)-1)*1000+990;
putspan(BackColor,ForeColor);
var dthen=new Date(TargetDate);
var dnow=new Date();
if(CountStepper>0)
ddiff=new Date(dnow-dthen);
else
ddiff=new Date(dthen-dnow);
gsecs=Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
Pour le moment notre bannière s’affiche bien mais n’a pas encore été stylisée .
Modifier le style depuis un thème enfant :
Afin de modifier le style de notre bannière, nous devons écrire du code CSS.
Et comme toujours, pour modifier le style de tous les éléments présents sur nos pages, et ce, quels qu’ils soient, nous pouvons le faire depuis notre fichier custom.css, qui se trouve dans le dossier “css”, lui même se trouvant dans le dossier “assets” du thème enfant.
Pour rappel, ce fichier custom.css est obligatoire dans un thème enfant, et vous ne devez pas le supprimer, même si aucun code n’est à l’intérieur.
Concernant notre bannière, nous pouvons coder dans ce fichier afin de mettre en style notre bannière.
A vous de jouer !
Votre bannière devra s’intégrer à votre boutique en ligne. J’ai bien entendu coder le style css, mais c’est à vous de jouer, et de styliser selon vos goûts et selon la charte graphique de votre boutique si vous en possédez une, ce qui devrait être le cas.. ? Si vous ne connaissez pas le code css et les règles qui peuvent être mises en place, je vous conseille de suivre le tutoriel consacré à la série sur CSS, que vous trouverez sur le blog.
Bref, c’est à vous de voir. Sinon vous pouvez recopier le code que je vous donne dans ce tutoriel. 😉
J’ai donc coder l’ensemble des règles CSS suivant :
Code
/*; Clignotement du texte */
@keyframes clignoter {
0% { opacity:1; }
40% {opacity:0; }
100% { opacity:1; }
}
/* ! Compte à rebours promos */
/* Div container principale */
.hideCounter {
display: none;
}
#countdown {
padding: 1rem 0 0 0;
margin: 0 2rem 1rem 2rem;
border : 4px outset red;
box-shadow: 2px 2px 5px #060606, -5px -5px 10px #5f5f5f;
border-radius: 1rem;
}
/* Couleur 1 du background #countdown */
.blue_bckgrnd {
background-color: #63e1fd;
}
/* Couleur 2 du background #countdown */
.yellow_bckgrnd {
background-color: #4afa73;
}
/* Div contenant le texte et le compte à rebours */
#counter {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 1rem 0 0 0;
margin: 1rem;
}
/* Compte à rebours */
#cntdwn {
color: blue !important;
background-color: #faf563;
border-radius: 1rem;
border: 4px ridge black;
box-shadow: -2px -2px 5px #060606, 5px 5px 10px #5f5f5f;
}
/* Chiffres et textes du compte à rebours */
.counter span {
font-size: 2rem;
padding: .5rem;
margin-top: 1rem;
}
/* Paragraphe Texte au dessus du compte à rebours */
.counter p {
animation-duration: 2s;
animation-name: clignoter;
animation-iteration-count: infinite;
transition: none;
color : red;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
/***
* Responsive - format mobile et tablette
*/
@media screen and (max-width:480px) {
#countdown {
margin: 1rem 0;
}
#counter {
margin: 0;
}
.counter span {
font-size: .9rem;
padding: .2rem;
}
.counter p {
font-size: 1.5rem;
text-align: center;
}
}
Explications du code
Premièrement, vous le voyez, ce code commence par une keyframe (image clé) nommée “clignoter”. Pour ceux qui ne connaissent pas le CSS, cela nous sert à faire clignoter le texte situé dans la bannière. Dan un premier temps, on déclare qu’à 0 %, l’opacité du texte est à 1, autrement dit il n’y a pas de transparence sur la couleur du texte. Deuxièmement, à 40%, nous mettons la valeur de l’opacité à 0, et cette fois notre texte est transparent. Pour finir, à 100 %, nous revenons à une valeur de 1.
Propriétés CSS des keyframes
En conséquence de quoi, j’appelle cette keyframe “clignoter” dans le paragraphe de l’élément ayant pour classe “counter” => avec .counter p {…}.
Ensuite, à l’intérieur de cette règle CSS, j’appelle l’animation, à laquelle je donne :
- une durée (animation-duration : 2s),
- le nom de l’animation (animation-name : clignoter ;),
- le nombre de fois qu’elle sera appelée (animation-iteration-count: infinite;).
Cette règle pourrait être condensée mais j’ai préféré coder ainsi pour ceux qui ne connaissent pas beaucoup le CSS, et de façon à être aussi clair que possible.
Voici ce que ça rend après la mise en style et le code écrit dans le custom.css :
Du CSS et du JavaScript depuis le thème enfant
Vous pouvez voir également une règle sur la classe .blue_bckgrnd et une autre sur la classe .yelllow_bckgrnd . Celles ci vont nous servir à modifier la couleur de fond de notre bannière en la faisant alterner entre le bleu et le vert. J’aurai pu là aussi coder une keyframe et faire cela en pur CSS. Mais pour s’amuser et varier un peu, nous créerons plutôt une fonction JavaScript qui fera changer la couleur alternativement.
Comme cela concerne la bannière de compte à rebours, je vais coder les fonctions dans le fichier countdown.js, mais nous pourrions le faire également dans le custom.js.
Par souci d’organisation, je pense qu’il est mieux de trouver le code de cette bannière, au même endroit. Ainsi si nous revenons dessus dans 6 mois (voir moins) , nous n’aurons pas à chercher où le code se trouve.
Ajout des fonctions dans le fichier countdown.js
Voici le code, à ajouter à la suite du code de notre fichier countdown.js, pour changer la couleur de notre fond de bannière à intervalles réguliers :
// ! Change background color at interval
// variable pour stocker notre intervalID
let intervalID;
function changeColor() {
// Vérification si un interval a déjà été initialisé
if (!intervalID) {
intervalID = setInterval(flashBackground, 2000);
}
}
function flashBackground() {
const oElem = document.getElementById("countdown");
oElem.className = oElem.className === "blue_bckgrnd" ? "yellow_bckgrnd" : "blue_bckgrnd";
}
changeColor();
Que fait-on dans ce code ?
- En premier, on initialise une variable intervalID
- Ensuite, on créé une fonction changeColor().
- Ajout d’une condition if pour vérifier si l’intervalID n’existe pas déjà.
- Si elle n’existe pas, alors on lui donne comme valeur la fonction setInterval auquelle on passe en paramètre la fonction flashBackground, et 2000 ms, soit 2 secondes.
- On crée ensuite la fonction flashBackground().
- Puis, on définit la constante oElem qui cible notre élément ayant l’ID “countdown” (autrement dit la div principale de la bannière).
- Pour condenser le code, on utilise une condition ternaire pour dire qu’on attribue, à notre élément ciblé (la div #countdown), la classe “blue_bckgrnd” par défaut. Puis, nous disons que si cette classe est active (?), on lui donnera alors la classe “yellow bckgrnd”. Sinon (:) (autrement dit si elle n’a pas la classe blue_bckgrnd, et donc elle aura la classe yellow bckgrnd), on lui attribuera la classe blue_bckgrnd.
- Enfin pour que cela fonctionne, on doit appeler notre fonction changeColor().
Résultat du code des fonctions :
Et voilà maintenant que le fond de notre bannière change de couleur toutes les 2 secondes :
Et 2 secondes après…
Nous avons maintenant notre bannière qui s’affiche en changeant de couleur de fond toutes les 2 secondes et notre texte qui clignote pour attirer l’attention de nos utilisateurs.
Nous avons également notre compte à rebours qui s’égrène seconde par seconde..
Plutôt pas mal non ?
Fin du compte à rebours
Lorsque le compte à rebours se termine, selon la configuration par défaut, vous afficherez un message. Vous pouvez bien entendu modifier le texte par défaut, en changeant la valeur de la variable FinishMessage dans le script que nous avons mis dans le fichier layout-both-columns.tpl. Sinon par défaut, voilà ce qui s’affichera :
Évidemment, je vous l’ai dit nous avons codé en dur, et du coup lorsque les promos seront terminées, cela nécessitera de revenir dans notre fichier layout-both-columns.tpl, et mettre notre code en commentaires, jusqu’ à la prochaine fois où nous voudrons mettre en place des promotions.
Alternative - Cacher la bannière
L’alternative est de cacher notre bannière lorsque le compte à rebours arrive à 00.
Pour faire cela, je vous ai mis 3 lignes en commentaires dans la condition “ if(secs<0) “ de la fonction CountBack(secs) présente dans notre code du fichier countdown.js.
Vous mettrez donc en commentaire la première ligne de cette condition et enlèverez celles que j’ai mis en commentaires :
Et maintenant voilà ce que ça donne :
Notre bannière n’apparaît plus. Si nous modifions de nouveau la date du compte à rebours, celui-ci s’affiche de nouveau bien entendu.
Nous avons donc cette possibilité qui si vous avez comme moi, peu de mémoire, et que vous ne souhaitez pas que vos utilisateurs voient un message qui leur dit que les promotions sont finies, et ce tant que vous n’aurez pas mis le code de la bannière en commentaires.
Cette solution s’appuie sur la règle CSS .hideCounter, puisque ce que j’ai codé dans les 3 lignes que je vous ai fait décommenté, signifie que si le compte à rebours est à 0, nous ajoutons à chaque élément la classe .hideCounter. Cette classe a pour propriété et valeur de règle CSS, display: none; Ou en français : Affichage : Aucun.
Faites donc attention à ne pas supprimer ou modifier cette règle CSS ou cette classe.
Exemple 2 - Modification de la page produit depuis le thème enfant
Pour ce deuxième exemple, nous allons modifier la page de présentation des produits.
Nous verrons, comment mettre en place , par exemple, une animation d’image. Concrètement, vous pourrez mettre en place tout ce que vous souhaitez. Le but de ce tutoriel, encore une fois, étant de voir comment modifier nos templates depuis le thème enfant.
Nous ferons en sorte dans cet exemple que la bordure clignote et nous verrons comment animer l’image du camion qui se déplacera de gauche à droite.
Recherche du template à modifier
La première chose, si vous vous rappelez, est de connaître quel template nous devons modifier.
Pour cela, j’ouvre les outils du navigateur sur la page produit. Ensuite, je regarde la première ligne située dans l’onglet “Éléments” qui m’indique <! – begin catalog/product.tpl – > et je vois également, l’id et les classes définies sur la balise <body>. On retrouve la classe layout-full-width, qui informe que nous sommes sur une mise en page utilisant la pleine largeur, puis nous avons une classe page-product.
Nous pouvons donc nous rendre dans le thème parent “classic” et chercher le template product.tpl dans le dossier catalog.
Ouverture du product.tpl et chercher la balise block à modifier
Lorsque je suis sur la page produit, j’aimerai insérer mon texte et mon image après le bouton “Ajouter au panier” et avant les icônes de partage sur les réseaux sociaux.
Dans mon fichier product.tpl du thème parent qui se trouve dans “themes/classic/catalog/” , je peux voir qu’après la balise block nommée “add-to-cart” ou en français “Ajouter au panier”, j’ai une autre balise block nommé “product-additional-info”.
Cela semble donc être la balise où nous pourrions mettre notre code.
Création de la structure des dossiers et du fichier product.tpl dans le thème enfant.
Comme nous l’avons fait dans le premier exemple, nous devons recréer la même structure de dossiers dans le thème enfant que celle existante dans le thème parent.
Nous allons donc dans le dossier “templates” du thème enfant, puisque nous l’avions déjà créé dans le 1er exemple, et nous ajoutons un dossier “catalog”, et ensuite à l’intérieur de celui-ci, nous créons notre fichier “product.tpl”.
En premier lieu, pour débuter le code à l’intérieur de ce nouveau fichier, nous devons étendre le fichier parent, avec :
{extends file='parent:catalog/product.tpl'}
Nous avons vu ensuite que nous devions modifier la balise block “product-additional-info”. Copions donc cette balise et le code situé à l’intérieur depuis le product.tpl du thème parent, et collons le à l’intérieur de notre product.tpl du thème enfant.
Ajout du code dans le “block”
Cela étant, je vais coder les éléments que l’on souhaite afficher sous notre bouton “Ajouter au panier”, et comme nous voulons que les éléments s’affichent au dessus de nos boutons de réseaux sociaux, nous allons donc coder au dessus du code déjà présent dans la balise “block”.
Voici ce que je code pour l’exemple :
<div class="infotextcarrier">
<h4><span>Frais de port offert jusqu'à fin de semaine</span></h4>
<p class="infotextcarrierimg">
<img decoding="async" src="themes/classic_child/assets/img/camion-v2-AW.png" />
</p>
</div>
Et dans le fichier product.tpl, ça donne ça :
Intégration de l’image
Vous le voyez, dans ce code, nous avons une image, et sa source est le lien relatif de cette image.
Pour intégrer cette image, nous allons créer un nouveau dossier nommé “img”, à l’intérieur du dossier “assets” du thème enfant.
Maintenant, libre à vous de copier l’image que je vous donne, ou d’en créer une nouvelle, et lui donner le nom que vous souhaitez. Si vous la nommez différemment, n’oubliez pas , bien entendu, de modifier le nom dans le chemin que nous avons mis dans l’attribut “src” de l’image.
Si vous prenez l’image suivante attention de bien la nommer camion-v2-AW. Ou sinon là encore ne pas oublier de changer le nom, dans le chemin suivant le nom que vous lui avez donné.
Voici cette image :
Et la structure du dossier “img” dans lequel on met l’image.
Maintenant que tout est en place actualisons notre page produit :
Notre texte et notre image sont bien affichés et à l’endroit où nous le souhaitons.
Parfait ! Reste à mettre un peu de style n’est ce pas ?
Si l’image ne s’affiche pas, pensez à vérifier le chemin et de n’avoir aucune faute dans le nom de votre image. Toutefois, si vous êtes sûr que le chemin est bon, assurez vous, si vous êtes sur un serveur local, comme indiqué en début de tutoriel, que la configuration des URLs est bien effectuée (pas d’URL simplifiée et aucune redirection).
Mise en style
Pour notre animation, et mettre un peu plus de style, voici le code css que j’ai codé :
Code :
/* ! Keyframes */
/*; Déplacement vers la droite de l'image */
@keyframes ship {
0% { left: -300px; }
25% {left: -50px;}
50% {left: 100px;}
75% {left: 225px;}
100% {left: 500px;}
}
/* Bordures clignotantes */
@-webkit-keyframes borderBlink {
from, to {
border-color: transparent
}
50% {
border-color: red
}
}
@keyframes borderBlink {
from, to {
border-color: transparent
}
50% {
border-color: red
}
}
/* Texte sur fiche produit */
.infotextcarrier {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
margin-top: 2rem;
text-align: center;
background-color: rgb(36, 185, 215);
padding: .5rem 0;
border: 8px outset red;
border-radius: .5rem;
-webkit-animation: borderBlink 1s step-end infinite;
animation: borderBlink 1s step-end infinite;
}
.infotextcarrier h4 {
display: flex;
justify-content: center;
color: rgb(255, 255, 255);
font-weight: bold;
font-size: 1.4rem;
text-align: center;
}
.infotextcarrierimg {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: end;
overflow-x: hidden;
border-bottom: 2px solid black;
}
.infotextcarrierimg img {
position: relative;
width: 100px;
height: 100px;
animation: ship 5s infinite;
-webkit-animation: ship 5s infinite;
-moz-animation: ship 5s infinite;
}
Explications sur le Code :
Je gère les animations en créant des keyframes, et j’appelle ensuite ces animations dans les classes des éléments que l’on souhaite animer. Nous avons déjà vu cela dans l’exemple précédent. A noter, qu’ici j’utilise la syntaxe condensée pour donner le nom, la durée, et le nombre d’itérations que nous voulons. J’ai également ajouter le web kit pour que cela fonctionne sur plusieurs navigateurs.
Et voilà le résultat :
A vous de jouer !
Bien entendu, c’est encore une fois à vous de jouer, et d’intégrer les éléments que vous souhaitez sur votre site, ainsi que de mettre en style ces éléments.
Conclusion
Ce tutoriel est maintenant terminé. J’espère que cela pourra vous aider dans vos futurs développements avec PrestaShop. N’hésitez pas à me faire savoir si j’ai été assez complet dans mes explications, et si vous avez pu suivre facilement ce tutoriel. Les commentaires sont faits pour cela.
Encore une fois, ce tutoriel permet de voir comment modifier son thème depuis un thème enfant. Les perspectives de personnalisation de votre boutique PrestaShop sont donc nombreuses, comme nous venons de le voir.
Je me répète, mais dans le cas de l’exemple du compte à rebours, si je devais le faire pour un client, je créerais plutôt un module qui serait alors configurable depuis une page de configuration.
Mais cette série sur PrestaShop est loin d’être terminée, car elle commence tout juste !
La création d’un module fera l’objet d’un futur tutoriel… Ou pas ! Cela dépendra de vos encouragements…
Précision sur le : ou pas !
Je dis, ou pas, car c’est assez frustrant de passer de longues heures pour créer ces tutoriels, et de ne pas forcément savoir ce que vous en pensez.
Mes outils analytiques me permettent de voir qu’il y a du trafic sur les articles de blog, ou sur les vidéos, mais je n’ai pas beaucoup de retours de votre part.
J’aimerais beaucoup savoir ce que vous en pensez, et pourquoi pas me dire ce que vous aimeriez avoir comme sujets de tutoriels sur ce blog.
Encouragez moi !
Comme toujours, n’hésitez pas à me dire ce que vous en pensez, en me laissant vos commentaires.
Créer ce tutoriel m’a pris beaucoup de temps. Si en retour vous pouvez prendre quelques secondes ou minutes pour vous inscrire sur Activateur Web, ou vous abonnez à ma page Facebook, Instagram, ou à ma chaine YouTube, ou mieux encore faire tout cela à la fois (😉), vous m’encouragez à continuer de produire du contenu comme celui-ci. Vous m’aiderez également dans mon référencement.
Si vous êtes chef d’entreprise et que vous n’avez pas le temps de modifier votre boutique à votre image, n’hésitez pas à faire appel à mes services. Une idée ? un projet ? Parlons en.
Prochainement...
Je vous donne rendez- vous pour le prochain tutoriel. Et je peux d’ore et déjà vous donner le sujet de ce tutoriel, toujours sur cette série consacrée à PrestaShop :
Nous verrons comment mettre en place un gestionnaire de cookies conforme avec le RGPD.
A très vite donc sur Activateur Web.
En attendant, prenez soin de vous, et surtout restez curieux !
Code Complet des fichiers du thème enfant de ce tutoriel :
index.tpl
{extends file='parent:index.tpl'}
{block name='page_content'}
{*! Activateur Web - Tutoriel #17 - ajout du bloc de compte à rebours *}
{block name='counter'}{/block}
{*! Fin d'ajout du code *}
{block name='hook_home'}
{$HOOK_HOME nofilter}
{/block}
{/block}
layout-both-columns.tpl
{extends file='parent:layouts/layout-both-columns.tpl'}
{block name="counter"}
<div id="countdown">
<div class="counter" id="counter">
<p>Les Promos sur tout le site sont encore valables pendant : </p>
</pre>
<span>
<font size="3"><font face="arial"><font color="#9bfc88">
<div align="center">
<center>
<script language="JavaScript">
TargetDate = "09/17/2023 02:05 PM";
BackColor = false;
ForeColor = false;
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = " %%D%% jours %%H%% heures %%M%% minutes %%S%% secondes ";
FinishMessage = "C'est fini ! 🤧 Mais bientôt de retour ! 😉";
</script>
<script language="JavaScript" src="themes/classic_child/assets/js/countdown.js">
</script>
</center>
</div>
</span>
<pre>
</div>
</div>
{/block}
product.tpl
{* Étendre le modèle parent et définir le bloc à modifier *}
{extends file='parent:catalog/product.tpl'}
{block name='product_additional_info'}
<div class="infotextcarrier">
<h4><span>Frais de port offert jusqu'à fin de semaine</span></h4>
<p class="infotextcarrierimg">
<img decoding="async" src="themes/classic_child/assets/img/camion-v2-AW.png" />
</p>
</div>
{include file='catalog/_partials/product-additional-info.tpl'}
{/block}
countdown.js
function calcage(secs,num1,num2){
s=((Math.floor(secs/num1))%num2).toString();
if(LeadingZero&&s.length<2)
s="0"+s;return "<b>"+s+"</b>";
}
function CountBack(secs){
if(secs<0){
// TODO On affiche le message paramètré dans la variable FinishMessage
document.getElementById("cntdwn").innerHTML=FinishMessage;
//TODO Autre possibilité : ne plus rien afficher -commenter la ligne précédente & décommenter les 3 lignes suivantes
// document.getElementById("countdown").classList.add("hideCounter");
// document.getElementsByClassName("blue_bckgrnd").classList.add("hideCounter");
// document.getElementsByClassName("yellow_bckgrnd").classList.add("hideCounter");
return;
}
DisplayStr=DisplayFormat.replace(/%%D%%/g,calcage(secs,86400,100000));
DisplayStr=DisplayStr.replace(/%%H%%/g,calcage(secs,3600,24));
DisplayStr=DisplayStr.replace(/%%M%%/g,calcage(secs,60,60));
DisplayStr=DisplayStr.replace(/%%S%%/g,calcage(secs,1,60));
document.getElementById("cntdwn").innerHTML=DisplayStr;
if(CountActive)
setTimeout("CountBack("+(secs+CountStepper)+")",SetTimeOutPeriod);
}
function putspan(backcolor,forecolor){
document.write("<span id='cntdwn' style='background-color:"+backcolor+"; color:"+forecolor+"'></span>");
}
if(typeof(BackColor)=="undefined")
BackColor="white";
if(typeof(ForeColor)=="undefined")
ForeColor="black";
if(typeof(TargetDate)=="undefined")
TargetDate="12/31/2020 5:00 AM";
if(typeof(DisplayFormat)=="undefined")
DisplayFormat="%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
if(typeof(CountActive)=="undefined")
CountActive=true;
if(typeof(FinishMessage)=="undefined")
FinishMessage="";
if(typeof(CountStepper)!="number")
CountStepper=-1;
if(typeof(LeadingZero)=="undefined")
LeadingZero=true;
CountStepper=Math.ceil(CountStepper);
if(CountStepper==0)
CountActive=false;
var SetTimeOutPeriod=(Math.abs(CountStepper)-1)*1000+990;
putspan(BackColor,ForeColor);
var dthen=new Date(TargetDate);
var dnow=new Date();
if(CountStepper>0)
ddiff=new Date(dnow-dthen);
else
ddiff=new Date(dthen-dnow);
gsecs=Math.floor(ddiff.valueOf()/1000);
CountBack(gsecs);
// ! Change background color at interval
// variable pour stocker notre intervalID
let intervalID;
function changeColor() {
// Vérification si un interval a déjà été initialisé
if (!intervalID) {
intervalID = setInterval(flashBackground, 2000);
}
}
function flashBackground() {
const oElem = document.getElementById("countdown");
oElem.className = oElem.className === "blue_bckgrnd" ? "yellow_bckgrnd" : "blue_bckgrnd";
}
changeColor();
custom.css
/* custom CSS here */
/*; Clignotement du texte */
@keyframes clignoter {
0% { opacity:1; }
40% {opacity:0; }
100% { opacity:1; }
}
/* ! Keyframes */
/*; Déplacement vers la droite de l'image */
@keyframes ship {
0% { left: -300px; }
25% {left: -50px;}
50% {left: 100px;}
75% {left: 225px;}
100% {left: 500px;}
}
/* Bordures clignotantes */
@-webkit-keyframes borderBlink {
from, to {
border-color: transparent
}
50% {
border-color: red
}
}
@keyframes borderBlink {
from, to {
border-color: transparent
}
50% {
border-color: red
}
}
/* ! Compte à rebours promos */
/* Div container principale */
.hideCounter {
display: none;
}
#countdown {
padding: 1rem 0 0 0;
margin: 0 2rem 1rem 2rem;
border : 4px outset red;
box-shadow: 2px 2px 5px #060606, -5px -5px 10px #5f5f5f;
border-radius: 1rem;
}
/* Couleur 1 du background #countdown */
.blue_bckgrnd {
background-color: #63e1fd;
}
/* Couleur 2 du background #countdown */
.yellow_bckgrnd {
background-color: #4afa73;
}
/* Div contenant le texte et le compte à rebours */
#counter {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
padding: 1rem 0 0 0;
margin: 1rem;
}
/* Compte à rebours */
#cntdwn {
color: blue !important;
background-color: #faf563;
border-radius: 1rem;
border: 4px ridge black;
box-shadow: -2px -2px 5px #060606, 5px 5px 10px #5f5f5f;
}
/* Chiffres et textes du compte à rebours */
.counter span {
font-size: 2rem;
padding: .5rem;
margin-top: 1rem;
}
/* Paragraphe Texte au dessus du compte à rebours */
.counter p {
animation-duration: 2s;
animation-name: clignoter;
animation-iteration-count: infinite;
transition: none;
color : red;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
/***
* Responsive - format mobile et tablette
*/
@media screen and (max-width:480px) {
#countdown {
margin: 1rem 0;
}
#counter {
margin: 0;
}
.counter span {
font-size: .9rem;
padding: .2rem;
}
.counter p {
font-size: 1.5rem;
text-align: center;
}
}
/* Texte sur fiche produit */
.infotextcarrier {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: flex-start;
margin-top: 2rem;
text-align: center;
background-color: rgb(36, 185, 215);
padding: .5rem 0;
border: 8px outset red;
border-radius: .5rem;
-webkit-animation: borderBlink 1s step-end infinite;
animation: borderBlink 1s step-end infinite;
}
.infotextcarrier h4 {
display: flex;
justify-content: center;
color: rgb(255, 255, 255);
font-weight: bold;
font-size: 1.4rem;
text-align: center;
}
.infotextcarrierimg {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: end;
overflow-x: hidden;
border-bottom: 2px solid black;
}
.infotextcarrierimg img {
position: relative;
width: 100px;
height: 100px;
animation: ship 5s infinite;
-webkit-animation: ship 5s infinite;
-moz-animation: ship 5s infinite;
}
Image de l'animation : camion-v2-AW.png
