New Slang - Création de Site Internet Artisanale

La liste complète des modèles d’un thème Prestashop

thierry
La liste complète des modèles d'un thème Prestashop 1.7

Lorsque l’on décide d’apporter des modifications à un thème, il n’est pas toujours aisé de retrouver le fichier dans lequel effectuer ces changements. C’est pourquoi j’ai créé la référence ultime pour retrouver rapidement une vue à modifier dans Prestashop : une liste complète et exhaustive des modèles du thème de Prestashop par défaut !

Cet article aura moins un but pédagogique qu’une fonction de « référence » en la matière. Que ce soit pour vous ou pour moi, elle permet de s’y retrouver rapidement dans la jungle de fichiers présents dans le dossier templates d’un thème Prestashop 1.7.

Besoin de modifier la vue des variations présente sur la page des produits ? Vous trouverez le fichier à modifier dans ces lignes !

Cette super ressource en PDF

Téléchargez la liste complète des modèles de Prestashop 1.7

Ayez toujours cette liste complète sous la main, avec la structure des dossiers et un lien vers le code original de chaque modèle !

Téléchargez la liste complète des modèles de Prestashop 1.7

Préambule

Thème utilisé

Afin de créer ce document, je me suis basé sur la structure des fichiers données par le thème classic fournit avec Prestashop 1.7. Sur le principe, la plupart des thèmes Prestashop 1.7 devrait être composés des mêmes thèmes, avec cependant des variations.

Pour l’ensemble des fichiers, vous trouverez un lien vers le fichier source présent sur le repository GitHub de Prestashop du thème.

Quelques bases

Avant de commencer le listing des vues, je vous conseil de lire mon article sur la modification d’un thème dans Prestashop 1.7 pour mieux comprendre le fonctionnement du CMS.

Dans cet article j’évoque :

  • Le modèle MVC utilisé par Prestashop
  • Les différents types de vues dans Prestashop à savoir les layouts, les vues et les partials
  • Le fonctionncement des modèles
  • Leur modification

Si vous voulez plus d’informations sur comment modifier les modèles dans Prestashop 1.7 et le code Smarty, lisez mes 13 astuces sur le sujet.

L’héritage des vues

Il est important de bien comprendre comment fonctionne l’héritage des vues dans Prestashop. Une vue n’hérite pas exactement d’une autre, en fait une vue enfant étend les fonctionnalités d’une vue parent.

Héritage des vues dans Prestashop 1.7
Héritage des vues tel que représenté sur le site de Prestashop. Où product-pack.tpl est un partial de product.tpl, qui constitue le block de contenu du fichier page.tpl.

Lorsqu’une vue enfant reprend une vue parente, elle le fait en commençant le fichier par ce type de code :

{extends file='page.tpl'}

Où le fichier actuel utilise comme modèle parent le dossier page.tpl se trouvant à la racine du dossier [thème]/templates. Vous verrez dans la liste des vues que cet héritage pointe toujours vers le dossier [thème]/templates comme dossier racine.

Si vous deviez étendre le fichier [thème]/templates/layouts/layout-both-columns.tpl il faudrait entrer :

{extends file='layouts/layout-both-columns.tpl '} 

Le chemin étant toujours absolu à cette racine et non pas relatif au fichier actuel.

Ensuite il est possible d’entrer un contenu directement, qui sera repris à la fin du fichier étendu ou d’utiliser les blocks tel quel j’en parle les 2 articles cités plus haut afin de remplacer ou ajouter du contenu à la page étendue.

La variable $layout

Je reviens rapidement sur une notion que j’avais déjà évoqué dans mon article cité plus haut : les layouts.

Les layouts sont les modèles de bases desquels la plupart des vues vont hérités. Mais vous noterez que dans quelques cas, la page hérité n’est pas un fichier mais un variable $layout.

Il s’agit en fait d’une variable définie dans les réglages du thème et qui est dynamique. Cette variable permet de choisir le fichier de layout à utiliser par défaut. Il s’agit en fait du chemin vers l’un des fichiers présent dans le dossier [thème]/templates/layouts.

Il est possible de modifier cette informations pour la plupart des vues en vous rendant dans Apparence > Thème et logo puis en cliquant sur Choisir la mise en page dans la vue du thème actif.

Choisir la mise en page des vues d'un thème

