Créer un thème

Table des matières

/*<![CDATA[*/ div.rbtoc1597395627512 {padding: 0px;} div.rbtoc1597395627512 ul {list-style: disc;margin-left: 0px;} div.rbtoc1597395627512 li {margin-left: 0px;padding-left: 0px;} /*]]>*/

Créer un thème

Créer un thème

Le système de thème de PrestaShop est basé sur un moteur de modèle/template, appelé Smarty, qui permet aux web-designers et développeurs de créer facilement leur propre thème, avec peu de connaissances techniques.

Tous les designers et développeurs web devraient utiliser les outils suivants :

Firefox: Firebug est une extension gratuite permettant de facilement comparer et débuguer du CSS et son résultat.
Firefox/Chrome: Web Developer ajoute de nombreux outils pour développeurs, directement dans le navigateur.
Safari/Chrome: activer le Web Inspector.
Opera: Dragonfly, un environnement de débogage complet.
Internet Explorer 8+: les Developer Tools sont disponible depuis le menu Outils.

Les utilisateurs d'Internet Explorer peuvent également utiliser Firebug lite.

Concepts et informations techniques

Comment fonctionne un thème PrestaShop

Un thème PrestaShop est un ensemble de fichiers que vous pouvez modifier afin de personnaliser la mise en page de votre boutique.

Voici quelques points importants :

Tous les thèmes ont leurs fichiers dans le dossier racine /themes.
Chaque thème dispose de son propre sous-dossier, dans le thème racine.
Chaque thème est fait de fichiers modèles (.tpl), d'images (.gif), .jpg, .png), d'un ou plusieurs fichiers CSS .css, et parfois même de fichiers JavaScript(.js).
Chaque thème a un fichier preview.jpg dans son dossier racine, permettant au propriétaire du site d'avoir un aperçu du thème directement depuis le back-office, et donc de choisir son thème en connaissance de cause.

Voici un aperçu de l'arborescence de fichiers d'un thème PrestaShop (ici, le thème par défaut) :

Le dossier /css contient tous les fichiers CSS.
Le dossier /img contient toutes les images.
Le dossier /js contient tous les fichiers JavaScript.
Le dossier /lang contient toutes les traductions du thème. Ses droits d'accès devraient être à CHMOD 666 (par exemple), afin que l'outil de traduction puisse y avoir accès.
La racine du dossier contient seulement les fichiers TPL (Smarty), ainsi que le fichier preview.jpg.

Les dossiers /css, /img et /js sont facultatifs, un thème peut parfaitement fonctionner sans, il vous revient de les créer selon vos besoins.

Gérer les traductions

Toutes les chaînes de vos thèmes doivent être comprises dans une fonction Smart, comme suit :

{l s='My Text'}

Cela permettra à n'importe qui de traduire le thème dans sa langue propre, à l'aide de l'outil interne de traduction, que vous pouvez trouver dans le back-office de PrestaShop, sous l'onglet "Outils" et son sous-onglet "Traduction". Dans la section "Modifier les traductions", utilisez le menu déroulant, choisissez "Traduction front-office", puis cliquez sur le drapeau de la langue dans laquelle vous voulez traduire les chaînes. Toutes les chaînes du front-office s'affichent alors.

Transmettre des informations (données) à un thème PrestaShop

Le schéma suivant explique comment les données sont transmises depuis le coeur de PrestaShop jusqu'à son thème. A l'aide de la méthode l(), le thème peut afficher le texte dans la langue, si la chaîne a été traduite auparavant

Best practices

Voici une liste non exhaustive de bonnes pratiques à respecter :

