Share
Ce que vous allez créerDans cette série de tutoriels, nous allons développer un thème Magento à partir de zéro. Magento étant un énorme CMS de commerce électronique offrant de nombreuses options de personnalisation, les thèmes Magento sont généralement considérés comme très complexes à développer, mais j'espère que, une fois que vous suivrez cette série, vous vous familiariserez avec la terminologie Magento et la manière dont les choses évoluent. . Je vais essayer de tout expliquer au fur et à mesure, en développant chaque composant de la page étape par étape..
La première étape de tout développement Magento consiste à installer une copie de Magento sur votre serveur local. Vous pouvez également installer une copie de Magento sur votre serveur Web, mais cela ne fera que ralentir votre vitesse de développement. Je recommande donc toujours d'utiliser un serveur local pour le développement, et une fois que vous avez terminé le développement et testé minutieusement le produit final, vous devez le télécharger sur votre serveur..
Je ne réinventerai pas la roue en expliquant comment installer Magento sur votre serveur local. Pour cela, il existe de nombreux articles de qualité sur Internet. Vous pouvez également trouver des articles sur l’installation de Magento sur notre site, comme cet article de Tuts +, qui vous guidera tout au long de la procédure d’installation de Magento sur votre serveur local..
Vous devez également installer les exemples de données de Magento lors de l’installation de Magento. Ces exemples de données ajouteront de nombreux catalogues, produits, revues, etc., et nous permettront de tester différents scénarios au cours du développement..
Une fois l'installation de Magento terminée, l'étape suivante consiste à préparer les outils de développement. Vous pouvez utiliser l'éditeur de code ou l'IDE de votre choix ici. Tout éditeur de code avec lequel vous êtes à l'aise fonctionnera correctement ici. Si vous n'avez encore jamais utilisé d'éditeur de code, je vous recommande d'installer Notepad ++, car il s'agit d'un éditeur de code très léger, facile à utiliser et gratuit..
Nous aurons également besoin d’un inspecteur d’éléments pour vérifier et modifier les styles CSS sur les pages Web. Si vous utilisez Firefox, vous pouvez installer l'extension Firebug pour cela. Toutefois, si vous utilisez Chrome, Chrome Web Inspector fonctionne parfaitement. Il est livré avec Chrome, vous n’avez donc pas à installer d’extensions pour cela. Pour les besoins de cette série, j'utiliserai Chrome Web Inspector pour déboguer et modifier les styles CSS..
J'ai développé du HTML pour les besoins de cette série. Le code HTML contient les modèles de conception et les éléments principalement utilisés dans les thèmes de commerce électronique, tels que le panier supérieur, le curseur de l'en-tête, le sélecteur de devise et de langue, etc. Nous allons convertir pas à pas ce code HTML en un thème fonctionnel de Magento. Le paquet de thème HTML est attaché ici pour que vous puissiez télécharger.
Avant de plonger dans la phase de développement proprement dite, je vous recommande vivement de parcourir cette série d'articles sur le développement de thèmes Magento. Cette série de trois tutoriels vous familiarisera avec la théorie sous-jacente au thème de Magento et ses principes de base. Cette connaissance du développement de thèmes Magento sera particulièrement utile avant de commencer à vous salir les mains avec le codage de thèmes..
Maintenant que vous devez avoir une installation Magento fonctionnelle et des outils de développement prêts, et que vous avez exploré les bases du développement de thèmes en lisant la série recommandée ci-dessus, laissez-moi vous familiariser brièvement avec les dossiers dans lesquels nous allons éditer des fichiers..
Lorsque vous ouvrez votre dossier racine Magento, une liste de dossiers s’affiche. Hors de ces dossiers, les dossiers dans lesquels nous allons éditer des fichiers ne sont que les app dossier et le peau dossier.
Nous pourrions également utiliser occasionnellement le dossier js pour placer des fichiers de bibliothèque JavaScript tels que jQuery, s'ils ne le sont pas déjà. Continuez et familiarisez-vous avec les dossiers contenus dans les dossiers de l'application et du skin, avant de suivre les étapes décrites dans les prochains articles de cette série..
Nous devons modifier certains paramètres dans Magento, ce qui nous aidera à développer plus rapidement notre thème Magento et nous permettra de savoir si quelque chose ne va pas dans Magento..
Tout d'abord, nous allons désactiver Magento Cache. Pour cela, allez à Système> Gestion du cache, et sélectionnez tous les types de caches. À partir des actions, sélectionnez Désactiver, et soumettre.
Une fois tous les caches désactivés, l'étape suivante consiste à réindexer les données. Pour cela, allez à Système> Gestion des index. Sélectionnez tous les index, et parmi les actions sélectionnez Réindexer les données, et soumettre.
Nous allons maintenant activer les journaux et bloquer les astuces dans Magento. Aller à Système> Configurations, et dans la barre latérale gauche, le dernier élément sera Développeur. Cliquez dessus. Sur la page suivante, de Paramètres du journal, activer les journaux et appuyer sur Enregistrer la configuration bouton en haut à droite.
Ensuite, en haut de la barre latérale gauche, vous verrez le Portée de la configuration actuelle sélectionnez bar. Sélectionner Site principal De là.
Maintenant du Déboguer section, activer Conseils sur le chemin du modèle, et frapper le Enregistrer la configuration bouton à nouveau.
Enfin, accédez au répertoire racine de Magento et ouvrez le fichier index.php à partir de cet emplacement. Sur la ligne 77, décommentez cette ligne de code:
Accentsconagua
ini_set ('display_errors', 1);C'est tout pour le moment. Vous ne le réaliserez peut-être pas, mais nous avons construit une base solide pour le développement de thèmes dans les prochains tutoriels de cette série. En fin de compte, je vous encourage à nouveau à parcourir de près la série de développement de thèmes Magento que j'ai recommandée ci-dessus, si ce n'est déjà fait..
Dans le prochain tutoriel, nous allons créer la structure de dossiers de notre nouveau thème. Nous allons copier les fichiers CSS, JS et les images HTML à partir de HTML dans notre thème, puis créer le fichier local.xml de notre thème pour nous assurer que notre thème est lié à ces fichiers..
Ça y est, et j'espère que vous nous suivrez dans les prochains tutoriels.
