Item 3 de l’épisode 4
PrestaShop Vidéo YouTube : Cet épisode fait partie de l’épisode 4 de la série PrestaShop.
Mais afin de ne pas avoir un épisode/tutoriel de plusieurs heures, je l’ai donc partitionné.
Voici les différentes parties de l’épisode 4 :
- Épisode 4.1 : Intégration de Google Tag Manager dans PrestaShop et configuration avec Analytics.
- Épisode 4.2 : Intégration d’un bouton J’aime de Facebook sur la boutique PrestaShop.
- Épisode 4.3 : Intégration d’une vidéo YouTube sur la boutique PrestaShop.
- Épisode 4.4 : Intégration du gestionnaire de cookies selon RGPD sur la boutique PrestaShop et paramétrages des services.
- Épisode 4.5 : Réglages et personnalisation du gestionnaire de cookies.
Préambule du tutoriel PrestaShop Vidéo YouTube
Dans ce nouvel épisode de la série PrestaShop, nous verrons comment mettre en place une vidéo YouTube. Pour ce tutoriel, j’utiliserai une vidéo de ma chaîne Activateur Web, que je placerai dans le pied de page(footer) de ma boutique. Je mettrai la vidéo concernant le trailer de ma chaîne, mais peu importe la vidéo. Après avoir suivi ce tutoriel, vous saurez comment mettre des vidéos YouTube sur votre boutique PrestaShop. Par conséquence, à vous la personnalisation, et les articles de blogs sous format vidéo !!
Suivez moi ! Encouragez moi !
Produire du contenu comme ce tutoriel me prend pas mal de temps. Pensez à la rédaction du tutoriel pas à pas, le tutoriel vidéo, la préparation, les tests, les captures d’images, l’enregistrement, le montage, le code, et vous comprendrez rapidement que cela est chronophage.
Si cette série ou cet épisode vous sont plaisants et vous intéresses, merci de prendre quelques secondes ou minutes pour me suivre et m’aider dans mon référencement :
- S’abonner à ma chaîne YouTube.
- S’abonner à ma page Facebook.
- S’abonner à ma page Instagram.
- S’inscrire sur le site.
Merci sincèrement de me soutenir et m’encourager !!
Le choix du roi
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 : PrestaShop : Vidéo YouTube sur la boutique
Tutoriel à lire et à suivre pas à pas
Cliquez sur la double flèche de la table des matières pour ouvrir ou fermer celle-ci.
Table des matières - Sommaire
Prérequis
Comme toujours, je développerai sur ma boutique située sur mon serveur local, et depuis mon thème enfant. Je pourrai ainsi faire mes tests sans devoir mettre ma boutique réelle en ligne en mode maintenance. Lorsque mes tests seront faits et validés, je pourrai alors pousser le code sur ma boutique en ligne située sur mon serveur distant.
Bien entendu, vous pouvez choisir de modifier directement votre boutique de production (en ligne), sans passer par le développement en local, mais c’est un risque que personnellement, je ne préfère pas prendre.
Pour la configuration de la boutique PrestaShop, je vous invite à lire l’article consacré aux réglages de la boutique, intitulé “mode Développement VS mode Production”. Vous pouvez aussi télécharger le guide des différents réglages que j’ai créé pour l’occasion.
Éditeur de code
Nous aurons besoin d’un éditeur de code. Pour ma part, j’utilise VSCode, mais libre à vous d’utiliser votre éditeur préféré. Si vous n’avez pas encore d’éditeur de code, vous pouvez installer Visual Studio Code (gratuit) en suivant l’article de blog que j’ai rédigé.
Choix de l’emplacement de la vidéo YouTube
Pour la mise en place d’une vidéo YouTube, nous devons en premier lieu, choisir où nous allons mettre celle-ci.
Je vous l’ai dit en introduction de ce tutoriel. Mon choix s’est porté sur le pied de page, appelé aussi footer. Ainsi, ma vidéo sera visible sur toutes les pages de ma boutique.
Ouverture du dossier de la boutique dans l’éditeur de code
Étant donné que je dois modifier le pied de page de ma boutique, il me faut savoir quel template est utilisé.
Quel fichier de template ?
Premièrement, je vais donc ouvrir le dossier de ma boutique PrestaShop dans mon éditeur de code.
À la suite de quoi, je me rends dans le dossier du thème parent. Pour cela, j’ouvre donc successivement le dossier “themes”, puis “classic”, et me rend dans le dossier “templates”.
Comme le pied de page est un élément de toutes les pages, il y a de fortes chances pour que je le trouve dans le dossier nommé “_partials”. Pour finir, j’ouvre donc ce dossier “_partials” et je vois maintenant mon fichier “footer.tpl”.
Quelle balise block PrestaShop pour la vidéo YouTube ?
Maintenant, que j’ai le fichier “footer.tpl”, je dois trouver quel block modifié pour y ajouter le code d’intégration de ma vidéo YouTube.
Inspection du footer depuis le navigateur
Pour repérer facilement quelle balise nous devons modifier, servons-nous des outils du navigateur.
Premièrement,rendons nous sur la page d’accueil, et tapons F12 sur le clavier.
Pour poursuivre, je me rends dans l’onglet “Eléments”, et scrolle sur ma page pour atteindre le pied de page. Ensuite, avec l’outil “Sélectionner un élément de la page pour l’inspecter” qui se trouve complètement à gauche de la barre d’outils, je sélectionne la zone où je veux placer ma vidéo. En conséquence de quoi, je peux voir que je suis dans une balise de type div qui a pour classe “footer-container”.
A la recherche du block
Maintenant, retournons dans l’éditeur de code et dans ce fichier “footer.tpl”, cherchons cette balise div ayant pour classe “footer-container”.
Ceci étant, je dois savoir quel block, je vais devoir modifier.
Si nécessaire, je peux retourner inspecter le code de mon fichier “footer.tpl” avec l’aide de mes outils de navigateur. Mais nous pouvons voir que ce fichier de template “footer.tpl” contient 3 balises block. Chacun que ces blocks sont nommé :
- “hook_footer_before” : élément avant le pied de page.
- “hook_footer” : élément du pied de page.
- “hook_footer_after” : élément après le pied de page.
Je pense que nous avons donc trouvé notre hook(crochet) et que nous utiliserons donc ce block nommé “hook_footer” pour y insérer la vidéo YouTube.
Modification du footer.tpl ?
Il nous faut maintenant modifier ce fichier “footer.tpl” !
Allons, allons, Fabien ! Tu déconnes ? 😱😩
Je suis sûr que ceux qui me suivent n’auront pas mordu à l’hameçon ?
Vous le savez désormais ? On ne touche pas aux fichiers de cœur de PrestaShop !
Nous laissons ce “footer.tpl” du thème parent ainsi. Et nous allons donc modifier ce block depuis notre thème enfant !
Ainsi, pour ceux qui ne suivent pas, le jour où je mettrai à jour ma version de PrestaShop, je retrouverai ma vidéo YouTube dans mon pied de page.
Création du footer.tpl du thème enfant
Afin de modifier le block “hook_footer” depuis le thème enfant, nous devons commencer par recréer la même structure de dossiers et de fichiers que dans le thème parent.
Nous avons vu que le fichier de template “footer.tpl“ se situe dans le dossier “_partials”.
Je vais donc me rendre dans mon thème enfant qui se nomme chez moi “classic_child”, et dans le dossier “templates”, je dois créer un dossier “_partials” et enfin à l’intérieur de celui-ci créer un fichier “footer.tpl”.
Dans mon cas, et dans le cas de ceux qui ont suivi la série, nous avions déjà créé ce dossier “_partials“ dans les épisodes précédents, puisqu’il contient également le fichier “head.tpl“ que nous avons utilisé pour l’implémentation de Google Tag Manager.
Je dois donc seulement créer le fichier “footer.tpl“ dans mon thème enfant.
À noter :
Ceux qui n’ont pas suivi cette série doivent recréer la même structure de dossiers que dans le thème parent et en utilisant la même orthographe pour chaque nom de dossier ou de fichier. Depuis le thème enfant, la structure sera la suivante :
templates/_partials/footer.tpl
Étendre le thème parent
Pour ne pas avoir à reprendre tout le code se trouvant dans le fichier “footer.tpl” du thème parent, nous devons étendre le fichier du thème parent depuis le fichier du thème enfant.
Pour faire cela, nous codons sur la première ligne :
{extends file='parent:_partials/footer.tpl'}
Ensuite nous ajoutons le block “hook_footer” à notre fichier enfant.
Récupération du code de la vidéo YouTube
Maintenant que notre fichier “footer.tpl“ est présent, et que nous y avons également placé la balise block où nous souhaitons insérer la vidéo YouTube, il nous faut aller récupérer le code d’intégration de cette vidéo.
Je me rends donc sur ma chaîne YouTube, et je vais choisir ma vidéo de trailer.
Cela étant, je clique sur le menu pour accéder aux options de partage.
Dans la fenêtre modale “Partager” qui s’est ouverte, je clique sur l’icône “Intégrer” :
Une nouvelle modale s’ouvre, et affiche le code d’intégration de la vidéo YouTube.
Nous pouvons régler quelques paramètres :
- Case à cocher “Démarrer à” et ensuite choisir le timing du démarrage.
- Afficher les commandes du lecteur – Décocher la case pour ne pas afficher les commandes.
- Activer le mode de confidentialité avancé : lorsque cette case est cochée, YouTube n’enregistre aucune information sur les utilisateurs de notre boutique qui ne regardent pas la vidéo.
De mon côté, je ne coche que la case permettant d’afficher les commandes.
Je clique ensuite sur le bouton “Copier” en bas à droite de cette fenêtre.
Implémentation du code d’intégration
Ensuite, je retourne sur mon éditeur de code. À la suite de quoi, je colle le code d’intégration de la vidéo dans le block “hook_footer”.
Comme toujours, je mets des commentaires avant et après le code, de façon à me souvenir à quoi ce code correspond lorsque je reviendrai peut-être sur ce fichier 6 mois plus tard.
Vidéo YouTube : Test de l'affichage dans le footer
Le code étant maintenant intégré, il nous reste à actualiser la page de notre boutique afin de voir si le travail est concluant.
Modification du style pour affichage de la vidéo
Laisser cela, ainsi, ne me plaît pas !! 😵💫😟
Même si ce tutoriel ne porte pas sur les fichiers de style ou sur les règles CSS, je ne vais pas laisser cela ainsi.
Pour modifier le style et l’affichage de nos éléments, vous le savez, nous avons à disposition le fichier “custom.css“ qui se trouve dans le dossier “css“, lui-même situé dans le dossier “assets“ de votre thème enfant.
Je ne vais pas, bien entendu, rentrer dans les détails, car le sujet de ce tutoriel, encore une fois, n’est pas de coder du CSS.
Pour faire les choses simplement, voici le code que je vais écrire dans mon fichier “custom.css” :
.footer-container {
min-width: 1400px !important;
}
.footer-container > .container > .row {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
Et voici le résultat à l’affichage :
C’est mieux n’est ce pas ?
Je vous le répète, rédiger du CSS n’est pas le sujet de ce tutoriel et je n’irai donc pas plus loin. Il faudra avant la mise en production, écrire le code concernant les médias queries afin que tous nos éléments s’affichent correctement en format tablette et mobile.
N’hésitez pas à aller voir la série que j’ai consacrée à CSS, si vous n’êtes pas à l’aise pour coder ces règles.
En ce qui concerne ce tutoriel, il est maintenant terminé. Ou presque…
Nous voulions afficher une vidéo YouTube sur notre boutique PrestaShop et nous y sommes arrivés. Très bien !
Mais poussons un peu les choses et regardons les conséquences.
Bonus au passage 🎇🎆✨🎁🍾🎀👀🧑💻
J’avais pour idée d’essayer de faire le plus court possible pour ce tutoriel, mais je crois que je ne suis pas capable de bâcler les choses. Et j’essaie toujours de donner le plus de détails dans mes explications.
Étant donné que nous sommes en train de travailler sur le fichier “footer.tpl”, je me dis qu’il serait bien en bonus de vous expliquez comment modifier le copyright de ce pied de page.
Vous savez là où on voit :
© 2024 – Ecommerce software by PrestaShop™
Modifier le copyright
Copie du block “copyright_link” du thème parent
Premièrement, retournons dans le fichier “footer.tpl” du thème parent afin de copier le block où se trouve ce copyright.
Implémentation du block dans le thème enfant
Ensuite, je vais ouvrir de nouveau le fichier “footer.tpl“, mais cette fois, celui qui est situé dans mon thème enfant, et coller le block “copyright_link”.
Il me suffit ensuite de modifier ce qui est inscrit à l’intérieur pour modifier son affichage.
ATTENTION, toutefois à ne pas indiquer que c’est vous qui avez développé PrestaShop car ceci est interdit. Vous pouvez en revanche indiquer que la personnalisation du site est de vous ! Ou indiquer ce que vous voulez, tant que vous ne faites pas de vol de Copyright…
Et mon affichage du Copyright est maintenant celui-ci :
Voilà pour ce petit bonus distribué au passage. 🍾🫱🏻🫲🏻
Conséquences et Conclusion
Si vous avez suivi l’épisode précédent sur l’implémentation du bouton J’aime de Facebook, vous savez certainement de quelle conséquence je veux parler ?
Ouvrons de nouveau les outils de navigateur et allons voir cette fois dans l’onglet “Appli” et dans la liste de gauche, dans le panneau Stockage, regardons notre liste de cookies.
Vous le voyez, nous avons à présent un service YouTube dans notre liste. Cliquez sur l’URL de ce service, et vous trouverez pas moins de 38 à 40 cookies délivrés par ce service !!
À petite cause, parfois grande conséquence !!
Aller plus loin
Il est impensable de se dire que nous allons laisser cela ainsi. 🙈🙉🙊
Nous pouvons intégrer ces vidéos, ou ces plugins de bouton J’aime, et tout ce qu’on veut d’ailleurs.
Mais nous devons donner le choix à nos utilisateurs et clients d’accepter ou de refuser la délivrance de cookies sur leur ordinateur de la part des services que nous utilisons.
Il faut être transparent sur ce point. C’est d’ailleurs une obligation lorsque nous disposons d’une boutique ou d’un site accueillant les internautes.
Nous devons aller plus loin en implémentant un gestionnaire de cookies qui permettra à nos utilisateurs ou clients de faire leur choix en matière de cookies.
Et ça tombe bien, car ce sera le sujet du prochain item de cet épisode 4, qui pour rappel, a pour but de mettre en place ce gestionnaire de cookies.
Nous mettrons en place quelque chose comme cela par exemple :
En ce qui concerne ce tutoriel, il est maintenant terminé.
J’espère qu’il aura pu vous être utile et également vous faire prendre en compte du fait qu’il ne suffit pas de mettre en place des choses sur notre site, mais que nous devons également penser aux conséquences. Parfois, on peut se dire que mettre une vidéo en place pour un développeur est facile. Et c’est le cas, nous l’avons vu.
Mais le travail ne s’arrête pas là pour faire les choses proprement et pour respecter les données de nos utilisateurs.
Il faut aller plus loin.
Suivez moi, laissez vos commentaires, contactez moi
C’est pourquoi je vous propose de continuer à me suivre, et nous irons plus loin ensemble.
N’hésitez pas à faire appel à mes services, si besoin !
- Je développe des sites web sur mesure (sites E-commerce, sites Vitrine), en utilisant les langages et technologies les mieux adaptés selon votre entreprise et activité.
- Je mets en place et personnalise des boutiques PrestaShop, ou autres CMS (WooCommerce, Shopify, etc.).
- J’implémente pour vous les suivis analytiques et établit avec vous une stratégie marketing pour votre entreprise.
- Je développe et mets en place également des modules afin de personnaliser vos boutiques en ligne.
Parce qu'un commerçant doit vendre, et qu'un développeur doit coder, créons un partenariat gagnant-gagnant !
S’il vous plaît
Suivez moins sur les réseaux et laissez vos commentaires pour m’encourager à continuer de produire du contenu comme celui-ci.
J’aimerais vraiment connaître votre opinion sur mes tutoriels ! Si vous avez des idées, des besoins, ou envies de tutoriels, donnez moi vos sujets, et je vous aiderai volontiers en publiant du contenu sur votre sujet.
Je vous remercie d’avoir suivi ce tutoriel.
À bientôt sur Activateur Web, et en attendant prenez soin de vous, et surtout restez curieux !
