Comment personnaliser votre thème dans Prestashop 1.7 ?

Comment personnaliser votre thème dans Prestashop 1.7 ?


Le plus simple avec Prestashop est en général de récupérer un thème existant et d’en modifier les réglages pour obtenir le résultat désiré. Sauf que cette technique a vite ses limites. Comment faire pour afficher du contenu personnalisé, modifier la structure de vos pages, bref, sortir du lot en modifiant vous-même le contenu et le look de votre thème Prestashop ?

Prestashop est une application plutôt complexe avec des centaines de classes. Il est en général hautement déconseillé d’aller toucher les fichiers de bases de Prestashop.

Au lieu de ça, si on décide de modifier les vues d’un thème il est possible de modifier le fichier custom.css, livré par défaut avec tous les thèmes. Cette technique héritée de Prestashop 1.6 ne permet cependant pas de faire tout ce qu’on veut, le CSS c’est puissant, mais on ne peut pas ajouter de contenu, modifier les textes, etc.

Dans ce cas, la bonne pratique veut que l’on créé un thème enfant. Cette nouvelle option permet, comme pour WordPress, de créer un thème qui héritera d’un thème installé.

On utilisera donc par défaut l’ensemble des vues, styles et personnalisations du thème parent et il sera possible de modifier n’importe lequel de ces éléments sans toucher aux fichiers originaux. Cette nouvelle solution a fait son apparition avec Prestashop 1.7 et c’est un excellent ajout.

Le but est d’éviter qu’une fonctionnalité de Prestashop ne marche plus ou qu’une mise à jour du système remplace le contenu modifié. Il est même possible que la mise à jour ne soit plus possible après ce genre de modifications. Eh oui, Prestashop est un animal assez délicat.

La partie la plus importante d’un thème est en général les vues, utilisées pour afficher le contenu à l’utilisateur. Il est bien sûr également possible de créer des modules, d’étendre des fonctionnalités, en créer de nouvelles, modifier des classes, etc.

Mais en règle générale, le gros des modifications d’un thème se fera dans les modèles TPL utilisés par Prestashop, qui s’occuperont d’afficher le contenu au visiteur.

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

Une super ressource à télécharger

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

Un thème Prestashop contient plus de 100 fichiers de modèles, difficile de s'y retrouver ! Pour vous aider j'ai créé la ressource ultime : la liste descriptive complète des modèles d'un thème.

Modèle MVC

Avant de parler plus précisément du fonctionnement des fichiers TPL, il est important de comprendre le concept de développement qui est à la base de Prestashop : le modèle MVC. Pour modèle, vue et contrôleur.

Ce modèle est largement utilisé en développement orienté objet. Il en existe des dizaines de variations en fonction des langages, avec leurs subtilités, mais l’idée de base est la suivante : séparé clairement chaque élément de l’application.

Schéma du modèle MVC
Schéma du modèle MVC

Modèle

Le modèle est en fait l’élément de base. Dans Prestashop, un client est un modèle. Ce modèle contient différents attributs (nom, prénom, e-mail, etc.) et est lié à d’autres modèles Prestashop, par exemple un client peut avoir plusieurs adresses.

En général, ce n’est pas une obligation, mais un modèle provient directement de la base de données. Il s’agit d’une classe représentant un enregistrement de la table. On en reprend donc les colonnes sous forme d’attributs.

Vue

La vue est ce dont nous allons parler dans cet article. Elle s’occupe d’afficher le résultat à l’utilisateur.

Pour se faire elle utilisera du contenu fixe (ici du HTML) et du contenu dynamique (du PHP interprété). Par exemple elle permettra d’afficher la liste des clients dans le back office de Prestashop.

Cette liste de clients sera en fait une liste de modèles, de type client, qui seront transmis à la vue au travers du contrôleur.

On distingue 3 types de vues :

  1. Layout : qui contiendront ensuite les vues. Ces layouts sont des pages de bases utilisées pour le rendu.
  2. Vues : les vues sont incluses dans les layouts et correspondent généralement aux actions des contrôleurs
  3. Partials : vous verrez souvent des dossiers _partials dans la structure des dossiers des vues de Prestashop. Il s’agit de vues incluses spécifiquement et qui peuvent souvent être utilisées à plusieurs endroits.

Contrôleur

Le contrôleur s’occupe d’effectuer le lien entre la vue et le modèle. Par exemple lorsque vous tapez l’adresse : monshop.com/panier vous accéder à la page du panier.

En fait vous accédez avant tout au contrôleur panier. Ce contrôleur peut avoir plusieurs actions (par exemple, nouveau, modifier, supprimer, qui sont les actions de base). Mais son action par défaut permet d’afficher le contenu du panier.

Donc le contrôleur aura une action nommée par exemple index, qui sera utilisée par défaut. Lorsque l’on accède à l’index le système va récupérer tous les modèles de produits du panier de l’utilisateur.