Dans la nouvelle fenêtre, vous pourrez alors choisir le modèle à utiliser pour la plupart des vues :

Choisir la mise en page des vues d'un thème

Où :

  • Full width correspond au fichier layout-full-width.tpl
  • Three columns au fichier layout-both-columns.tpl
  • Two columns, small left column au fichier layout-left-column.tpl
  • Two columns, small right column au fichier layout-right-column.tpl

Liste des modèles

Le liste des modèles du thèmes Prestashop par défaut décrit :

  • Chaque sous-dossier
  • À quoi servent les fichiers de ce sous-dossier si nécessaire
  • Chaque fichier avec le fichier parent duquel il hérite et une description de l’utilité du fichier
Arborescence du dossier template d'un thème Prestashop
Arborescence du dossier templates tel que présenté dans cet article

[thème]/templates/layouts

Afin de faciliter la compréhension je commence donc par les layouts tels qu’expliqués plus haut.

Nom du fichierlayout-both-columns.tpl

Modèle par défaut des pages, affichant le contenu sur 2 colonnes : barre latérale et contenu.

Nom du fichierlayout-content-only.tpl
Hérite delayouts/layout-both-columns.tpl

Reprend le modèle par défaut en supprimant l’en-tête, le pied de page et les 2 colonnes et n’affichant que le contenu. Ce modèle semble n’être utilisé par Prestashop que dans de rares cas, notamment à la génération de certains PDF à partir de document HTML générés.

Nom du fichierlayout-error.tpl

Modèle par défaut des pages d’erreur.

Nom du fichierlayout-full-width.tpl
Hérite delayouts/layout-both-columns.tpl

Reprend le modèle par défaut en supprimant les 2 colonnes et en n’affichant que le contenu.

Nom du fichierlayout-left-column.tpl
Hérite delayouts/layout-both-columns.tpl

Reprend le modèle par défaut en supprimant la colonne de droite.

Nom du fichierlayout-right-column.tpl
Hérite delayouts/layout-both-columns.tpl

Reprend le modèle par défaut en supprimant la colonne de gauche.

[thème]/templates/

Nom du fichiercontact.tpl
Hérite delayouts/layout-both-columns.tpl

Page affichant le widget de contact par défaut.

Nom du fichierindex.tpl
Hérite de$layout

Page d’accueil.

Nom du fichierpage.tpl
Hérite delayouts/layout-both-columns.tpl

Modèle de base des pages.

[thème]/templates/_partials

Partials principaux du thème, utilisés pour les modèles par défaut : en-tête, pied de page, etc.

Nom du fichierbreadcrumb.tpl

Fil d’Ariane affichant la position actuelle dans le site

Nom du fichierfooter.tpl

Pied de page des pages par défaut.

Nom du fichierform-errors.tpl

Affiche la liste des erreurs retournés par un formulaire donné lors d’une saisie.

Nom du fichierform-fields.tpl

Affiche la liste des champs d’un formulaire donné : champ de texte, liste déroulante, case à cocher, etc.

Nom du fichierhead.tpl

Contenu de la balise <head> des pages par défaut.

Nom du fichierheader.tpl

En-tête des pages par défaut : menu, logo, etc.

Nom du fichierjavascript.tpl

Liste des fichiers javascript à charger dans les pages par défaut.

Nom du fichiernotifications.tpl

Affichage des différents types de notifications en fonction d’une notification donnée.

Nom du fichierpagination.tpl

Affiche la pagination d’une liste d’élément donnés.

Nom du fichierstylesheets.tpl

Liste des feuilles de style CSS à charger dans les pages par défaut.

[thème]/templates/catalog

Dossier utilisé pour tout ce qui concerne votre catalogue de produits : modèles des listes de produits, des catégories, marques et produits eux-mêmes, etc.

Nom du fichierbrands.tpl
Hérite de$layout

Page affichant la liste des marques enregistrées dans le back office.

Nom du fichiermanufacturers.tpl
Hérite decatalog/brands.tpl

Par défaut affiche simplement la liste des marques. Peut éventuellement être utilisé de pair avec une extension permettant de gérer les fabricants.

Nom du fichierproduct.tpl
Hérite de$layout

Page par défaut utilisée pour les produit. Cette page ajoute des éléments meta dans la balise <head> du layout actuel et écrase une bonne partie des vues par défaut.

