13 astuces pour modifier les vues de votre thème dans Prestashop 1.7

Prestashop offre énormément de possibilités, ne serait-ce que par la modification des modèles de votre thème. Pas besoin de module supplémentaire ou même d’être un développeur expérimenté pour réaliser certaines modifications. Voici 13 astuces bien pratiques pour modifier les vues de votre thème dans Prestashop 1.7.

Dans mon article de la semaine dernière, si vous ne l’avez pas lu, je parlais de l’architecture de Prestashop et des modèles TPL. Ceux-ci sont utilisés pour personnaliser l’affichage du contenu à l’utilisateur au sein de votre thème.

Ces modèles vous permettent donc de personnaliser l’affichage et d’en faire exactement ce dont vous avez besoin.

Ces astuces vous permettront de :

• Pousser plus loin les modifications avec du code Smarty
• Comprendre comment modifier le style et les scripts de votre site
• Personnaliser votre thème sans l’aide de module supplémentaire
• Et d’autres trucs super cools

Une super ressource à télécharger

La liste complète et détaillée des modèles de Prestashop 1.7

Un thème Prestashop contient plus de 100 modèles. Pour vous aider, j’ai compilé tous ces modèles dans une liste complète descriptive !

E-mail

Télécharger

Le code Smarty

1. La base de Smarty

Smarty est un moteur de modèle pour le langage PHP. C’est-à-dire qu’il permet d’écrire du code PHP simplifiée, en n’utilisant qu’une série de fonctions prédéfinies.

Surtout, il simplifie l’ajout de contenu dans du HTML, par rapport à du PHP. Voici par exemple comment afficher une variable en PHP :

<h1><?php echo($variable); ?></h1>

Et voici comment afficher une variable dans Smarty :

<h1>{$variable}</h1>

Le code Smarty est toujours évalué entre deux accolades. C’est pour cette raison qu’il est important de savoir comment empêcher le que Smarty interprète du texte entre accolade.

2. Empêcher Smarty d’interpréter certains contenus

Si vous avez prévu d’ajouter par exemple du javascript dans l’une de vos pages, on peut imaginer raisonnablement que celui-ci contiendra des accolades. Par exemple :

function youplaboum() { 
	alert('Elle est naze cette fonction'); 
}

La partie entre accolade de la fonction youplaboum va faire planter le moteur de rendu, parce que smarty ne parviendra pas à interpréter ce code. La solution :

{literal}{/literal}

Cette méthode peut recevoir un bloc de texte et permet donc en tapant ça :

{literal}
function youplaboum() { 
	alert(‘Elle est naze cette fonction;’);
}
{/literal}

D’empêcher smarty d’y mettre son nez !

3. Créer et utiliser une variable dans Smarty

Il peut être utile de conserver des valeurs dans des variables avec Smarty. Pour par exemple la réutiliser plusieurs fois dans la vue, récupérer le contenu d’une variable globale de Prestashop et la traiter, etc. Voici comment déclarer une variable avec Smarty :

{assign var="nom" value="Inigo Montoya"}

Où var sera le nom de votre variable et value, sa valeur. On peut simplifier et ça donne ça :

{assign "nom" "Inigo Montoya"}

Ensuite libre à vous de l’utiliser dans du code de cette manière :

Bonjour ! Je m'appelle {$nom}. Vous avez tué mon père. Préparez pour mourir.

Ce qui donnera :

Bonjour ! Je m’appelle Inigo Montoya. Vous avez tué mon père. Préparez pour mourir.

4. Concaténer des valeurs dans Smarty

Dans le même ordre d’idée et toujours en utilisant notre variable nom utilisée plus haut, il est possible de concaténer des valeurs. C’est à dire mettre bout à bout divers textes.

Il est possible d’utiliser plusieurs variables ou des variables et du texte.

{$nom|cat:' est mon nom.'}

Qui donnera :

Inigo Montoya est mon nom.

Un exemple pour produire le même résultat que plus haut :

