LogoLogo
Homepage
  • Documentations for PrestaShop 1.5
  • English documentation 1.5
    • About PrestaShop 1.5
    • New features in PrestaShop 1.5
    • Getting Started
      • What you need to get started
      • Installing PrestaShop
      • Installing PrestaShop using the command line
      • Updating & Uninstalling
      • Misc. information
    • Updating PrestaShop
      • Automatic update
      • Manual update
      • Making and restoring your own backup
      • In case of issues
    • User Guide
      • Training
      • Customizing your shop
      • Browsing the front-office
      • Connecting to the PrestaShop back-office
      • First steps with PrestaShop 1.5
      • Adding Products and Product Categories
      • A Look Inside the Catalog
      • Managing Orders
      • Managing Customers
      • Creating Price Rules and Vouchers
      • Managing Shipping
      • Understanding Local Settings
      • Managing Modules and Themes
      • Making the Native Modules Work
      • Understanding the Preferences
      • Understanding the Advanced Parameters
      • Administering the Back-Office
      • Understanding Statistics
      • Advanced Stock Management
      • Managing Multiple Shops
    • Developer Guide
      • Developer tutorials
        • Using the PrestaShop Web Service
          • Webservice one-page documentation
          • Chapter 1 - Creating Access to Back Office
          • Chapter 2 - Discovery - Testing access to the web service with the browser
          • Chapter 3 - First steps - Access the Web service and list client
          • Chapter 4 - Retrieve Data - Retrieving a Client
          • Chapter 5 - Modification - Update client
          • Chapter 6 - Creation - Remote Online Form
          • Chapter 7 - Removal - Remove customer accounts from the database
          • Chapter 8 - Advanced Use
          • Chapter 9 - Image management
          • Chapter 10 - Price management
          • Cheat-sheet - Concepts outlined in this tutorial
          • Web service reference
        • Helpers
          • HelperForm
          • HelperOptions
          • HelperList
          • Using helpers to overload a back-office template
        • New Developers Features In PrestaShop 1.5
        • Using the Context Object
        • DB class best practices
        • Public and overloadable methods
        • Overriding default behaviors
        • Using addJquery(), addJqueryPlugin() and addJqueryUI()
        • Handling special characters in links
        • Auto-updating modules
        • Front-Office Controllers
        • Controllers correspondence table
        • Specifics of multistore module development
        • Developer tips and tricks
        • PrestaShop's developer tools
        • Using the backward compatibility toolkit
      • Fundamentals
      • Coding Standards
      • Setting up your local development environment
      • Diving into PrestaShop Core development
      • Creating a PrestaShop module
      • Creating a front-office module
      • Creating a module with both front-end and back-end controllers
      • Hooks in PrestaShop 1.5
      • Translations in PrestaShop 1.5
      • How to use the Forge to contribute to PrestaShop
      • How to write a commit message
      • Contributing code to PrestaShop
    • Designer Guide
      • Theme development fundamentals
      • Integrating content in a page using hooks
      • Characteristics of a front-office theme
      • Characteristics of a back-office theme
      • Creating your own theme
      • Theme templates and Smarty
      • Using jQuery and Ajax
      • Best practices
      • Designer tutorials
        • Changes in version 1.5 which impact theme development
        • Changing a 1.4 theme to support gift products
        • Implementing layered navigation in a theme
    • System Administrator Guide
    • Merchant's Guide
      • Our advices
      • Sample price rules
    • FAQ
      • Using PrestaShop with WordPress
    • Troubleshooting
  • Documentation française 1.5
    • À propos de PrestaShop 1.5
    • Nouveautés de PrestaShop 1.5
    • Guide de démarrage
      • Ce dont vous avez besoin
      • Installer PrestaShop
      • Installer PrestaShop en ligne de commande
      • Mettre PrestaShop à jour
      • Informations diverses
    • Guide de mise à jour
      • Mise à jour automatique
      • Mise à jour manuelle
      • Faire une sauvegarde et la restaurer
      • En cas de problème
    • Guide de l'utilisateur
      • Formations
      • Personnaliser votre boutique
      • Parcourir le front-office
      • Se connecter au back-office de Prestashop
      • Premiers pas avec PrestaShop 1.5
      • Ajouter des produits et des catégories de produits
      • Un aperçu du catalogue
      • Gérer les commandes
      • Gérer les clients
      • Mettre en place des promotions
      • Gérer les transporteurs
      • Comprendre les réglages locaux
      • Gérer les modules et les thèmes
      • Configurer les modules natifs
      • Comprendre les préférences
      • Comprendre les paramètres avancés
      • Administrer le back-office
      • Comprendre les statistiques
      • Gestion avancée des stocks
      • Gérer plusieurs boutiques
    • Guide du développeur
      • Fondamentaux
      • Norme de développement
      • Mettre en place votre environnement de développement
      • Plonger dans le développement PrestaShop
      • Créer un module PrestaShop
      • Les hooks de PrestaShop 1.5
      • Les traductions dans PrestaShop 1.5
      • Comment utiliser la Forge pour contribuer à PrestaShop
      • Comment écrire un descriptif de modification
    • Guide de l'intégrateur
      • Fondamentaux de la création de thème
      • Intégrer du contenu dans une page à l'aide de hooks
      • Caractéristiques d'un thème front-office
      • Caractéristiques d'un thème back-office
      • Template de thème et Smarty
      • Utiliser jQuery et Ajax
      • Bonnes pratiques
    • Guide de l'administrateur système
    • Guide du vendeur
      • Exemples de promotions
      • Nos bons conseils
    • Questions fréquentes
    • Dépannage
  • Documentación española 1.5
    • Acerca de PrestaShop 1.5
    • Introducción
      • Lo que necesita para empezar
    • Guía del usuario
      • Formación
      • Personalización de su tienda
      • Exploración del front-office
      • Conexión al back-office de PrestaShop
      • Primeros pasos con PrestaShop 1.5
      • Añadir productos y categorías de productos
      • Una mirada interna al catálogo
      • Gestionar pedidos
      • Gestionar clientes
      • Crear reglas de precios y cupones
      • Gestionar el transporte
      • Comprender la Configuración Local
      • Gestionar módulos y temas
      • Configurar los Módulos Nativos
      • Comprender las Preferencias
      • Comprender los Parámetros avanzados
      • Administrar el Back-Office
      • Comprender las estadísticas
      • Gestión avanzada de stock
      • Gestionar varias tiendas
    • Guía del Desarrollador
      • Tutoriales para Desarrolladores
        • Uso del Web Service de Prestashop
          • Capítulo 1 - Creación de acceso al Back Office
  • Документация на русском языке 1.5
    • Информация о PrestaShop 1.5
    • Новые функции в PrestaShop 1.5
    • Приступая к работе
      • Что нужно чтобы приступить к работе
      • Установка PrestaShop
      • Установка PrestaShop при помощи командной строки
      • Обновление и удаление PrestaShop
      • Прочая информация
    • Руководство пользователя
      • Обучение
      • Настройка вашего магазина
      • Изучение публичной части сайта
      • Бэк-офис PrestaShop
      • Первые шаги в PrestaShop 1.5
      • Добавление товаров и товарных категорий
      • Внутри каталога
      • Управление заказами
      • Работа с клиентами
      • Создание правил ценообразования корзины и ваучеров
      • Управление доставкой
      • Ориентация в локальных настройках
      • Управление модулями и темами
      • Настойка встроенных модулей
      • Ориентация в настройках
      • Ориентация в расширенных параметрах
      • Администрирование Back-Office
      • Ориентация в статистике
      • Расширенное управление запасами
      • Управление мультимагазином