Nom du fichiersuppliers.tpl
Hérite decatalog/brands.tpl

Reprends la page des marques et affiche la liste des fournisseurs enregistrés dans le shop à la place des marques.

[thème]/templates/catalog/_partials

Partials utilisés pour le catalogue de produits : parties du produit (photo, prix, quantités, etc.), de la recherche, etc.

Nom du fichieractive_filters.tpl

Liste des filtres actifs de la recherche.

Nom du fichierfacets.tpl

Filtres utilisables pour la recherche, lors de l’utilisation de la recherche à facettes.

Nom du fichierproduct-activation.tpl

Uniquement utilisé pour les administrateurs de la boutique connectés, cette vue affiche des notifications spécifiques au produit.

Nom du fichierproduct-add-to-cart.tpl

Affiche le champ de quantité et le bouton Ajouter au panier.

Nom du fichierproduct-additional-info.tpl

Informations complémentaires du produit.

Nom du fichierproduct-cover-thumbnails.tpl

Photos du produit avec possibilité de choisir quelle photo afficher.

Nom du fichierproduct-customization.tpl

Options de personnalisation du produit, affichant des champs dynamiques en fonction des personnalisations définies. Par exemple graver un texte sur un produit.

Nom du fichierproduct-details.tpl

Détails du produit : marque, référence, état du stock et infos de disponibilité, fonctions, références spécifiques et conditions.

Nom du fichierproduct-discounts.tpl

Liste des rabais par quantité commandé, tel que définit dans le produit.

Nom du fichierproduct-images-modal.tpl

Peut-être utilisé pour afficher le zoom sur une image lorsqu’on clique sur la photo du produit.

Nom du fichierproduct-prices.tpl

Détail du prix du produit : prix, rabais, prix unitaire et taxes.

Nom du fichierproduct-variants.tpl

Liste des variations d’un produit.

Nom du fichierproducts-bottom.tpl

Modèle chargé lors d’appels Ajax et permet de spécifier des infos en dessous d’une liste de produits. Non utilisé par défaut.

Nom du fichierproducts-top.tpl

Modèle chargé lors d’appels Ajax et permet de spécifier des infos au dessus du produit. Par défaut affiche les options de tri et la pagination.

Nom du fichierproducts.tpl

Modèle chargé lors d’appels Ajax affichant la liste des produits en fonction de la recherche, filtre, tri, etc.

Nom du fichiersort-orders.tpl

Liste des options de tri et affichage du tri actif.

Nom du fichiervariant-links.tpl

Lien vers les différentes variations de produits affichés sur chaque miniature de produit dans la liste.

[thème]/templates/catalog/_partials/miniatures

Partials utilisés pour afficher les différentes miniatures du shop, les produits, marques, catégories, etc.

Nom du fichierbrand.tpl

Miniature d’une marque affichée sur la page de la liste des marques.

Nom du fichiercategory.tpl

Miniature d’une catégorie affichée sur les pages de catégories parentes.

Nom du fichierpack-product.tpl

Miniature des packs de produits.

Nom du fichierproduct.tpl

Miniature de produit affichée sur les pages de listes de produits, dans les accessoires, etc.

[thème]/templates/catalog/listing

Vues spécifiques à la liste de produit : recherche, article d’une catégorie, meilleures ventes, etc.

Nom du fichierbest-sales.tpl
Hérite decatalog/listing/product-list.tpl

Liste des produits les mieux vendus.

Nom du fichiercategory.tpl
Hérite decatalog/listing/product-list.tpl

Page d’une catégorie affichant tous les produits de cette catégorie en ajoutant dans l’en-tête de la page le nom de la catégorie et la liste des sous-catégories.

Nom du fichiermanufacturer.tpl
Hérite decatalog/listing/product-list.tpl

Page d’un fabricant affichant tous les produits de ce fabricants en ajoutant dans l’en-tête ses informations.

Nom du fichiernew-products.tpl
Hérite decatalog/listing/product-list.tpl

Liste des derniers produits ajoutés.

Nom du fichierprices-drop.tpl
Hérite decatalog/listing/product-list.tpl

Liste des derniers produits ayant subis une baisse de prix.

Nom du fichierproduct-list.tpl
Hérite de$layout

