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.
...
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
...