Il va ensuite les affecter à une variable $produits par exemple et passer cette variable à la vue. La vue par défaut pourra alors être vues/panier/index.tpl. Dans cette vue la variable $produits sera lue et tous les produits seront affichés à l’utilisateur.

Fichiers tpl

Liste de fichiers TPL

Les fichiers TPL représentent donc les vues de l’application. C’est à dire les fichiers affichant du contenu au visiteur. Comme un fichier PHP ces fichiers ont la particularité de pouvoir contenir du code dynamique que le serveur interprétera au moment de les afficher au visiteur.

Un TPL contient une part de HTML et une part de code Smarty. Donc, sur la base d’un TPL, Prestashop va créer un fichier HTML en remplaçant le code Smarty (variables, boucles, expressions conditionnelles) par le contenu interprété du code donné.

C’est donc par exemple un fichier TPL qui affiche la liste de vos produits au sein d’une boucle et un modèle spécifique affichant chacun de vos produits : miniature, nom du produit, etc.

Chaque partie de Prestashop utilise des fichiers TPL : les fonctions de bases, les modules, la gestion du back office, etc.

Smarty

Smarty - Le moteur de modèles utilisé par Prestashop
Smarty – Le moteur de modèles utilisé par Prestashop

Prestashop est développé en PHP et Smarty est ce qu’on appelle un moteur de modèle pour le langage PHP. C’est à dire qu’il offre des moyens d’afficher du contenu PHP (variables, boucles, expressions conditionnelles) dans du HTML sans pour autant avoir à saisir du PHP.

Il limite l’utilisation des fonctions PHP, à des fins de sécurité, en ne proposant qu’un panel d’actions limitées, mais en même temps en simplifie la structure et permet d’ajouter facilement du contenu dans du HTML.

Là où afficher le contenu d’une variable PHP dans du HTML ressemblerait à ça :

<?php echo($variable); ?>

Voilà ce que ça donne avec Smarty :

{$variable}

Le code Smarty est toujours évalué entre deux accolades. Pour plus d’infos et trouver tout ce dont vous avez besoin pour commencer avec Smarty, jetez un œil à la documentation ou lisez cet article où je donne plus de détail sur le code Smarty ainsi que des astuces pour aller plus loin dans la modification des thèmes.

Structure des fichiers

Structure des fichiers TPL dans Prestashop

Fichiers de bases

Dans Prestashop il n’y a pas de référence, du moins pour la version 1.7, vous permettant de savoir exactement quel modèle correspond à quelle vue dans le système. Pour une raison toute simple : le thème utilisé pourra dicter la liste des modèles TPL présents.

Bien sûr la plupart des thèmes partagent une structure et des vues de base similaires, mais il existe toujours quelques différences et vues supplémentaires.

Si vous désirez savoir quel modèle gère l’affichage actuel, consultez mon article sur l’ensemble des modèles d’un thème, où je détaille et décrit chaque fichier d’un thème et sa fonction. Vous pouvez aussi afficher la source d’une page. Parfois vous aurez des informations sur le nom du fichier TPL utilisé, en commentaire dans la source.

Dans d’autres cas, il sera nécessaire de fouiller un peu. Pour toutes les fonctionnalités de base, le dossier est le suivant :

/themes/[votre thème]/templates

Là vous trouverez une structure qui vous permettra de localiser assez facilement les fichiers utilisés.

Modules / add-ons

Les fichiers TPL présents dans le dossier :

/themes/[votre thème]/templates

Ne concerne que les vues des fonctions de base de Prestashop. Si vous désirez modifier les vues d’un module spécifique (module que vous avez téléchargé ou un module fourni par défaut avec Prestashop), jetez un œil dans le dossier :

/themes/[votre thème]/modules

Là vous trouverez la liste des dossiers contenant des informations liées à chaque module. Cependant il se peut qu’un module n’y apparaisse pas.

Tous les modules ne sont pas ajoutés au thème par défaut. En fait ce dossier vous permet d’ajouter des vues et fonctionnalités qui remplaceront celles par défaut des modules installés.

Donc par défaut, un module est installé de manière globale dans le dossier :

/modules

Là vous trouverez tous les modules installés (et il y en a un paquet, même par défaut). Naviguez ensuite dans les dossiers du module pour trouver le fichier TPL que vous cherchez à modifier.

Il faut à nouveau y aller à tâtons, entre les commentaires dans la source, la ressemblance du code avec ce qui est affiché à l’écran, etc.

Une fois le fichier trouvé, vous pouvez en modifier l’affichage sans risque de corrompre votre module en créant les mêmes dossiers et fichiers dans :

/themes/[votre thème]/modules

Petit exemple, si vous décidez de modifier l’affichage des moyens de paiements bancaires dans votre shop. Le module de paiement bancaire se nomme ps_wirepayment. Le fichier que vous aimeriez changer se trouve dans :

/modules/ps_wirepayment/views/templates/hook/payment.tpl