Affiche la liste des produits avec l’en-tête et le pied de page de la liste de produits et les filtres actifs.

Nom du fichiersearch.tpl
Hérite decatalog/listing/product-list.tpl

Résultat d’une recherche, affiche la liste des produits correspondants aux critères demandés.

Nom du fichiersupplier.tpl
Hérite decatalog/listing/product-list.tpl

Page d’un fournisseur affichant tous les produits de ce fournisseur en ajoutant dans l’en-tête ses informations.

[thème]/templates/checkout

Ces vues gèrent l’affichage du panier ainsi que le processus de commande.

Nom du fichiercart-empty.tpl
Hérite decheckout/cart.tpl

Affichage du panier vide.

Nom du fichiercart.tpl
Hérite de$layout

Affichage du panier avec la liste des produits commandés, un récapitulatif du prix, la possibilité d’ajouter un bon de réduction si actif et d’effectuer la commande.

Nom du fichiercheckout-process.tpl

Affiche l’étape actuelle de la commande. Ce modèle est utilisé dans checkout.tpl.

Nom du fichiercheckout.tpl

Affiche le processus de commande.

Nom du fichierorder-confirmation.tpl
Hérite depage.tpl

Page de confirmation lorsqu’une commande a été réalisée.

[thème]/templates/checkout/_partials

Partials utilisés pour des parties des vues du panier et de commande.

Nom du fichieraddress-form.tpl
Hérite decustomer/_partials/address-form.tpl

Formulaire permettant à l’utilisateur de rentrer une adresse (livraison ou facturation).

Nom du fichieraddress-selector-block.tpl

Affiche la liste des adresses disponibles avec possibilités de choisir l’adresse désirée.

Nom du fichiercart-detailed-actions.tpl

Bouton d’action de commande du panier. Affiche également un avertissement et non le bouton si un montant minimum d’achat est défini dans le back office.

Nom du fichiercart-detailed-product-line.tpl

Ligne de produit affichée dans le détail du panier.

Nom du fichiercart-detailed-totals.tpl

Affichage des totaux récapitulatif finaux sur la page du panier (HT, livraison et TTC).

Nom du fichiercart-detailed.tpl

Affiche la liste des produits commandés.

Nom du fichiercart-summary-items-subtotal.tpl

Affiche les sous-total des produits commandés dans la résumé, avant application d’une réduction dans la vue de commande.

Nom du fichiercart-summary-product-line.tpl

Ligne de produit affichée dans le résumé du panier sur la commande.

Nom du fichiercart-summary-totals.tpl

Affichage des totaux récapitulatif finaux sur la page de commande (HT, livraison et TTC).

Nom du fichiercart-summary.tpl

Résumé du panier afficher lors de la commande.

Nom du fichiercart-voucher.tpl

Vue permettant d’appliquer un bon de réduction. Si un bon est actif, l’affiche.

Nom du fichiercustomer-form.tpl
Hérite decustomer/_partials/customer-form.tpl

Formulaire permettant à l’utilisateur de rentrer un mot de passe et de s’inscrire sur le site si ce n’est pas déjà fait.

Nom du fichierfooter.tpl

Pied de page de la vue de commande. Par défaut une vue simplifiée du pied de page.

Nom du fichierheader.tpl

En-tête de la vue de commande. Par défaut une vue simplifiée de l’en-tête de page.

Nom du fichierlogin-form.tpl
Hérite decustomer/_partials/login-form.tpl

Permet au visiteur de se connecter lors de la commande.

Nom du fichierorder-confirmation-table.tpl

Récapitulatif tabulaire affiché sur la page de confirmation de commande avec articles, quantités, prix et totaux

Nom du fichierorder-final-summary-table.tpl
Hérite decheckout/_partials/order-confirmation-table.tpl

Récapitulatif tabulaire affiché à l’étape du paiement dans le modèle order-final-summary.tpl si l’option est activée.

Nom du fichierorder-final-summary.tpl

Résumé final de la commande qui peut être affiché après l’étape du paiement lors du processus de commande. Pour qu’il s’affiche, vous devez activer l’option Afficher le récapitulatif final dans le back-office sous Paramètres de la boutique > Commande.

[thème]/templates/checkout/_partials/steps

Modèle des différentes étapes de la commande. Ces partials héritent tous d’un modèle d’étape vide par défaut.

