Table des matières
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 :
Les utilisateurs d'Internet Explorer peuvent également utiliser Firebug lite. |
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 :
/themes..tpl), d'images (.gif), .jpg, .png), d'un ou plusieurs fichiers CSS .css, et parfois même de fichiers JavaScript(.js).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) :
/css contient tous les fichiers CSS./img contient toutes les images./js contient tous les fichiers JavaScript./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.preview.jpg.Les dossiers |
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.
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
Voici une liste non exhaustive de bonnes pratiques à respecter :
.css à part..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.Suivez les étapes ci-dessous pour créer votre propre thème à partir du thème par défaut.
/themes dans votre installation de PrestaShop, et créer une copie du dossier ../themes/prestashop/ par défaut.
/themes/MyStoreTheme/), trouvez le dossier /css.global.csss et modifiez-le selon vos besoins. Vous n'êtes limité que par votre propre créativité – et votre connaissance de CSS.maintenance.css, situé dans le même dossier, contrôle la mise en page de la page du Mode Maintenance./img du nouveau thème (par exemple, /themes/MyStoreTheme/img).
|
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.
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
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.
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.
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. |
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"> |
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 :
