Caractéristiques d'un thème front-office
PreviousIntégrer du contenu dans une page à l'aide de hooksNextCaractéristiques d'un thème back-office
Last updated
Was this helpful?
Last updated
Was this helpful?
Contenu
Un thème front-office pour PrestaShop est conçu avec les dossiers standards suivants, eux-mêmes contenus dans le dossier du thème :
/cache : contient les fichiers temporaires qui sont générés et utilisés pour soulager la charge du serveur.
/css : contient les feuilles de style.
/img : contient les images du thème.
/js : contient les fichiers JavaScript du thème.
/lang : contient des sous-dossiers, un pour chaque langue.
/mobile : contient la version mobile du thème.
À noter : si vous n'avez pas le temps de construire une version mobile de votre thème, vous pouvez dans un premier temps utiliser celui du thème par défaut, en copiant son dossier /mobile dans le dossier de votre thème.
Le dossier principal du thème doit avoir un nom unique. Il a doit être placé dans le dossier /themes de PrestaShop pour pouvoir fonctionner.
Les dossiers suivants ne sont pas des dossiers du thème, mais de PrestaShop. Il est important de les parcourir pour complètement personnaliser votre installation de PrestaShop.
/mails : vous devriez modifier les templates de mail, et les faire correspondre au style de votre thème.
/modules : vous pouvez changer les templates propres à vos modules, afin de mieux les fondre dans votre thème.
/pdf : vous devriez modifier les templates de facture, de bon d'achat, etc., afin qu'il qu'ils correspondent au style de votre thème.
Lorsque le back-office affiche la page de sélection de thème, situés dans la page de préférences "Thèmes", PrestaShop affiche une image précise. Les caractéristiques de fichier sont :
Nom du fichier : preview.jpg
Dimensions : 180*202 pixels
Format : JPEG (ne pas utiliser un gif ou un png).
Il faut vous efforcer de rendre cette image très facilement reconnaissable : la meilleure manière d'attirer le regard de l'administrateur consiste à faire une capture d'écran de la page d'accueil d'une boutique qui utilise ce thème.
Même le thème par défaut a sa propre image de prévisualisation.
Les fichiers de traduction sont stockés dans le dossier /lang.
Chaque fichier doit être nommé avec le code ISO 639-1 de sa langue : par exemple, pour le français, utiliser fr.php.
Toutes les chaînes de texte de votre thème doivent être encapsulées dans une fonction Smarty, comme ceci :
Cela permettra à n'importe qui de traduire le thème dans sa propre langue, à l'aide de l'outil de traduction interne, qui se trouve dans la page "Traductions" du menu "Localisation". Dans la section "Modifier les traductions", choisissez "Traductions du front-office" dans le menu déroulant, puis cliquez sur le drapeau de la langue dans laquelle vous voulez traduire les chaînes de texte. Toutes les chaînes de texte du front-office s'afficheront alors.
L'illustration suivante présente comment les données sont transmises depuis le coeur de PrestaShop à son thème. Il utilise la méthode l() pour présenter comment le thème affiche son texte dans la langue choisie, s'il a été traduit au préalable.
L'outil CCC de PrestaShop met en cache les fichiers CSS et JavaScript du thème dans un dossier spécifique : /cache, directement dans le dossier principal du thème.
Les fichiers CSS mis en cache sont regroupés dans un même fichier par page et par média.
Les images du thème sont stockées dans le dossier /img, situé dans le dossier principal du thème.
Dans l'optique d'améliorer la lisibilité, le dossier /img contient des sous-dossiers pour certains groupes d'images, comme /icons ou /jquery.
Tous les fichiers CSS du thème sont regroupés dans le dossier /css (sauf quand ils sont mis en cache).
Un thème dispose généralement d'un fichier CSS pour toutes les règles de style communes à toutes les pages. Ce fichier devrait être nommé global.css.
Chaque contrôleur dispose de son propre fichier CSS, qui contient les règles de style qui lui sont propres. Par exemple, pour la page produit, gérée par le contrôleur Product, le thème par défaut utilise le fichier product.css.
Tous les fichiers JavaScript devraient être regroupés dans le dossier /js (sauf quand il est mis en cache).
Au contraire des règles CSS, il n'y a pas de fichier JavaScript commun.
Certains contrôleurs disposent de leurs propres fichiers JavaScript, mais pas tous. Chacun a ses propres besoins, et donc certains ont besoin d'un fichier CSS, d'autres non.
Vous pouvez (et devriez) fournir une version mobile de votre thème. PrestaShop a été conçu pour automatiquement utiliser le thème contenu dans le sous-dossier /mobile du thème dans les situations où la boutique est affichée sur un support mobile.
Tous les fichiers du thème mobiles doivent être dans le dossier /mobile, lui-même situé dans le dossier du thème.
Le sous-dossier /mobile dispose de son propre jeu de fichiers CSS, JavaScript et image, respectivement stockés dans les dossiers /mobile/css, /mobile/js et /mobile/img.
Vous devez vous efforcer de fournir vos propres modèles de mails et de fichiers PDF, et faire en sorte qu'ils correspondent au style du thème. C'est une forme de surcharge.
La manière la plus simple de se lancer consiste à reprendre le dossier /mails à la racine de PrestaShop, et de le copier en sous-dossier du thème que vous créez. Ceci fait, modifiez les fichiers pour qu'ils correspondent au style de votre thème.
De la même manière, vous pouvez copier le dossier /pdf à la racine de PrestaShop dans le dossier du thème. Ceci fait, modifiez les fichiers pour qu'ils correspondent au style de votre thème.
Notez que les fichiers de mails sont dupliqués sur autant de sous-dossiers qu'il y a de langues. La traduction doit se faire avec l'outil de traduction de PrestaShop.
Vous pouvez surcharger les modèles par défaut de manière sélective : si l'un des fichiers manque dans votre version du dossier /mails ou du dossier /pdf, PrestaShop utilisera son équivalent du dossier par défaut.
Les modules de PrestaShop peuvent avoir leurs propres templates, dans leurs dossiers /views/templates/front, /views/templates/admin et /views/templates/hooks.
Par exemple, le module Bankwire dispose des fichiers template suivants :
/modules/bankwire/views/templates/front/payment_execution.tpl
/modules/bankwire/views/templates/hook/payment.tpl
/modules/bankwire/views/templates/hook/payment_return.tpl
Pour surcharger le fichier template d'un module, votre thème doit avoir un fichier ayant exactement le même nom et ayant exactement le même chemin de fichier, mais dans son propre dossier. Par exemple, pour les trois fichiers du module Bankwire ci-dessus, les chemins des fichiers seraient :
/themes/my_theme/modules/bankwire/views/templates/front/payment_execution.tpl
/themes/my_theme/modules/bankwire/views/templates/hook/payment.tpl
/themes/my_theme/modules/bankwire/views/templates/hook/payment_return.tpl
Vous pouvez surcharger les fichiers template, les fichiers CSS et le fichiers JavaScript des modules installés en suivant ce principe : le même nom de fichier, le même chemin du fichier dans le dossier du thème.