Nom du fichieraddresses.tpl
Hérite decheckout/_partials/steps/checkout-step.tpl

Etape de sélection / modification de l’adresse à la commande.

Nom du fichiercheckout-step.tpl

Affiche le titre de l’étape actuelle et son contenu. N’est pas utilisé en tant que tel, mais hérité dans les autres vues d’étape de ce dossier.

Nom du fichierpayment.tpl
Hérite decheckout/_partials/steps/checkout-step.tpl

Etape de sélection du mode de paiement.

Nom du fichierpersonal-information.tpl
Hérite decheckout/_partials/steps/checkout-step.tpl

Etape permettant d’entrer ses données personnelle, s’inscrire ou se connecter.

Nom du fichiershipping.tpl
Hérite decheckout/_partials/steps/checkout-step.tpl

Etape permettant de choisir le mode de livraison.

Nom du fichierunreachable.tpl.
Hérite decheckout/_partials/steps/checkout-step.tpl

Vue permettant d’afficher une erreur si l’étape demandée n’existe pas.

[thème]/templates/cms

Ces modèles gèrent les vues utilisées pour les pages appelées « CMS » dans Prestashop. Ces pages sont celles qui ne font pas partie de la boutique et ont pour but de présenter l’entreprise, les services, etc.

Découvrez comment personnaliser l’affichage de certaines pages en créant des modèles dans ce dossier dans cet article.

Nom du fichiercategory.tpl
Hérite depage.tpl

Page spécifique à une catégorie de pages CMS avec la liste des sous-catégories et des pages de cette catégorie.

Nom du fichierpage.tpl
Hérite depage.tpl

Modèle par défaut des pages CMS avec affichage du titre et du contenu.

Nom du fichiersitemap.tpl
Hérite depage.tpl

Page affichant le plan du site.

Nom du fichierstores.tpl
Hérite depage.tpl

Liste des magasins / revendeurs définis dans le back office.

[thème]/templates/cms/_partials

Nom du fichiersitemap-nested-list.tpl

Utilisé sur la page de plan du site, affiche un lien et ses liens enfants de manière récursive.

[thème]/templates/customer

Gère les modèles concernant le compte client : profil, connexion, inscription, etc.

Nom du fichieraddress.tpl
Hérite decustomer/page.tpl

Formulaire permettant d’ajouter / modifier une adresse dans le profil utilisateur.

Nom du fichieraddresses.tpl
Hérite depage.tpl

Affiche la liste des adresses de livraison et facturation avec accès à la modification et possibilité d’ajout.

Nom du fichierauthentication.tpl
Hérite depage.tpl

Vue d’authentification.

om du fichierdiscount.tpl
Hérite decustomer/page.tpl

Liste des bons de réductions disponibles, spécifique à l’utilisateur.

Nom du fichierguest-login.tpl
Hérite depage.tpl

Accès invité aux informations d’une commande en entrant sa référence.

Nom du fichierguest-tracking.tpl
Hérite decustomer/order-detail.tpl

Affiche le détail de a commande demandée lors d’un accès invité.

Nom du fichierhistory.tpl
Hérite decustomer/page.tpl

Liste des commandes de l’utilisateur.

Nom du fichieridentity.tpl
Hérite decustomer/page.tpl

Informations de l’utilisateur (nom, prénom, adresse, e-mail, etc.)

Nom du fichiermy-account.tpl
Hérite depage.tpl

Page de compte utilisateur avec liste des liens (adresses, commandes, etc.).

Nom du fichierorder-detail.tpl
Hérite depage.tpl

Détail d’une commande sélectionnée.

Nom du fichierorder-follow.tpl
Hérite decustomer/page.tpl

Liste des marchandises renvoyées et état de chaque article.

Nom du fichierorder-return.tpl
Hérite decustomer/page.tpl

Détail d’un retour sélectionné.

Nom du fichierorder-slip.tpl
Hérite decustomer/page.tpl

Crédits dont dispose l’utilisateur en cas de commandes annulées ou de retours.

Nom du fichierpage.tpl
Hérite depage.tpl

Modèle de base des pages du compte, affichant dans le pied de page une série de liens vers les options du compte

Nom du fichierpassword-email.tpl
Hérite depage.tpl