Powered by GitBook
On this page
  • Fondamentaux de la création de thème
  • Concepts
  • Architecture technique de PrestaShop
  • Concepts et informations techniques

Was this helpful?

  1. Documentation française 1.5
  2. Guide de l'intégrateur

Fondamentaux de la création de thème

PreviousGuide de l'intégrateurNextIntégrer du contenu dans une page à l'aide de hooks

Last updated 4 years ago

Was this helpful?

Contenu

Fondamentaux de la création de thème

Concepts

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 :

Ils offrent de nombreux outils, parmi lesquels un outil de parcours du DOM, un éditeur CSS en direct, un inspecteur du réseau, etc., et apportent une aide essentielle lorsqu'il s'agit de déboguer du code HTML, CSS, JavaScript, et même les requêtes Ajax.

Architecture technique de PrestaShop

PrestaShop est basé sur une architecture 3-tiers :

  • Object/données. L'accès à la base de données se fait par le biais des fichiers du dossier /classes.

  • Contrôle des données. Le contenu envoyé à l'utilisateur est vérifié par les fichiers du dossier racine.

  • Apparence. Tous les fichiers du thème sont dans le dossier /themes.

Notre équipe de développeurs à choisi de ne pas utiliser de framework PHP, tel que Zend Framework, Symfony ou CakePHP, afin d'obtenir une meilleure lisibilité du code, et donc de permettre des modifications plus rapides.

Cela permet également d'obtenir de meilleures performances, étant donné que le logiciel n'est fait que de lignes de code qu'il utilise effectivement, et qu'il ne contient pas un lit de bibliothèques génériques ajoutées.

Une architecture 3-tiers a de nombreux avantages :

  • Il est plus facile de lire le code du logiciel.

  • Les développeurs peuvent ajouter et corriger le code plus rapidement.

  • Les designers et intégrateurs HTML peuvent travailler en toute sécurité dans le dossier /themes sans avoir à comprendre ou même lire une seule ligne de code PHP.

  • Les développeurs peuvent travailler sur des données et modules supplémentaires que les intégrateurs HTML peuvent exploiter.

Modèle

Un modèle représente le comportement de l'application : traitement des données, interaction avec la base de données, etc.

Il décrit ou contient les données qui ont été traitées par l'application. Il gère ces données, et garantit leur intégrité.

