Table des matières
Table of Contents | ||
---|---|---|
|
...
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.
...
Toutes les chaînes de vos thèmes doivent être comprises dans une fonction Smart, comme suit :
Code Block |
---|
{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 la le back-office de PrestAshopPrestaShop, 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.h3
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
...
- 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).
- Si vous souhaitez remercier l'équipe de PrestaShop pour son dur labeur, n'hésitez pas à faire un donc, ou à en parler autour de vous !
Schéma SQL
Vous pouvez télécharger le schéma de PrestaShop 1.4 au format PNG, ou au format original (vous devrez télécharger MySQL Workbench pour le lire).
Personnaliser le thème par défaut
...
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 de s des pages. Affiche les erreurs. | |
footer.tpl | Pied de page. | |
guest-tracking.tpl | Used when a visitor has no know account on the site, but wants his order to be tracked – and therefore needs to create an account or log in. | 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 | Blank file, prevents visitors to view the content of the folder. | 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 de s 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, Dragonyfly 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).
...
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.
Code Block |
---|
<div id="product_list">
...or...
<ul id="product_list">
|
Intégration : où vont les points d'accroche et les modules
...