Ne mélangez jamais du code XHTML et du code PHP.
Ne mélangez jamais du code XHTML et du code CSS, placez le code dans un fichier .css à part.
N'effectuez jamais de requête SQL dans un contrôleur PHP (fichiers .php à la racine de PrestaShop), privilégiez l'utilisation des méthodes existantes dans les classes PHP et/ou créez de nouvelles méthodes dans ces classes.
Validez votre code XHTML et votre code CSS grâce aux validateurs du W3C : XHTML validator, CSS validator.
Vérifiez toujours si une méthode n'existe pas déjà dans les classes.
Ne modifiez pas les fichiers du cœur de PrestaShop, développez un maximum sous forme de modules afin de faciliter les mises à jour.
Respectez les normes de codes pour un code lisible et clair, facilement maintenable.
Commentez votre code, en anglais.
Lorsque vous effectuez des corrections, mettez la boutique en maintenance via le back-office de PrestaShop.
Utilisez les navigateurs Firefox, Google Chrome ou Opera, et incitez les gens autour de vous à en faire autant.
Autant que possible, utilisez des CSS sprites (article suivant).

Personnaliser le thème par défaut

Suivez les étapes ci-dessous pour créer votre propre thème à partir du thème par défaut.

1. Copier le thème par défaut

Trouvez le dossier /themes dans votre installation de PrestaShop, et créer une copie du dossier ../themes/prestashop/ par défaut.
Renommez cette copie.

2. Modifier la feuille CSS

Dans le dossier du thème renommé (par exemple, /themes/MyStoreTheme/), trouvez le dossier /css.
Ouvrez le fichier global.csss et modifiez-le selon vos besoins. Vous n'êtes limité que par votre propre créativité – et votre connaissance de CSS. _A noter : les fichiers maintenance.css, situé dans le même dossier, contrôle la mise en page de la page du Mode Maintenance.
Les images ajoutées ou modifiées doivent être placées dans le dossier /img du nouveau thème (par exemple, /themes/MyStoreTheme/img).

Conseils de l'équipe de PrestaShop