Ce fichier gère l’affichage du module de paiement au moment de la commande. Si vous désirez en modifier le contenu, créez la même structure de données dans votre thème et copiez-y ce fichier payment.tpl :

/themes/[votre thème]/modules/ps_wirepayment/views/templates/hook/payment.tpl

Là vous pourrez modifier ce modèle sans risque de toucher aux fichiers originaux.

Créer un thème enfant

Psst! Si vous cherchez à économiser du temps, utilisez mon générateur de thème enfant pour Prestashop 1.7. Il vous suffit de renseigner le nom de votre thème parent et 2 secondes plus tard, vous thème est généré dans un fichier zip et vous n’avez plus qu’à l’installer. Toutes les infos sont ici !

Maintenant que nous avons couvert la théorie, attaquons la pratique. Créer un thème enfant manuellement n’est vraiment pas très compliqué. Il suffit de se rendre dans les dossiers de vos thèmes dans l’installation de Prestashop :

/themes

Et là, vous pouvez créer un sous-dossier. Par exemple, appelons ce nouveau thème theme-enfant. À l’intérieur, créez un dossier config et à l’intérieur un fichier, nécessaire pour tout thème enfant, appelé theme.yml. Voici la structure de votre thème enfant :

/themes/theme-enfant/config/theme.yml

Ce fichier se composera des informations importantes de votre thème enfant. Voici un exemple de fichier theme.yml :

parent: classic # Nom du thème parent
name: theme-enfant # Identifiant de votre thème enfant, identique au dossier
display-name: Mon super thème # Description du thème
version: 1.0.0 # Version en cas de mise à jour
assets:
  use_parent_assets: true 

Où :

  • parent est le nom du thème parent
  • name est l’identifiant du thème enfant, en général identique au dossier du thème
  • display-name décrit le thème, texte affiché dans le front end
  • version permet de spécifier une version et de gérer les mises à jour du thème
  • use_parent_assets indique si votre nouveau thème doit également hériter des fichiers CSS, javascripts et des images du thème parent ou non

Voilà l’essentiel de ce dont vous aurez besoin pour créer un thème enfant. Mais vous pourrez encore créer un fichier preview.png à la racine de votre thème, qui permettra d’afficher une image d’aperçu de votre thème. Si vous ne la spécifiez pas, l’image du thème parent sera reprise.

Ensuite j’aime en général créer la structure des dossiers pour les assets à savoir :

/themes/assets/css
/themes/assets/js
/themes/assets/img

Et à l’intérieur du dossier /themes/assets/css créer un fichier custom.css qui sera le fichier CSS utilisé pour votre nouveau thème enfant.

Votre thème enfant est prêt !

Modifier un modèle

Une vue n’est en générale pas très compliquée à modifier. Bien sûr il existe des éléments de code qui peuvent décontenancer un néophyte. Mais elles sont en général assez limitées dans les vues de base de Prestashop.

Le processus

Lorsqu’on veut modifier un modèle dans un thème enfant, il faut toujours commencer par trouver le fichier qui nous intéresse dans le thème parent.

Imaginons que nous souhaitons modifier le modèle qui affiche la page d’un produit. Ce modèle s’appelle product.tpl et se trouve par défaut dans ce dossier dans le thème classic :

/themes/classic/catalog/product.tpl

Si vous souhaitez reprendre ce fichier pour le modifier, vous pouvez recréer cette structure dans votre thème enfant :

/themes/theme-enfant/catalog/product.tpl

Si vous vous contentez de créer ce fichier sans lui donner de contenu, vous pourrez remarquer en allant sur la page d’un produit que celle-ci est désormais vide. Votre fichier product.tpl a surchargé le fichier existant et remplacé son contenu.

Bien sûr, vous pourriez copier le modèle product.tpl existant et le modifier intégralement si vous avez besoin de le changer intégralement. Mais en général, on se contente de modifier certains éléments.

Si, par exemple, vous aimeriez remplacer le bloc affichant le prix dans ce modèle sans pour autant reprendre l’intégralité du fichier, héritez de votre fichier original.

Hériter d’un modèle

Pour hériter d’un fichier du thème parent, vous devez préfixer votre modèle avec :

{extends file='parent:[chemin vers le fichier]'}

Ce code vous permet de demander à Prestashop d’hériter d’un fichier du thème parent, par la méthode extends, spécifiant un paramètre parent avant le chemin du fichier.

Dans notre cas, pour hériter du fichier product.tpl, il faudrait entrer :

{extends file='parent:catalog/product.tpl'}

Et vous pourrez voir en actualisant la page que désormais celle-ci est identique au fichier product.tpl du thème classic, vous en avez hérité !

Si on en modifiait le contenu ?

Les blocks

Si vous vous rendez dans le fichier product.tpl, vous pourrez-voir qu’à de nombreux endroit apparaissent des balisent block. Par exemple, pour afficher le prix, un block appelé product-price a été créé, voici à quoi il ressemble :

{block name='product_prices'}
    {include file='catalog/_partials/product-prices.tpl'}
{/block}

