Share
Magento est une plate-forme de commerce électronique incroyablement puissante. Dans cette mini-série, nous allons apprendre à utiliser la plate-forme, à connaître les terminologies, à créer un magasin et tous les aspects connexes, et enfin à le personnaliser pour l'adapter à votre image..
Dans cette troisième partie, nous nous concentrerons sur le processus sous-jacent à Magento: comment installer des thèmes, les divers concepts que vous devez comprendre pour créer un thème et la structure générale des fichiers. Excité? Commençons!
Dans la dernière partie, nous avons vu comment rendre votre boutique Magento installée et prête à être déployée, y compris comment configurer vos produits, catégories de produits, taxes, expédition, passerelles de paiement, etc..
Aujourd'hui, nous allons examiner les bases du thème de Magento. Nous allons apprendre l'idée générale derrière les thèmes Magento, les différentes terminologies sous-jacentes et la structure de base d'un thème.
Tout d’abord, le thème de Magento n’est pas aussi difficile qu’il est prétendu. C'est un peu différent de la façon dont WordPress ou Joomla traite les thèmes, oui, mais certainement pas difficile. Tout ce que vous devez savoir, c’est un peu de savoir commencer à devenir un pro!
Pour simplifier les choses, un thème Magento est une collection de fichiers PHTML, CSS et JS réunis avec des fichiers XML pour définir la structure. Un fichier PHTML consiste en un balisage HTML régulier, intercalé par du code PHP pour la fonctionnalité. Au cas où, vous êtes confus, un bloc de code aléatoire ressemble à ceci:
getChildHtml ('store_language')?>getWelcome ()?>
getChildHtml ('topLinks')?>
Voir? C'est vraiment simple une fois que vous l'avez compris. Si vous avez déjà travaillé à la création de thèmes pour d’autres systèmes, très bien, vous allez y revenir assez rapidement. Sinon, pas de soucis, je vais vous guider tout au long du processus.
Notez que dans Magento, les parties avant et arrière sont traitées séparément. Je suppose que la plupart d'entre vous n'aurez pas besoin de peaufiner le backend, je vais donc m'en tenir au thème du front end.
Avant de commencer, un certain nombre de personnes m'ont contacté sur Twitter / m'ont envoyé la même question: comment installer un thème. Je vais en parler d'abord.
Il existe deux manières d'installer un thème Magento:
Je vais parler brièvement des deux.
La première méthode est celle à laquelle vous êtes habitué. Téléchargez un thème, téléchargez-le et faites. Mais vous aurez besoin de savoir où télécharger car cela fonctionne un peu différemment de ce que vous supposeriez.
Les thèmes sont emballés différemment selon la source, mais à la base, vous avez 2 dossiers:
Vous pouvez simplement les faire glisser à la racine de l'installation et le laisser fusionner avec les données existantes..
Si par hasard, le thème est regroupé dans une collection de 3 dossiers, ne vous inquiétez pas..
Le dossier contenant les fichiers PHTML et celui contenant les fichiers XML vont dans root / app / design / frontend / default / nomme tandis que celui qui contient les fichiers CSS, les images et autres éléments va dans root / skin / frontend / default / nomme.
Pour l'instant, c'est tout ce que vous devez faire. Je vais expliquer pourquoi chaque partie va à un endroit spécifique plus tard ci-dessous. Vous pouvez activer votre thème maintenant.
Aller vers Système -> Conception et cliquez sur Ajouter un changement de conception.
Choisissez le thème que vous voulez, cliquez sur enregistrer et vous avez terminé.
Utiliser Magento Connect est plus facile s'il est disponible là-bas. Aller vers Système -> Magento Connect -> Magento Connect Manager.
Une fois connecté, vous êtes invité à saisir la clé d’extension du thème que vous souhaitez installer. Entrez la clé et attendez que le système agisse.
Une fois que les fichiers nécessaires ont été téléchargés et placés à l’endroit où ils doivent être, vous pouvez maintenant activer le thème comme auparavant..
Lorsque vous travaillez avec Magento, vous devez vous familiariser avec quelques concepts liés au design avant de pouvoir commencer à modifier le thème par défaut..
La mise en page est une nouvelle idée intelligente de Magento. Ce système vous permet de définir la structure d'une page, de n'importe quelle page, à l'aide de balises XML correctement formées..
Pour l'essentiel, vous pouvez dicter quelle section de la page va où en ne modifiant que quelques attributs dans un fichier XML. Chaque vue ou module reçoit sa mise en page spécifiée par son propre fichier XML.
Les mises en page dans Magento sont un sujet important et quelques paragraphes ici ne le rendront pas justice. En cours de route, je couvrirai toutes les informations nécessaires à la création de votre propre thème, ainsi qu’un article détaillé sur les mises en page, afin de présenter toutes les fonctionnalités avancées que vous pouvez utiliser avec cette fonctionnalité..
Pour l'instant, si cela vous intéresse, voici un petit extrait pour vous donner une idée de ce que sont les dispositions:
top-container
Les modèles sont constitués de fichiers PHTML contenant le code HTML et le code HTML. Semblable à WordPress, vous utilisez un certain nombre de méthodes prédéfinies pour spécifier la sortie. Tout comme avec d'autres systèmes populaires, des sections importantes telles que l'en-tête, le pied de page et la barre latérale sont placées dans des fichiers séparés et insérées si nécessaire..
Vous pouvez avoir différents modèles pour chaque vue de Magento. Par exemple, vous pouvez avoir un code différent pour une liste de souhaits ou une page de paiement au lieu d'utiliser la même apparence pour l'ensemble du site..
Voici un morceau de modèle pour les curieux:
getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ product, 'small_image'))??> ">  -> init ($ _ product, 'small_image') -> redimensionner (100, 100); ?> "<?php echo $this->htmlEscape ($ this -> getImageLabel ($ _ product, 'small_image'))??>")
Ça a l'air un peu brouillon, je sais mais dépouiller les parties PHP et vous verrez à quel point il est similaire à d'autres systèmes.
Les skins ne sont que des fichiers CSS, des fichiers JavaScript, des images et d’autres ressources que vous utilisez dans le balisage pour créer votre conception. Essentiellement, tous les actifs non PHP vont ici. Des polices pour l'intégration? Une démo flash chic? Un morceau de SVG épatant? Tous ceux qui tombent dans cette catégorie.
Les blocs sont les composants de base d'un thème et vous permettent de le construire de manière modulaire..
Dans le cadre des mises en page, cela constitue la colonne vertébrale du système de templates puissant de Magento. Les blocs sont essentiellement des sections que vous pouvez déplacer en utilisant le XML mentionné ci-dessus pour modifier la présentation d'une page..
Les blocs doivent référencer un fichier de modèle pertinent pour que Magento puisse extraire le fichier requis. Un peu confus? Voici un exemple.
Nous définissons essentiellement un nouveau bloc, quel modèle charger en spécifiant le type de bloc et un nom. C'est un peu différent de ce à quoi nous sommes habitués, mais croyez-moi, vous l'obtiendrez une fois que vous aurez commencé à développer. Quoi qu'il en soit, je traiterai des blocs un peu plus en détail lorsque nous construirons notre thème et, plus encore, je ferai un exposé complet sur les dispositions et les blocs sur la ligne. sens maintenant. Juste avoir une idée générale des sujets d'actualité.
Un bloc structurel définit la structure de base d'une page. Pensez aux sections d'en-tête, de pied de page et de côté HTML 5. Ils ont été créés dans le seul but de démarquer visuellement un dessin.
De la documentation Magento Les blocs de contenu sont similaires aux éléments DIV conteneur / wrapper habituels que vous utilisez dans une conception. Tout comme pour le design, chaque bloc de contenu contient une fonctionnalité ou un objectif spécifique. Un menu dans votre en-tête, une légende dans la barre latérale, des précisions légales dans le pied de page sont insérés dans des blocs de contenu distincts..
N'oubliez pas que les blocs de contenu sont toujours des blocs et sont mappés sur un fichier PHTML spécifique pour générer et afficher son contenu HTML..
De la documentation Magento Mentionné enfin parce que, du point de vue thématique strict du débutant, cela ne devrait pas entrer en jeu avant longtemps.
Pour être simple, une interface est une collection nommée de thèmes que vous pouvez exploiter pour définir l'apparence de votre magasin..
Comme tout autre logiciel puissant, Magento a une structure de fichier complexe. Cependant, vous pouvez vous concentrer considérablement sur le thème suivant..
Voici les emplacements sur lesquels vous travaillerez lors de la création d'un thème:
Magento exige que votre contenu PHP exécutable soit placé séparément de vos actifs statiques, raison pour laquelle vous avez un répertoire de skin séparé sur votre racine. Bien que cela puisse sembler contre-productif au début, une fois que vous aurez légèrement adapté votre flux de travail, vous vous rendrez compte que cela renforce la sécurité générale de votre installation…
Néanmoins, un thème est généralement divisé en plusieurs parties..
Et nous avons fini! Nous avons examiné les concepts de base sous-jacents à Magento et à la gestion des thèmes. J'espère que cela vous a été utile et que vous l'avez trouvé intéressant. Comme il s’agit d’un sujet assez nouveau pour un grand nombre de lecteurs, je suivrai de près la section commentaires de manière à ce que vous ayez des doutes..
Des questions? De belles choses à dire? Des reproches? Hit la section des commentaires et laissez-moi un commentaire. Bonne codage!
Jusqu'ici, nous avons traité strictement de la plate-forme théoriquement. Une nécessité compte tenu de la taille et de la portée de Magento. Mais maintenant que nous avons toutes les bases, nous pouvons passer à la partie amusante.
N'oubliez pas que, lors de la création d'une skin pour un système générique / CMS, vous commencez toujours à partir d'un squelette et construisez vers l'extérieur? Vous aimez Kubrick pour WordPress? Si vous pensiez que nous allions en prendre un et commencer à en construire un thème, vous pensiez mal. Non monsieur. Nous allons créer une peau personnalisée, à os nu, semblable à la peau blanche, à partir de rien. Une peau que vous pouvez utiliser vous-même comme base pour votre propre peau.
Tout cela et plus dans les prochaines parties. Restez à l'écoute!
Saviez-vous que votre quartier convivial ThemeForest vend des thèmes Magento de qualité supérieure? Que vous soyez un développeur expérimenté de Magento cherchant à commencer à tirer profit de vos efforts ou un acheteur souhaitant créer votre première boutique de commerce électronique, nous sommes là pour vous!
Accentsconagua