Page permettant de renseigner son adresse e-mail pour récupérer un mot de passe oublié

Nom du fichierpassword-infos.tpl
Hérite depage.tpl

Informations du mot de passe, vide par défaut.

Nom du fichierpassword-new.tpl
Hérite depage.tpl

Page de réinitialisation du mot de passe.

Nom du fichierregistration.tpl
Hérite depage.tpl

Vue d’inscription.

[thème]/templates/customer/_partials

Nom du fichieraddress-form.tpl

Formulaire d’ajout / modification d’une adresse.

Nom du fichierblock-address.tpl

Détail d’une adresse avec possibilité de la modifier ou de la supprimer.

Nom du fichiercustomer-form.tpl

Formulaire de modification des informations de l’utilisateur.

Nom du fichierlogin-form.tpl

Formulaire de connexion.

Nom du fichiermy-account-links.tpl

Liens affichés dans le pied de page dans le compte client, avec accès vers les différentes pages du compte.

Nom du fichierorder-detail-no-return.tpl

Détail d’une commande : liste des produits, prix et totaux.

Nom du fichierorder-detail-return.tpl

Détail d’une commande lors d’un renvoi d’article : liste des produits, prix, totaux et état.

Nom du fichierorder-messages.tpl

Vue permettant de voir et d’ajouter des commentaires sur une commande.

[thème]/templates/errors

Modèles permettant d’afficher les différentes pages d’erreurs du shop.

Nom du fichier404.tpl
Hérite depage.tpl

Page d’erreur 404 lorsqu’une page demandée est introuvable.

Nom du fichierforbidden.tpl
Hérite de$layout

Page informant un accès interdit à une page.

Nom du fichiermaintenance.tpl
Hérite delayouts/layout-error.tpl

Affiché lorsque la boutique est en mode maintenance.

Nom du fichiernot-found.tpl

Affiché lorsqu’une recherche ne retourne aucun résultat et s’affiche également sur la page d’erreur 404.

Nom du fichierrestricted-country.tpl
Hérite delayouts/layout-error.tpl

Si l’accès à votre boutique est limité à certains pays, cette page s’affiche en cas d’accès interdit.

[thème]/templates/errors/static

Fichiers HTML statiques renvoyant les erreurs serveur. Comme le rendu dynamique n’est pas disponible en cas d’erreur serveur, les fichiers sont ici statiques.

Nom du fichier500.html

Page HTML statique d’erreur 500 : erreur interne du serveur.

Nom du fichier503.html

Page HTML statique d’erreur 503 : service inaccessible.

Une autre ressource en bonus

La liste complète des modèles de mails & PDF de Prestashop

Il en existe aussi près de 80 modèles modifiables pour les e-mails et PDF de contact ! Téléchargez ma liste détaillée de ces modèles pour l’avoir toujours sous la main.

La liste complète des modèles de mails & PDF de Prestashop
4 commentaires

4 réflexions au sujet de “La liste complète des modèles d’un thème Prestashop”

  1. Cette page est incroyable !! merci beaucoup ça me fait gagner un temps fou !
    Juste une petite question, où puis-je avoir la structure d’une page ? C’est à dire quel est le fichier qui dit ce qu’on met dans quelle page ? Je m’explique. Je voudrais ajouter une colonne dans la page de confirmation de colonne et y placer une image spécifique. Comment puis-je faire pour remplacer le block wishlist qui s’est installé là automatiquement ?
    Mercii

    Répondre
    • Bonjour,

      Merci beaucoup du retour ça fait plaisir !
      Alors pour la structure des pages, il faut se rendre dans le back-office sous Thèmes et logo et là vous avez, sous la liste des thèmes, un bouton Choisir la mise en page. Cela vous permet en fait de définir quel layout (pleine largeur, une colonne à gauche, etc.) utiliser pour les pages du CMS. En modifiant l’information, Prestashop utilisera le layout concerné pour composer la page.

      Ensuite vous pourrez ajouter du contenu soit directement dans le modèle à l’aide d’un block smarty, soit en greffant un module dans la colonne de gauche ou de droite pour afficher votre image.

      Répondre

Laisser un commentaire

Télécharger cette super ressource gratuite !

Entrez votre adresse e-mail ci-dessous et recevez cette ressource dans votre boîte de réception dans quelques secondes.