Vue

Une vue est l'interface avec laquelle l'utilisateur interagit.

Son premier rôle est d'afficher les données qui ont été fournies par le modèle. Son second rôle est de gérer toutes les actions en provenance de l'utilisateur (clic de la souris, sélection d'un élément, boutons, etc.) et d'envoyer ces données au contrôleur.

La vue ne fait aucun traitement : elle ne fait qu'afficher le résultat d'un traitement réalisé par le modèle, et interagit avec l'utilisateur.

Contrôleur

Le contrôleur gère la synchronisation des évènements entre le modèle et la vue, et met les deux à jour en fonction des besoins. Il reçoit tous les évènements utilisateur, et déclenche les actions à réaliser.

Si une action a besoin de modifier des données, le contrôleur "demandera" au modèle de modifier ces données, et en retour le modèle notifiera la vue que les données ont été changées, afin que la vue puisse se mettre à jour.

Concepts et informations techniques

Bonnes pratiques

Voici une liste non exhaustive de bonnes pratiques à respecter :

  1. Ne mélangez jamais du code XHTML et du code PHP ; utiliser les balises Smarty pour gérer votre contenu dynamique.

  2. Ne mélangez jamais du code XHTML et du code CSS, placez le code dans un fichier .css à part.

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

  4. Vérifiez toujours si une méthode n'existe pas déjà dans les classes disponibles.

  5. Ne modifiez pas les fichiers du coeur de PrestaShop ; développez au maximum sous forme de modules afin de faciliter les mises à jour.

  6. Respectez les normes de codes pour un code lisible et clair, facilement maintenable.

  7. Commentez votre code, en anglais.

  8. Lorsque vous effectuez des corrections, mettez la boutique en maintenance via le back-office de PrestaShop.

  9. Utilisez les navigateurs Firefox, Google Chrome, IE9 ou Opera, et incitez les gens autour de vous à en faire autant.

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.

Dossiers propres aux thèmes

En tant que développeur de thèmes, il y a des dossiers auxquels vous devez faire attention :

  • /modules : c'est ici que se trouvent tous les modules. Un module peut interagir avec des fichiers template, qui redéfinissent des parties du thème.

  • /themes : c'est ici que se trouvent tous les thèmes. Le thème par défaut de la version 1.5 se trouve dans le dossier /default (celui de la version 1.4 était dans /prestashop).

  • /mails : c'est ici que se trouvent tous les modèles d'e-mails. Ces modèles devraient correspondre autant que possible au style et au design du thème principal. Chaque sous-dossier contient des modèles par langue.

  • /img : c'est ici que se trouvent toutes les images de la boutique. Les images propres à un thème se trouvent dans le dossier du thème.

  • /pdf : c'est ici que se trouvent les modèles de documents.

Aperçu du dossier d'un thème

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.

Firefox : installer Firebug (), une extension gratuite permettant de facilement comparer et déboguer du CSS et son résultat.

Firefox/Chrome : installer Web Developer (), une extension gratuite qui ajoute de nombreux outils pour développeurs, directement dans le navigateur.

Safari : activer le Web Inspector (lire ).

Chrome : activer les Developer Tools (lire ).

Opera : utiliser Dragonfly (), un environnement de débogage complet.

Internet Explorer 8+ : utiliser les Developer Tools (lire ).

Internet Explorer 6 et 7 : installer la IE Developer Toolbar (lire ), ou utiliser Firebug Lite ().

Pour plus d'information, lire la page Wikipédia .

Il s'agit du même principe que pour l'architecture MVC (Modèle-Vue-Contrôleur), en plus simple et plus accessible. Pour plus d'informations sur le MVC, lisez la page Wikipédia .

Validez toujours votre code XHTML et votre code CSS grâce aux validateurs du W3C : pour le code HTML et XHTML, pour le code CSS.

Autant que possible, utilisez des CSS sprites (lire ).

http://getfirebug.com/
http://chrispederick.com/work/web-developer/
http://developer.apple.com/library/safari/#documentation/AppleApplications/Conceptual/Safari_Developer_Guide/2SafariDeveloperTools/SafariDeveloperTools.html
https://developers.google.com/chrome-developer-tools/docs/overview
http://www.opera.com/dragonfly/
http://msdn.microsoft.com/fr-fr/library/dd565628%28v=vs.85%29.aspx
http://www.microsoft.com/en-us/download/details.aspx?id=18359
https://getfirebug.com/firebuglite
http://fr.wikipedia.org/wiki/Architecture_trois_tiers
http://fr.wikipedia.org/wiki/Mod%C3%A8le-Vue-Contr%C3%B4leur
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
http://www.smarty.net/
Fondamentaux de la création de thème
Concepts
Architecture technique de PrestaShop
Modèle
Vue
Contrôleur
Concepts et informations techniques
Bonnes pratiques
Comment fonctionne un thème PrestaShop
Dossiers propres aux thèmes
Aperçu du dossier d'un thème