Il inclut en fait le contenu d’un partials présent dans un sous-dossier, mais il aurait aussi bien pu ressembler à ça :

{block name='product_prices'}
   Prix : {$product.price}
 {/block}

Il est important de bien comprendre le concept d’un block. En fait un block est une indication donnée par Smarty pour signaler que son contenu doit apparaître dans le block avec le nom donné.

Le code ci-dessus peut fonctionner de deux manières :

  1. Soit il n’existe encore pas de block avec le nom ‘product_prices’ dans la vue actuelle ou une des vues parentes. Par exemple un layout, contenant une vue, qui contient un partial. Si on appel ce code depuis le partial, Smarty va regarder si le layout ou la vue parente contiennent ce block. Si ce n’est pas le cas, le contenu sera ajouté à l’endroit où vous l’aurez saisi dans le partial et un nouveau block ‘product_prices’ sera créé pour une éventuelle utilisation future.
  2. Soit le block existe déjà ailleurs dans une vue parente ou dans la vue actuelle. Du coup, Smarty va retrouver ce block et en remplacer le contenu avec le contenu donné.

C’est ce qui rend les blocks si pratiques : à partir d’une vue enfant, vous pouvez remplacer du contenu n’importe où dans une autre vue parente.

Mieux, il est également possible d’ajouter du contenu au début ou à la fin d’un block existant, sans en remplacer le contenu. Pour se faire :

  • {block name=’product_prices’ prepend} : Ajoute du contenu avant le contenu existant dans le block ‘product_prices’
  • {block name=’product_prices’ append} : Ajoute du contenu après le contenu existant dans le block ‘product_prices’

De cette manière, voici le type de code que nous pourrions retrouver dans le contenu de notre fichier product.tpl de notre thème enfant :

{extends file='parent:catalog/product.tpl'}

{block name='product_prices'}
   Contactez-nous pour obtenir les prix
 {/block}

Ce qui ferait passer notre modèle original de ça :

Modèles product.tpl dans sa version originale

À ça :

Modèles product.tpl dans sa version modifiée

Et tout ça en quelques lignes de code.

Traductions

Le code présenté plus haut est bien pratique, mais il ne correspond pas aux conventions de Prestashop. Toute chaîne de caractère dans le système doit être traduisible.

Pour se faire, nous allons créer un nouveau domaine de traduction spécifique à notre thème enfant. Et pour se faire, il suffit de créer une chaîne de caractère avec ce domaine dans notre modèle et Prestashop créera la chaîne traduisible et le domaine automatiquement :

{extends file='parent:catalog/product.tpl'}

{block name='product_prices'}
   {l s='Contact us to get a quote' d='Shop.ThemeEnfant'}
 {/block}

La bonne pratique veut que la chaîne de caractère soit toujours en anglais par défaut. Sans traduction dans le back office, cette méthode affichera simplement le texte Contact us to get a quote. Vous avez vu que nous avons spécifié le domaine Shop (domaine de base pour le front end) et le sous-domaine ThemeEnfant, spécifique à notre thème

Si vous vous rendez dans les traductions de Prestashop, vous pourrez retrouver cette chaîne de caractère dans les traductions du thème enfant et la modifier :

Traductions de votre thème enfant dans le back office

Et une fois le réglage enregistré, vous pourrez-voir la traduction se mettre à jour sur la page de votre thème :

Version traduction de product.tpl de votre thème enfant

Les éléments de code

Brièvement, voici quelques-uns des éléments de codes proposés par Smarty, découvrez plus de détail sur le code Smarty dans mon article sur le sujet.

Vous pourrez y trouver des variables :

{$variable}

Des boucles :

{foreach from=$element.children item=child}
{/foreach}

Des opérateurs conditionnels :

{if $element.children.count == 0}
{/if}

Si vous ne connaissez pas le code, évitez de toucher aux lignes de code Smarty, contentez-vous de jouer avec la structure HTML du fichier TPL, ça suffira dans la majorité des cas.

Conclusion

Prestashop est un outil très puissant et intégralement modulable selon vos besoins. Comme mentionné plus haut, il est possible d’étendre des fonctionnalités, de modifier des classes, etc.

Mais la plupart des modifications de bases peuvent déjà très bien s’effectuer par la modification des vues dans le système. Leur structure n’est pas très compliquée à assimiler et leur fonctionnement non plus.

Smarty n’est clairement pas le moteur de modèle le mieux documenté ou le plus puissant sur le marché, mais si on cherche un peu on trouve tout ce dont on a besoin. Et l’introduction des thèmes enfants avec la version 1.7 rend la personnalisation facile et rapide, avec un système d’héritage et de blocks plutôt puissant !

Apprendre ce genre de techniques à un gros avantages : vous ne vous reposerez plus exclusivement sur des thèmes payants pour obtenir des résultats. Vous pourrez directement modifier la structure et le contenu de vos vues et créer votre propre thème de A à Z !



36 commentaires