Autant que possible, utilisez des CSS plutôt que du HTML (par exemple, n'utilisez des tableaux que pour les données tabulaires, pas pour la mise en page).
Validez votre code HTML et CSS avec les outils du W3C : HTML validator, CSS validator.
Réduisez la taille de vos images en les compressant. L'outil SmushIt de Yahoo! vous sera pour cela très utile.
Testez votre thème sur de nombreux navigateurs, pas seulement Internet Explorer. Mozilla Firefox, les navigateurs WebKit (Apple Safari, Google Chrome) et Opera sont tous à prendre en compte. Mais avant tout, vous devez vérifier que tout fonctionne bien sur les navigateurs les plus utilisés par vos visiteurs. Si votre site n'a pas encore été lancée, regardez les statistiques de StatCounter pour votre pays ; par exemple, voici les statistiques pour la France, de 2010 à 2011.
Les noms de fichiers doivent être en minuscule.
Les textes et le logo de la page d'accueil peuvent être modifier directement depuis le back-office : onglet "Modules", sous-onglet "Thèmes".-tab.

3. Créer une image de prévisualisation

Une fois que vous avez personnalisé votre thème, vous devez placer un fichier représentant le thème, appelé preview.jpg, dans le thème à la racine (par exemple /themes/MyStoreTheme. Ce fichier doit être une image .jpg en 100*100 pixels.

4. Testez votre thème

Allez dans l'onglet "Préférences" du back-office son sous-onglet "Apparences" et sa section "Thèmes" (en bas de page)
Choisissez le nouveau thème et cliquez sur enregistrer.

Partagez vos thèmes !

Présentez votre dur labeur, recevez des commentaires et consolidez votre réputation en partageant votre thème dans la section thème de notre Forum !

Vous pouvez également vendre votre thème aux utilisateurs de PrestaShop au travers du site Addons

Créez votre propre thème

Le thème par défaut de PrestaShop

Le thème par défaut a été créé dans un style neutre, et peut ainsi servir pour n'importe quel type de boutique, quel que soit son secteur d'activité. De plus, ce thème fait de son mieux pour se conformer aux standards du Web tels qu'établis par le W3C, et a été optimisé pour s'afficher parfaitement dans tous les les principaux navigateurs.

Ceci étant, vous pourriez vouloir un thème qui vous ressemble plus ou intègre mieux l'esprit de votre activité, plutôt que d'avoir le même thème que des millliers d'autres boutiques. C'est pour ce type de besoin que vous pouvez concevoir votre propre thème – et la manière la plus rapide est d'utiliser le thème par défaut comme fondation solide au-dessus de laquelle faire jouer votre inspiration.

Les premiers pas de votre propre thème

Tous les thèmes actuellement installés se trouvent dans le dossier /themes, où le vôtre propre se trouvera également bientôt. Le thème par défaut est situé dans le sous-dossier /themes/prestashop. C'est à partir de ce dossier que vous construirez votre propre thème.

Cela étant, nous vous engageons fortement à ne pas modifier directement les fichiers du thème, pour la simple raison que cela pourrait introduire de nouveaux bugs, sans pouvoir revenir en arrière. Vous devez conserver le thème par défaut intact, afin de pouvoir le remettre en place si vous découvrez un problème dans votre propre thème.

La première étape consiste donc à faire une copie du sous-dossier /prestashop, et donner une nom unique à cette copie, par exemple le nom de votre futur thème ou de votre site. Ainsi, le thème par défaut reste intact.

Arborescence des fichiers d'un thème

Lorsque vous créez un thème, vous devenez connaître dès le début toutes les différentes pages et indications que votre thème doit gérer correctement, afin de proposer une expérience complète à vos utilisateurs. Ici encore, le thème par défaut est une bonne base d'inspiration, à la fois par la variété de fichiers qu'il comprend et de comportement pour lesquels il a été conçus, mais également pour son code, dans lequel vous pouvez vous plonger afin de mieux comprendre comment un thème fonctionne.

Fichier ou dossier

Description

preview.jpg

Image utilisée en tant qu'aperçu dans la section "Thème" du sous-onglet "Apparence" de l'onglet "Préférences". La présence de cette image est obligatoire, sinon le thème ne peut être sélectionné. De toute évidence, l'image devrait donner une image de l'aspect du thème, et non afficher le logo du designer ou son nom...

404.tpl

Page affichée lorsque la page demandée n'est pas trouvée (erreur 404).

address.tpl

Page d'ajout ou de modification d'une adresse client.

addresses.tpl

Page listant les adresses d'un client.

authentication.tpl

Page d'identification et de création de compte.

best-sales.tpl

Page listant les meilleures ventes.

breadcrumb.tpl

Chemin de navigation (fil d'Ariane).

category.tpl

Page listant les produits au sein d'une catégorie.

category-tree-branch.tpl

Utilisé uniquement pour le bloc Catégories.

category-cms-tree-branch.tpl

...

cms.tpl

Pages informatives (onglet "Outil" > "CMS" du back-office).

contact-form.tpl

Page du formulaire de contact.

discount.tpl

Page listant les bons de réduction d'un client.

errors.tpl

Est appelé par l'ensemble des pages. Affiche les erreurs.

footer.tpl

Pied de page.

guest-tracking.tpl

Utilisé quand un visiteur n'a pas de compte identifié sur le site, mais souhaite que sa commande soit suivie. Il doit ainsi créer un compte ou se connecter.

header.tpl

En-tête de page.

history.tpl

Page listant les commandes d'un client.

identity.tpl

Page de modification des informations personnelles d'un client.

index.php

Fichier vide. Évite que les visiteurs voient le contenu du dossier.

index.tpl

Page d'accueil.

maintenance.tpl

Page de mise en maintenance du site.

manufacturer.tpl

Page listant les fabricants.

manufacturer-list.tpl

Page listant les produits d'un fabricant.

my-account.tpl

Page d'accueil du compte d'un client.

new-products.tpl

Page listant les produits dernièrement ajoutés.

order-address.tpl

Page du processus de commande : Étape 1 – choix des adresses (livraison, facturation).

order-carrier.tpl

Page du processus de commande : Étape 2 – choix du mode de livraison.

order-confirmation.tpl

Page de confirmation de commande (après paiement).

order-detail.tpl

Page de détail d'une commande d'un client.

order-follow.tpl

Page de demande d'un retour produit pour un client.

order-opc.tpl

...

order-opc-new-account.tpl

...

order-payment.tpl

Page du processus de commande : Étape 3 – choix du mode de paiement.

order-return.tpl

Page de détail d'un retour d'un client.

order-slip.tpl

Page listant les avoirs d'un client.

order-steps.tpl

Barre d'évolution du processus de commande.

pagination.tpl

Est appelé par l'ensemble des pages listant des produits. Boutons permettant de changer de page dans une liste de produits.

password.tpl

Page de changement de mot de passe d'un client.

prices-drop.tpl

Page listant les promotions.

product.tpl

Page de détail d'un produit.

product-list.tpl

Est appelé par l'ensemble des pages listant des produits. Liste des produit.

product-sort.tpl

Est appelé par l'ensemble des pages listant des produits. Menu permettant de filtrer une liste de produits.

products-comparison.tpl

...

scenes.tpl

Page de détail d'une scène au sein d'une catégorie de produits.

search.tpl

Page listant les résultats d'une recherche.

shopping-cart.tpl

Page listant les produits dans le panier d'un client.

shopping-cart-product-line.tpl

Page de détail d'une ligne du panier.

sitemap.tpl

Page de plan du site.

store_infos.tpl

...

stores.tpl

...

supplier.tpl

Page listant les produits d'un fournisseur.

supplier-list.tpl

Page listant les fournisseurs.

thickbox.tpl

Page de zoom d'une photo d'un produit.

/cache

...

/css

Contient les feuilles de style du thème. Le fichier global.css concerne la mise en forme de la majeure partie du site. A moins d'être un utilisateur averti, il est conseillé de laisser les fichiers d'origine.

/img

Contient les images du thème. Remplacez les images adéquates par vos créations personnelles. A moins que vous ne soyez un utilisateur averti, il est conseillé de laisser les fichiers d'origine.

/js

Scripts JavaScript utilisés dans le thème. A moins que vous ne soyez un utilisateur averti, il est conseillé de laisser les fichiers d'origine.

/lang

Fichiers de traduction. Ces fichiers sont générés par le back-office et leur contenu doit être modifié depuis l'outil de traduction : onglet Outils, sous-onglet "Traductions", section Modifier les traductions.

Quelques conseils

Firebug, Dragonfly et autres : vous pouvez grandement simplifier votre travail en tant que développeur front-end en utilisant les bons outils, pourvu que vous testiez votre création dans un navigateur moderne disposant de tels outils, sous la forme de module (FireBug pour Firefox) ou directement intégré au navigateur (Dragonfly pour Opera, le Web Inspector de Chrome & Webkit).

JavaScript: tous les fichiers JavaScript doivent être placés dans le dossier /js du thème.

Fichier preview.jpg : une fois que votre mise en page est terminée, vous pouvez créer le fichier de prévisualisation. Faites une capture d'écran et réduisez-la à 180 pixels de large afin d'en faire l'image preview.jpg par défaut. Vous pouvez utiliser l'outil de capture fourni par votre système d'exploitation (sous Windows, Outil Capture ; sous OS X, combinaison de touches Cmd+Shift+4), ou installer une extension pour votre navigateur, telle que FireShot ou Screengrab pour Firefoxtps://addons.mozilla.org/en-US/firefox/addon/screengrab/].

Navigation à facettes : pour qu'un thème soit compatible avec la navigation à facettes, le fichier /themes/nomdutheme/product-list.tpl doit avoir sa zone de liste de produits encapsulée dans une balise avec "product_list" comme id ; autrement, la navigation à facettes ne mettra pas à jour la liste des produits.

<div id="product_list">

...or...

<ul id="product_list">

Intégration : où vont les points d'accroche et les modules

L'un des aspects principaux de l'intégration de contenu dans PrestaShop consiste à savoir où le contenu sera affiché, et donc où sont situés les différents points d'accroche et modules.

Voici une représentation graphique de leurs emplacement, pour chaque page. Vous y trouverez :