{('Bonjour ! Je m'appelle '|cat:{$nom})|cat:'. Vous avez tué mon père. Préparez pour mourir.'}

Bon comme ça, on dirait une bonne manière de se compliquer la vie. Mais ça peut être utile pour concaténer deux variables par exemple, ou assigner une valeur concaténée à une variable pour la réutiliser.

5. Afficher du contenu HTML d’une variable

Il arrive qu’une valeur passée à la vue par Prestashop soit du HTML. Où simplement que vous ayez assigner à une variable Smarty du contenu HTML. Par exemple :

{assign "nom_important" "<strong>Inigo Montoya</strong>"}

Si vous afficher cette variable avec :

{$nom_important}

Le résultat sera :

Inigo Montoya

Dans votre page HTML. La balise HTML <strong> sera échappée par Smarty et les caractères HTML < et > seront transformés en &lt; et &ht;.

Pour éviter ça, utilisez simplement l’attribut nofilter :

{$nom_important nofilter}

Qui donnera :

Inigo Montoya

C’est tout de suite plus joli.

CSS, javascript et images

6. Les fichiers CSS du thème

Dans votre thème, les fichiers CSS se trouveront dans le dossier :

themes/[votre thème]/assets/css

Là vous aurez plusieurs fichiers, les deux fichiers importants sont :

• theme.css
• custom.css

theme.css étant le style CSS utilisé par le thème. Ce fichier peut être consulté mais il est déconseillé d’y toucher. Il s’agit du style de base du thème et n’est pas destiné à être changé par l’utilisateur, seul le développeur du thème devrait s’en occuper.

Pour toute modification du CSS, référez-vous donc, vous l’aurez compris, au fichier custom.css. Littéralement personnalisé.css qui vous permet d’ajouter tout le CSS qui vous chante.

L’avantage c’est que si vous faites des erreurs ou brisez le style d’une vue, vous n’avez qu’une seule place où chercher.

7. Les fichiers Javascript du thème

On la refait mais en un peu plus court, comme pour le CSS les fichiers Javascripts se trouvent ici :

themes/[votre thème]/assets/js

Comme pour le CSS, vous aurez deux fichiers importants :

• theme.js
• custom.js

Comme pour le CSS il est fortement déconseillé de modifier le fichier theme.js. Par contre il peut être utile de le consulter en cas de problème.

Tout votre Javascript additionnel pourra lui se trouver dans custom.js.

8. Utiliser des images personnalisées dans votre CSS

Toujours dans le dossier assets vous trouverez un dossier img :

themes/[votre thème]/assets/img

Ce dossier pourra vous être utile si vous avez besoin d’ajouter des images personnalisées au style de votre contenu. Pour toute image ajoutée par exemple à l’aide de la méthode CSS background-image, vous pourrez vous référer à ce dossier comme le CSS se trouve juste à côté.

Un exemple, en mettant une image youplaboum.jpg dans le dossier :

themes/[votre thème]/assets/img

Vous pourrez y accéder depuis votre CSS de cette manière :

.youplaboum { background-image: url(../img/youplaboum.jpg); }

Grâce au chemin relatif vers cette image !

Les modèles TPL

9. Ajouter du contenu Open Graph sur les pages

Open Graph permet aux réseaux sociaux de mieux comprendre le contenu de vos pages en lui donnant certaines informations : titre de la page, description, image représentative, etc.

Prestashop se comporte de manière assez efficace par défaut et fonctionne bien avec Open Graph. Mais imaginons que vous aimeriez utiliser une image spécifique pour votre page d’accueil ?

Pour se faire, rendez-vous sur le fichier TPL concerné, à savoir :

themes/[votre thème]/templates/index.tpl

Ce fichier s’occupe d’afficher le contenu de votre page d’accueil. On pourrait également aller dans un des layouts présent dans le sous-dossier layouts, mais cela modifierait les informations Open Graph de toutes les pages utilisant ce layout. Pas top.

Donc une fois dans ce fichier il est possible d’entrer ce genre de code :

{block name='head' append}
	<meta property="og:image" content="https://monsite.com/images/icons/facebook-image.jpg" />
{/block}

Comme expliqué dans mon article de la semaine dernière, dans Smarty la méthode block permet de faire appel à un block existant, ici head et de remplacer ou modifier son contenu.

En appelant le block head, Smarty va regarder si celui-ci existe déjà quelque part dans la page actuelle ou dans une page parente. Ici le block head existe dans le layout parent.

Comme on spécifie l’attribut append cela signifie qu’on désire ajouter ce contenu à la fin du contenu déjà existant pour le block head. On aurait aussi pu faire prepend pour l’ajouter avant.

De cette manière vous aurez une image personnalisée pour la page d’index.

10. Ajouter le traceur Google Analytics

Il existe bien sûr de nombreux modules que vous pourrez installer pour activer le traceur Google Analytics sur votre site. Gratuit ou payant.

Mais si vous n’avez pas envie de surcharger votre site en installant des modules, alors que quelques lignes de code suffisent, voici comment procéder.

Cette fois-ci, nous aimerions voir apparaître ce traceur sur toutes les pages. Il faut donc s’attaquer aux layouts. Vous trouverez ceux-ci dans :

themes/[votre thème]/templates/layouts

Lequel choisir ? En règle générale le layout utilisé comme base pour toutes les autres vues est layout-both-columns.tpl. Attention, si vous avez un thème spécifique il est possible qu’il soit différent !

Une fois dans ce fichier, dans la partie <head> du HTML, entrez le code de votre traceur de cette manière, en remplaçant le code Google Analytics par le vôtre :

{literal}
	<!-- Global site tag (gtag.js) - Google Analytics --> 
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-XX">
	</script> 
	<script> 
		window.dataLayer = window.dataLayer || []; 
		function gtag(){
			dataLayer.push(arguments);
		} 
		gtag('js', new Date()); 
		gtag('config', 'UA-XXXXXXXXX-XX'); 
	</script> 
{/literal}

Vous remarquez quelque chose ? J’utilise la méthode {literal} mentionnée plus haut, qui évite à Smarty d’interpréter ce code et de vous faire un beau bordel sur votre page !

11. Ajouter des liens dynamiques

Par défaut vous pouvez utiliser dans les réglages de Prestashop un module appelé Blocs de liens qui vous permet, sans toucher aux modèles, de créer des blocs de liens et de décider où vous désirez les afficher.

Mais si vous souhaitez simplement ajouter un lien vers une page CMS, cette technique peut-être un peu contraignante et nécessitera pas mal de travail pour un résultat rapidement atteint avec Smarty.

Pour commencer, il faut que vous sachiez quel est le numéro, ici l’ID, de la page CMS à laquelle vous aimeriez accéder. Vous pouvez le savoir en vous rendant sur cette page et en jetant un œil à l’adresse de celle-ci :

Dans cet exemple, le chemin pointe vers 4-nos-marques, l’id de la page est donc 4.

Pour créer un lien vers cette page il faudra utiliser la fonction :

{url}

Cette méthode permet de créer un lien à partir d’une route donnée. On donne donc le contrôleur (ici appelé entity), l’ID de l’élément concerné et la langue si nécessaire :

{url entity='cms' id=4 id_lang=$language.id}

Ici le contrôleur s’appelle cms, l’id est le numéro 4 comme mentionné plus haut et on utilise une variable présente dans toutes les vues, appelée $language, pour récupérer l’id de la langue avec $language.id.

12. Personnaliser le style des pages CMS

Par défaut les pages CMS utilisent toutes la même structure. Il est bien sûr possible de modifier le contenu de la page directement depuis Prestashop, en modifiant également le code HTML si besoin.

Mais imaginons que vous aimeriez créer une structure différente pour une page particulière. Après tout, le contenu d’une page CMS est systématiquement affichée à l’intérieur d’une page prédéfinie, sur laquelle vous n’avez pas de pouvoir.

En reprenant l’exemple ci-dessus, pour la page 4-nos-marques. Si on désirait modifier le style de cette page on créerait un nouveau fichier avec cette id dans le sous-dossier CMS :

themes/[votre thème]/templates/cms

Bien sûr on ne peut pas simplement créer une page vide. L’idée pour faciliter votre modification est d’utiliser une page existante pour en changer la structure. Il suffit donc de copier la vue utilisée par défaut pour les pages de CMS :

themes/[votre thème]/templates/cms/page.tpl

Et de le renommer en :

themes/[votre thème]/templates/cms/page-[votre id].tpl

Donc dans notre exemple :

themes/[votre thème]/templates/cms/page-4.tpl

En modifiant ce fichier, vous remarquerez que la structure est très rudimentaire :

{extends file='page.tpl'} 

{block name='page_title'} 
	{$cms.meta_title} 
{/block} 
{block name='page_content_container'} 
	<section id="content" class="page-content page-cms page-cms-{$cms.id}">
		{block name='cms_content'}
			{$cms.content nofilter} 
		{/block} 
		{block name='hook_cms_dispute_information'}
			{hook h='displayCMSDisputeInformation'}
		{/block}
		{block name='hook_cms_print_button'}
			{hook h='displayCMSPrintButton'}
		{/block}
	</section>
{/block}

Elle reprend comme base le fichier page.tpl défini à la racine des modèles. Ensuite elle affiche le titre de la page et au sein du block cms content le contenu de votre page HTML en échappant les caractères HTML.

On connaît désormais tout ça 🙂 Les hooks n’ont pas vraiment d’importance, il s’agit de blocs spécifiques qui permettent d’ajouter des éléments depuis le back-office de Prestashop. En allant dans Apparence → Positions vous pourrez choisir d’ajouter des modules à des hooks existants.

Il vous suffit donc de changer la structure comme bon vous semble, tout en gardant les blocks existant (pour éviter de corrompre la vue) mais en ajoutant des informations, modifiant le HTML, etc.

Petit bonus

13. Afficher une miniature par défaut si un produit n’a pas d’image

Cette astuce peut être sympa si vous aimez un peu creuser dans les modèles de Prestashop. Lorsque l’on recherche des produits sur votre site il peut arriver que certains n’aient pas d’image. Du coup, à l’affichage de la liste de vos produits, ça peut donner ça :

La plupart des thèmes gèrent ce genre de cas, mais dans l’éventualité où le vôtre ne le fasse pas, rendez-vous dans :

themes/[votre thème]/templates/catalog/partials/miniatures

Il s’agit en fait du dossier où se trouveront toutes les vues de miniatures affichées à la recherche. Pour les marques, les catégories, les fournisseurs, les packs de produits et les produits.

Ouvrez donc product.tpl et là vous pourrez trouver ce genre de code qui s’occupera d’afficher l’image de votre produit :

{block name='product_thumbnail'} 
	<a href="{$product.url}" class="thumbnail product-thumbnail">
		<img src="{$product.cover.medium.url}" alt="{$product.cover.legend}" data-full-size-image-url="{$product.cover.large.url}">
	</a>
{/block}

Sous-forme de lien pointant vers l’URL du produit actuel. Ensuite les autres informations sont d’ordre technique : source de l’image de la miniature, texte alternatif et lien vers l’image en grande taille dans un attribut HTML.

Mais si aucune image n’existe que ce passe t‘il ? Pour éviter ça, vous pouvez ajouter une expression conditionnelle {if}. L’idée est de dire que si le produit n’a pas d’image définie, il faut afficher une image par défaut :

{block name='product_thumbnail'}
	<a href="{$product.url}" class="thumbnail product-thumbnail">
		{if $product.cover == null}
			<img src="/images/no-cover.png">
		{else} 
			<img src="{$product.cover.medium.url}" alt="{$product.cover.legend}" data-full-size-image-url="{$product.cover.large.url}">
		{/if}
	</a>
{/block}

Et voilà !

Conclusion

Un certain nombre de ces astuces pourraient également être gérées directement depuis le back-office de Prestashop ou avec des modules. Mais dans certains cas, lorsqu’on utilise un thème enfant et qu’on est prêt à fouiller un peu, on peut faire des merveilles avec quelques lignes de code.

Surtout, ça permet de mieux comprendre le fonctionnement interne de Prestashop et de goûter un peu aux joies du code. Même si ça signifie parfois passer au-dessus des réglages de base de la plate-forme.

Il faut être un peu aventureux que diable !