36 Commentaires

  1. moi

    on ne vois pas les images

    Réponse
    • Thierry

      Bonjour !

      Tiens, vous ne voyez aucune des images de l’article ?

      Pourtant aucun problème chez moi, j’ai testé sur plusieurs navigateurs et ça fonctionne. Essayez de rafraîchir la page avec F5 ou de forcer le rafraîchissement du cache avec Maj + F5.

      J’espère que ça réglera le problème!

      Réponse
  2. lucas

    Bonjour! Merci pour ce tuto, génial !
    Comment est-il possible d’accéder au autres fichiers tpl tels que header ou bien footer.tpl, en fait, je cherche à modifier le html du header dans sa version theme/classic de p1.7
    merci beaucoup !

    Réponse
    • Thierry

      Bonjour Lucas,

      Merci du retour ! Est-ce que vous avez déjà créé un thème enfant ? Si vous souhaitez modifier les fichiers header ou footer, qui se trouvent dans le dossier classic/templates/_partials il vous suffit d’aller dans votre thème enfant, de créer les dossiers templates/_partials et à l’intérieur de ce dossier d’y copier votre fichier header.tpl et footer.tpl du thème classic (afin d’avoir une base, vous pouvez aussi bien les recréer de zéro, mais c’est vite plus compliqué).

      Une fois ces fichiers créés, vous verrez qu’en les modifiant ces modifications s’appliqueront à votre boutique. Si vous souhaitez disposer de la liste complète des modèles du thème classic, allez consulter mon article sur le sujet.

      J’espère que c’est clair, bon courage pour la suite de votre projet !

      Réponse
  3. Albert Ozouaki

    Bonjour, je vous remercie pour cet article. Néanmoins, j’ai un petit soucis, venant de débuter sur Prestashop, je souhaite rajouter un simple bouton sur la page d’accueil et je trouve pas quel est le fichier .tpl et block précis pour ce faire.

    Réponse
    • Thierry

      Bonjour Albert,

      Merci du commentaire. Pour modifier l’accueil, il vous faut reprendre dans votre thème enfant, le fichier index.tpl qui se trouve dans dans classic/templates/index.tpl.

      Cependant le souci avec ce fichier est qu’il se contente en gros d’exécuter le hook appelé displayHome.

      Donc si vous voulez ajouter du contenu personnalisé vous pouvez le faire soit avant le hook, soit après, mais pas entre deux modules greffés sur ce hook. Une solution alternative est d’ajouter le module Custom text (installé par défaut sur l’accueil du thème classic) et de le personnaliser pour y ajouter votre bouton.

      J’espère que ça vous aider ! Bon courage pour la suite.

      Réponse
      • Albert Ozouaki

        Merci beaucoup pour votre aide. J’ai réussi à implémenter mon bouton.

        Bon courage à vous aussi dans vos projets !

  4. Zanin

    Bonjour,

    Mon site a été modifier sans créer un thème enfant
    Peut-on le transformer en « enfant » sans perdre les modifications déjà apportées
    Merci de votre aide

    Réponse
    • Thierry

      Bonjour,

      Cela dépend de ce que vous avez modifié au niveau du thème original. L’idéal serait de créer votre thème enfant sur la base du thème existant et ensuite d’y copier les fichiers que vous avez modifiés dans les mêmes dossiers sous votre thème enfant. Si vous n’avez modifié que custom.css par exemple, vous pouvez créer un dossier /[thème enfant]/assets/css dans lequel vous le copierez.

      De cette manière, si le thème de base est modifié par une mise à jour, vous n’aurez plus à vous soucier d’écraser vos personnalisations.

      J’espère que c’est clair, bonne chance pour la suite !

      Réponse
      • zanin

        Désolé pour ce retour tardif
        Merci beaucoup pour l’info

  5. Margaux

    Bonjour ! Je viens de tomber sur ce super tutoriel, néanmoins je bloque au moment de la partie « extends » avec le parent… L’arborescence est la même chez l’enfant et pourtant, quand j’écris dans mon fichier product.tpl « {extends file=’parent:catalog/product.tpl’} », je continue à ne rien voir :/
    Savez-vous d’où cela peut venir ?

    Merci de votre aide !

    Réponse
    • Margaux

      En mettant à nouveau le thème classic, puis en remettant le thème customisé, tout s’est update finalement ! Il faut juste à chaque fois que j’aille reload le thème.

      Réponse
      • Thierry

        Bonjour Margaux,

        Merci pour le retour, dans ce cas je vous conseil d’aller jeter un œil dans le back-office, sous Paramètres avancés > Performance. Là choisissez Force compilation dans le menu déroulant Compilation des templates et décochez l’option Cache.

        De cette manière, à chaque actualisation d’une page le code sera rechargé au lieu d’être conservé dans le cache, ça devrait vous éviter ce genre de problèmes 😉

  6. Shrolox

    Bonjour, j’ai créé un thème enfant et entré le même code que vous (extend parent + block product_prices avec une phrase) Mais lorsque je recharge la page cela ne change rien. Pourtant si j’enlève le extends la page apparait bien blanche avec juste ma phrase. Une idée ?

    Réponse
    • Thierry

      Bonjour,

      En créant un fichier product.tpl dans le dossier de votre thème enfant /themes/[votre-theme]/templates/catalog/product.tpl et en entrant le code suivant :

      {extends file='parent:catalog/product.tpl'}
      {block name='product_prices'}
      Contactez-nous pour obtenir les prix
      {/block}

      Ca ne fonctionne pas ? Par acquis de consicence j’ai refais le test chez moi et aucun soucis. Est-ce que vous utilisez bien le thème classic ? Si vous voulez remplacer le contenu d’un block, comme ici product_prices, il faut vous assurer qu’il existe dans le fichier hérité (sous /themes/[theme-parent]/templates/catalog/product.tpl).

      Vérifiez également que vous ayez bien modifier les paramètres du cache dans Performance, avec la procédure que j’ai expliquée à Margaux juste au dessus, pour être sûr que les modifications de modèles soient appliquées à l’actualisation d’une page !

      J’espère que ça réglera votre soucis.

      Réponse
  7. Formations Renaud Demaret

    Wow qu’elle superbe article, c’est bien expliqué, bien organisé, j’y reviendrais sans faute plus en détail quand j’aurais le courage d’aller plus en profondeur dans le code de prestashop.

    Merci pour votre travail et le partage de vos connaissances.

    Réponse
    • Thierry

      Bonjour Renaud,

      Merci du retour et des compliments !
      Il s’agit d’un de mes articles les plus consultés, je pense que c’est une bonne ressource à laquelle on peut revenir lorsqu’on s’attaque aux modèles de Prestashop et qu’on a de vrais cas pratiques, pour s’aider à avancer.

      De mon côté votre commentaire m’a permis de découvrir votre site, vos formations et votre page YouTube. Impressionnant contenu ! Et vous êtes vous-même un excellent pédagogue, je vais aller un peu fouiller tout ça 😉

      Réponse
      • Formations Renaud Demaret

        Merci, oui j’essaye aussi de faire du mieux possible en traitant un sujet. Et il arrive qu’il en ressorte des choses pas trop mal mdr.

        Je vous vais aussi vous suivre sur youtube tout de suite.

  8. Valérie

    Bonjour,
    je n’arrive pas à trouver le fichier que je dois modifier et mettre dans le thème enfant pour modifier la longueur du texte des produits dans les catégories, nouveauté…
    Merci

    Réponse
  9. Valérie

    Bonjour,
    je pense avoir trouvé le fichier afin de modifier le nombre de caractère pour le nom du produit lorsqu’on est dans nouveauté ou catégories. Je pense que c’est celui-ci : catalog/_partials/miniatures/product.tpl
    J’ai créé via prestashop 1.7.6.4 un thème enfant. Et j’ai ajouter un fichier product.tpl en suivant votre blog :
    {extends file=’parent:catalog/_partials/miniatures/product.tpl’}

    {block name=’product_name’}
    {if $page.page_name == ‘index’}
    {$product.name|truncate:70:’…’}
    {else}
    {$product.name|truncate:30:’…’}
    {/if}
    {/block}
    1 – lorsque je choisi le thème enfant, dans presstashop, ça m’affiche un bandeau rouge sur tout le menu, et la pagination du classic que j’avais fait n’existe plus
    2 – lorsque je reviens au thème classic, je perds toute les modifications faites de la pagination dans le classic
    Qu’est ce que je n’ai pas compris ?
    Merci

    Réponse
    • Thierry

      Bonjour Valérie,

      Pour votre première question, c’est tout à fait ça, il faut hériter du fichier de la miniature de produit et modifier la valeur de la méthode Smarty truncate afin d’afficher plus de caractères, bien vu !

      Pour vos deux autres problèmes, difficile à dire, le thème enfant sans aucune modification n’affectera pas du tout le visuel de votre site. Avez-vous apporté des modifications dans le fichier custom.css du thème enfant ?
      Au sujet de la pagination quelles modifications avez-vous apportées exactement ? Avez-vous fait cette correction dans un fichier du thème enfant ?

      Il me faudrait un peu plus de précisions pour pouvoir vous aider !

      Réponse
  10. Alexandre

    Bonjour et bravo pour ce tuto tres complet et facilement comprehensible. MA question porte sur le template classic de PS 1.7. Est-il possible d’afficher ce template (et donc le site) en plein écran au lieu de la taille d’origine laissant de grandes marges de chaque coté?! Si oui, quels sont les fichiers à modifier?

    Merci d’avance,

    Réponse
    • Thierry

      Bonjour Alexandre,

      Merci du retour, content de pouvoir vous aider !
      Pour ce type de modification, vous n’aurez pas nécessairement besoin de modifier des modèles du thème. Il suffit de modifier les règles CSS dans le fichier assets/css/custom.css.

      Par exemple la classe .container est utilisée pour gérer l’affichage « centré » avec de grandes marges avec, par défaut, ce contenu dans le CSS :

      .container {
      width: 1140px;
      max-width: 100%;
      }

      Il vous suffit pour faire du plein écran, d’ajouter cette règle CSS dans votre fichier :

      .container {
      width: 100%;
      }

      Pour prendre toute la largeur. Bien sûr vous pouvez ajuster un peu, mais c’est pour vous donner un exemple. Les modèles TPL définissent la structure et le contenu, mais le visuel, les marges, couleurs polices, etc. sont tous gérés dans le CSS.

      J’espère que c’est clair, bon courage pour la suite !

      Réponse
  11. Alexandre

    Merci beaucoup Thierry pour cette réponse si rapide et si claire!

    Réponse
  12. Alexandre

    Je reviens vers vous Thierry car si je suis vos instructions je vais dans

    assets/css/custom.css, mais dans ce fichier il n ’y a rien ou presque…

    /*
    * Custom code goes here.
    * A template should always ship with an empty custom.css
    */
    .VgLangItem{cursor:pointer;}

    Est ce que c’est bien ce chemin /themes/classic/assets/css/custom.css ?

    J’ai un doute…

    Réponse
  13. Alexandre

    Bonjour Thierry, on a suivi vos instructions et c’est exactement ce qu’on voulait! Une solution tres simple mais finalement difficile à trouver sur le net. Un grand merci pour votre aide!

    Réponse
  14. Alexandre

    Bonjour Thierry, je me permet de revenir vers vous pour un autre petit conseil toujours au niveau du design. La barre de recherche est limitée en taille et nous souhaiterions l’agrandir de façon significative.

    J’ai beaucoup cherché dans le css et autres fichiers, mais impossible de trouver le fichier ou la ligne à changer pour agrandir cette barre de recherche…

    Auriez vous la solution?

    Bien à vous,

    Réponse
    • Thierry

      Bonjour Alexandre,

      Là ça se complique un peu, vous pourrez peut-être le personnaliser avec pas mal de CSS, mais pas sûr que vous pourrez tout faire.
      Il faut savoir que la recherche est un module dans Prestashop. Donc il faut que vous alliez jeter un œil dans Apparences > Positions pour savoir à quel endroit le module est affiché. Vous pourrez greffer le module à un autre endroit si besoin.

      Quant à la modification du template lui-même, vous devrez modifier les vues du module ps_searchbar. Ne le faites pas dans le dossier themes\classic, il vous faut un thème enfant (comme expliqué dans cet article) dans lequel vous pourrez créer le dossier modules\ps_searchbar, copier la vue themes\classic\modules\ps_searchbar\ps_searchbar.tpl à l’intérieur et la modifier.

      J’espère que ça vous aidera, je ne peux pas couvrir tous les cas dans cet article, avec Prestashop vous n’aurez pas le choix de creuser.

      Bonne chance à vous !

      Réponse
  15. Alexandre

    Thierry,

    Merci beaucoup une fois de plus pour votre réactivité et vos explications très claires.

    Bien à vous,

    Réponse
  16. Claire

    Bonjour Thierry ! Super tutoriel, merci beaucoup pour ces ressources.
    Je me lance dans mon 1er prestashop et ai utilisé le générateur de theme enfant que tu as développé.
    Cependant lorsque je l’upload dans mon FTP et que je défini ce nouveau theme parent dans prestashop comme theme par défaut, prestashop me retourne une erreur 500. Je suis un peu coincée. Aurais-tu une idée de ?

    Merci mille fois pour ton aide et tes supers articles !

    Réponse
  17. Charlotte

    Bonjour,
    Merci bcp d’avoir pris le temps d’expliquer et de partager vos connaissances !

    J’utilise jusqu’à présent WordPress, que j’apprécie (énormément) pour sa modularité. Je m’explique : la possibilité qu’il offre de créer ses propres thèmes, requêtes, ses propres modèles de pages. Je ne suis pas une grande développeuse, mais ça me plait de mettre les mains dans le cambouis, et de ppouvoir « controller » ce que j’affiche.
    Je me suis collée à WooCommerce, avec un peu moins de bonheur (les hooks, les priorités, ça m’a semblé plutôt fastidieux, mais bon). Bref, j’abrège.
    De ce que je découvre ; Prestashop offre en qqs clics une boutique fonctionnelle, propre.
    Ok, cool.
    Mais, et peut être (j’espère !) allez-vous me détromper, il me semble rudement compliqué/périlleux d’imaginer créer son propre thème, non ?!!
    Mon erreur tient sans doute au fait que je pense « à la façon de wordpress », (son template hierarchy, ses fonctions accessibles, son codex) et que j’essaie de faire rentrer Prestashop dans ce moule (forcément, ça coince). Vous,qui avez l’expérience sur cette solution : réussissez-vous à créer un site réellement personnalisé (= dans sa structure, pas seulement de l’ajout ponctuel de texte par ci par là ou des modifications css) ?

    C’était bavard, pardon, merci de votre réponse (et encore de votre travail !)

    [PS : et je ne cherche absolument pas à vanter les mérites d’une solution ou d’une autre, j’aimerais comprendre un peu mieux ce qu’il est possible ou non de réaliser avant de me lancer (ou non).]
    [PS2 : vos liens Buildeo sont forbidden]

    Réponse
    • Thierry

      Bonjour Charlotte,

      Tout d’abord merci pour les compliments, content que mon contenu vous plaise !

      Alors concernant votre question, il m’est arrivé de créer un thème de A à Z pour Prestashop, mais toujours en me basant sur une structure existante (dans mon cas le Starter Theme de PS qui n’est plus maintenu). Désormais, je travaille plutôt avec le thème classic, sur lequel je crée un thème enfant et que je personnalise de fond en comble. Ces prochains temps je pense tester 1-2 thèmes premium (les plus connus), les tester et voir comment ils pourraient améliorer mon processus de personnalisation, à voir si ça me convient !

      Par rapport à WordPress, une fois qu’on a compris le fonctionnement de Prestashop, ça ne me semble pas beaucoup plus complexe. Cependant pour certaines personnalisations (développements spécifiques) on passera plutôt par des modules que par le thème (contrairement à WordPress). Mais le gros, gros souci de PS est le manque de documentation. WP en plus de la communauté a une doc de dingue et on trouve tout ce qu’on veut pour faire à peu près tout ce qu’il est possible de faire. Prestashop c’est une misère à côté (d’où mes articles).

      Alors oui ça nécessite de fouiller et de passer plus de temps dans le code du CMS, ce qui a parfois du bon. Pour répondre à la question de la structure, comme WordPress, le moteur de vues se base sur une interface modèle / contrôleurs fixe, avec un système de routes prédéfinit (en tapant /brands dans prestashop, on affichera par défaut la liste des marques par exemple, le chemin est modifiable, mais la vue affichée sera toujours récupérée au même endroit dans le thème) et des modèles appelés en fonction de l’action.

      Cependant si certains modèles de bases (layouts et vues TPL) doivent être présents dans votre thème avec un nom spécifique pour fonctionner (vu que le contrôleur y fait appel), vous pouvez ensuite créer tous les partials que vous souhaitez pour afficher votre contenu et changer totalement la structure visuelle. Les TPL ne sont que des modèles HTML avec des appels à Smarty dedans, libre à vous d’en faire ce que vous voulez.

      WordPress est un outil malléable, on peut lui faire faire à peu près ce qu’on veut. La preuve avec WooCommerce qui le transforme en boutique en ligne. Prestashop fait de l’e-commerce, point. On peut étendre ses fonctionnalités grâce à des modules, changer le visuel et la structure du thème grâce aux vues, mais on reste dans quelque chose de plus rigide.

      À choisir, oui je préfère customiser un thème WordPress, parce que la doc et les ressources sont énormes et que j’ai l’impression de ne jamais être limité, mais en matière de personnalisation, pour peu qu’on prenne le temps de se pencher dessus, Prestashop est également très puissant et adaptable !

      J’espère que ma, longue, réponse aura pu vous donner plus de précisions sur tout ça. 😉

      PS : Merci pour les liens Buildeo, il s’agissait d’un ping d’un site référencent mes articles, je les ai retirés

      Réponse
  18. iyade

    comment ajoute un style dans thème . j’ai acheter un thème et je vue utilise un style de lui mais il donne 2 fiche json ?? merci

    Réponse
    • Thierry

      Bonjour Iyade,

      Votre question n’est pas super claire, vous parlez de style CSS ? Normalement, tout thème doit disposer dans le dossier \themes\[nom du thème]\assets\css un fichier appelé custom.css qui est le fichier de style que vous pouvez personnaliser sans avoir peur de voir vos modifications écrasées à la mise à jour du thème. Si ce fichier n’existe pas, il vous suffit de le créer et normalement, Prestashop le chargera automatiquement.

      J’espère que j’ai bien compris, bonne chance à vous 😉

      Réponse
  19. Franck

    Bonjour, je débute et j’avoue que votre site, tuto, explications est une bénédiction.
    J’ai réussi à installer un thème (PaprikaPizza-FastFood) et j’ai tenté d’utiliser votre générateur de thème enfant, mais hélas son installation semble impossible avec Presta 1.7.6. Pourrier vous m’aider à trouver la subtilité qui forcément m’a échappé ? Par avance grand merci

    Réponse
  20. Yoni

    Bonjour Thierry,

    Bravo pour vos articles bien complets quand on sait à quel point ils sont rares sur la toile et la pauvreté de la doc officielle …
    Est-ce que vous avez une méthode pour remplacer par une autre version, les inclusions de boostrap css et js du theme classic via le theme enfant ?

    Réponse

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

derniers articles
de mon blog