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 quatrième partie, nous jetterons les bases de notre thème que nous construirons complètement à partir de zéro. Excité? Commençons!

La série complète

• Partie 1: Installation et configuration
• Partie 2: Produits, taxes, catégories, passerelles de paiement, etc..
• Partie 3: Theming
• Partie 4: Construire le thème
• Partie 5: Création de la page d'informations sur le produit

Une récapitulation rapide

Dans les dernières parties, nous avons appris à installer votre boutique Magento de prêt à déployer, notamment à configurer vos produits, catégories de produits, taxes, expédition, passerelles de paiement, etc..

Nous avons également examiné les bases du thème de Magento. Nous avons appris l’idée générale des thèmes Magento, les différentes terminologies sous-jacentes et la structure de base d’un thème..

Objectifs pour notre thème

Notre objectif pour la construction de ce thème est assez simple: comprendre concrètement comment construire un thème Magento. Dans cet esprit, je vais garder le thème aussi simple que possible.

• Tout sauf les caractéristiques essentielles dépouillées
• Aucune image autre que les images du produit et le logo
• Colonne unique pour rester simple visuellement

Que construisons-nous aujourd'hui??

Le processus de codage Magento étant relativement compliqué pour les habitués de WordPress, nous allons le prendre très lentement. Aujourd'hui, nous ne construirons que la partie principale de notre thème, le squelette utilisé dans chaque vue du site. J'expliquerai également le principe général du processus afin que nous puissions passer à chaque point de vue dans les parties futures..

Les fichiers sources, à la fois front-end et back-end, sont inclus, mais essayez de ne pas les utiliser pour l'instant. Nous ne définirons que les parties principales sans définir le contenu à afficher, comment il doit être affiché et d'où le contenu doit être extrait. Donc, si vous essayez de l'utiliser maintenant, vous allez voir un tas de charabia puisque Magento extrait tous les fichiers absents de son thème par défaut, ruinant ainsi complètement notre apparence. Donc, mon conseil est, attendez un peu.

Le modèle de base

Le modèle de base ressemble à cela. Nous avons un logo générique en haut avec un menu simple qui permet à l'utilisateur d'accéder à son compte, à sa liste de souhaits et à son panier, ainsi qu'en lui permettant de passer à la caisse ou de se déconnecter..

En dessous de cela, nous avons une barre d’outils contenant une navigation de type fil d’arrière-plan permettant à l’utilisateur de connaître la hiérarchie contextuelle du site. Nous permettons également à l'utilisateur de parcourir notre magasin via l'entrée de recherche située à droite..

La zone de contenu est actuellement vide car son contenu varie en fonction de la vue en cours de chargement par Magento. Donc, nous allons garder est vide pour le moment et le gérer plus tard lorsque nous construirons chaque page individuelle.

Le pied de page est assez générique avec un lien pour signaler les bugs et les informations de copyright.

Étape 1 - Le HTML

Nous allons d'abord regarder le code HTML pour le squelette du thème. Je suppose que vous maîtrisez assez bien le langage HTML et CSS, je vais donc passer aux parties les plus importantes..

         
 
 
 
 
Bienvenue, Sid
 
 
Mon compte
 
Ma liste d'envies
 
Mon panier
 
Check-out
 
Connectez - Out
 
 
 
 
 
Accueil "Etat de peur
 
 
 
 
Contenu ici
 
 
 Aidez-nous à garder Magento en bonne santé - Signaler tous les bugs (ver. 1.4.0.1) © 2008 Magento Demo Store. Tous les droits sont réservés. 
 
  

Tout d'abord, notez que j'ai tout enveloppé sous une division wrapper pour faciliter la gestion des choses. Notez également que l'en-tête, le contenu et la section de pied de page obtiennent leurs blocs individuels..

L'entrée de recherche est assez inutile à ce stade. Nous allons le connecter correctement lors de l'intégration à Magento. Même avec les différents liens. Actuellement, je les ai mis là comme espaces réservés. Une fois que nous creuserons dans Magento, nous les ferons travailler.

Étape 2 - Le CSS

 * marge: 0; rembourrage: 0; bordure: aucune; contour: aucun; couleur: # 333; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; taille de police: 14px; style de liste: aucun; hauteur de ligne: 1.3em;  a color: # 7db000;  h1, h2, h3, h4 poids de police: normal;  h1 font-size: 32px; marge inférieure: 10px;  h2 font-size: 24px; marge: 10px 0 12px 0;  h3 font-size: 20px; marge inférieure: 5px;  h4 font-size: 20px;  .border border: 1px solid # 666;  / * Éléments de base * / #wrapper width: 920px; marge: auto 10px; rembourrage: 20px;  #header margin: 0 0 20px 0; débordement: auto;  #content margin: 20px 0; débordement: auto;  #footer padding: 10px; bordure: 1px solide # E1E1E1; arrière-plan: # F3F3F3; text-align: center;  / * Contenu de l'en-tête * / #logo float: left;  #hud float: right; largeur: 320px; hauteur: 50px; rembourrage: 10px; bordure: 1px solide # E1E1E1; arrière-plan: # F3F3F3;  #hud li a float: left; taille de police: 12px; marge: 0 10 px 0 0;  #utilities clear: both; marge: 20px 0; débordement: auto; rembourrage: 7px 10px; bordure: 1px solide # E1E1E1; arrière-plan: # F3F3F3;  #breadcrumbs float: left;  # header-search float: right; 

Rien d'extraordinaire ici. CSS très basique pour placer les éléments en position et le styler juste un tout petit peu. Allons-nous en.

Étape 3 - Création de notre fichier page.xml

Cette partie est un peu délicate alors restez avec moi ici. Magento utilise des fichiers XML pour gérer la mise en page et définir les éléments pouvant être rendus. Le but est que, au lieu de manipuler du code mystérieux, vous puissiez simplement éditer le fichier XML et vous en servir sans vous soucier des dépendances..

Chaque vue / écran / module reçoit son propre fichier XML ainsi qu'un fichier maître pour définir la présentation générale du site. Ce fichier maître est le page.xml fichier que nous allons créer maintenant.

Le fichier complet d'aujourd'hui ressemble beaucoup. Je vais expliquer chaque bit partie par partie ci-dessous.

    Toutes les pages   css / cirrus.css           

Ignorez les déclarations initiales de XML et de version de présentation. Ils sont sans importance pour nous maintenant.

Tout d'abord, nous créons un bloc maître pour toutes les données. Considérez ceci comme l’équivalent de l’élément DIV wrapper que nous avons utilisé dans notre code HTML. Ensuite, nous lui demandons d'utiliser page / 1column.phtml comme modèle pour notre page. Ne vous inquiétez pas, nous n'avons pas encore créé le fichier. Nous le ferons plus tard dans ce tutoriel.

  css / cirrus.css 

Ensuite, nous définissons les éléments à inclure dans le tête section de la page. Magento, par défaut, inclut une charge de fichiers CSS et JS mais nous n’exigerons aucune de leurs fonctionnalités aujourd’hui. Donc, nous allons simplement inclure notre fichier CSS.

Nous définissons ce qui se trouve dans l'en-tête de notre site. Nous voulons le menu / liens en haut ainsi que la chapelure et la recherche.

Nous aurons besoin de la partie contenu, bien sûr, donc nous incluons la partie contenu. Nous ne définirons rien à propos de cette section ici car Magento charge tout le contenu nécessaire dans ce bloc.

Et enfin, nous avons inclus notre pied de page. Nous disons également à Magento par où charger son modèle.

Vous vous demandez probablement pourquoi nous spécifions un chemin de gabarit pour certains blocs tout en l'omettant pour d'autres. C'est un sujet de niveau plutôt élevé, mais avez-vous remarqué que chaque bloc a un type attribut? Lorsque son type correspond à l'un de ceux prédéfinis par Magento, vous n'avez pas besoin de spécifier de modèle. C'est auto chargé. Chouette, non?

Et avec ça, notre base page.xml le fichier est complet.

Étape 4 - Création de notre modèle de squelette

Ok, maintenant que nous avons spécifié notre mise en page, nous pouvons passer à la création du 1column.phtml fichier que nous avons spécifié dans le XML plus tôt.

Ce fichier n'est rien d'autre qu'un modèle de squelette qui appelle, si nécessaire, dans l'en-tête, la zone de contenu et le pied de page. Notre fichier ressemble à ceci:

     getChildHtml ('tête')?>   
 getChildHtml ('en-tête')?> 
 getChildHtml ('contenu')?> 
 getChildHtml ('footer')?> 
  

C’est à peu près notre fichier HTML original, sauf que nous utilisons le getChildHtml méthode pour acquérir le contenu de chaque bloc. Le modèle doit être assez agnostique, car c'est la page maître à partir de laquelle chaque page est rendue..

Étape 5 - Création des modèles pour nos blocs

Maintenant vient la partie un peu difficile: découper nos blocs HTML de base par fonctionnalité, créer les fichiers de modèles requis pour chaque fonctionnalité, puis remplir ces fichiers..

Nous allons aborder chacun dans l'ordre d'apparition

Section principale

getChildHtml ('tête') cartes directement à page / html / head.phtml. Notre fichier ressemble à ceci:

    getCssJsHtml ()?> getChildHtml ()?> getIncludes ()?>

Vous verrez que nous laissons Magento créer dynamiquement les titres. A part ça, remarquez le getCssJsHtml méthode étant appelée. Cette méthode importe tous les fichiers CSS et JS que nous avons spécifiés dans page.xml fichier.

En-tête de page

getChildHtml ('en-tête') cartes directement à page / html / header.phtml. Notre fichier ressemble à ceci:

 
 
getUrl (")?>" title = "getLogoAlt ()?> ">
 
 
Bienvenue
 getChildHtml ('topLinks')?> 
 
 
 getChildHtml ("chapelure")?> getChildHtml ('topSearch')?> 

Nous utilisons l'API de Magento pour acquérir le logo en premier. Ensuite, pour modulariser davantage les choses, nous obtenons le code HTML pour les chemins de navigation, les liens et la fonction de recherche..

Notez que le nom est purement sémantique. Comme vous pouvez le constater, vous n'êtes pas limité à l'en-tête dans son sens technique le plus pur et strict. Vous pouvez également utiliser d'autres éléments au besoin.

Pied de page

getChildHtml ('footer') cartes directement à page / html / footer.phtml comme spécifié dans le fichier XML. Notre fichier ressemble à ceci:

 
 __ (Aidez-nous à garder Magento en bonne santé)?> - __ ('Signaler tous les bugs')?> __ ('(ver.% s)', Mage :: getVersion ())?> getCopyright ()?> 

Avec le pied de page, vous êtes libre d'inclure toute information que vous jugez utile. Je viens d'inclure le contenu par défaut car je ne pouvais penser à rien d'intelligent à dire.

Les éléments de base étant terminés, nous pouvons passer aux blocs fonctionnels plus petits spécifiés dans la section d’en-tête, c’est-à-dire le fil d’ariane, les liens et la fonction de recherche..

Top Liens

getChildHtml ('topLinks') cartes directement à page / html / template / links.phtml. Notre fichier ressemble à ceci:

 getLinks (); ?> 0):?> getName ()):?>>  getIsFirst () || $ _link-> getIsLast ()):?> getLiParams ()? >>getBeforeText ()?> getUrl ()?> "title ="getTitle ()?> " getAParams ()? >>getLabel ()?> getAfterText ()?>   

Je sais que cela a l'air un peu compliqué, mais tout ce qu'il fait est de parcourir une série de liens, puis de le cracher, tout en ajoutant une classe spéciale s'il s'agit du premier ou du dernier élément de la liste. Si vous préférez, vous pouvez supprimer tout cela et simplement coder votre menu du haut.

Chapelure

getChildHtml ('chapelure') cartes directement à page / html / breadcrumbs.phtml. Notre fichier ressemble à ceci:

  
 $ _crumbInfo):?>  "title ="htmlEscape ($ _crumbInfo ['title'])?? ""htmlEscape ($ _crumbInfo ['label'])?>  htmlEscape ($ _crumbInfo ['label'])?>  htmlEscape ($ _crumbInfo ['label'])?>   "    
 

Comme auparavant, il ne fait que passer en boucle dans les miettes pour rendre le texte. Les bits vilains qui se trouvent là-bas vérifient si le fichier crumb est un lien, le formater en tant que tel et vérifie s’il s’agit de l’élément final pour qu’il n’ait pas à rendre de séparateur. Il n'y a rien d'autre à ce bloc.

Chercher

getChildHtml ('topSearch') cartes directement à catalogsearch / form.mini.phtml. Notre fichier ressemble à ceci:

Magento fait tout l'haltérophilie ici. Il suffit d’appeler la méthode d’API appropriée pour les URL et autres.

Si vous avez remarqué que la chaîne transmise au getChildHtml méthode mappe directement à la comme attribut utilisé dans le page.xml fichier, puis félicitations, vous êtes un lecteur astucieux et vous obtenez un biscuit délicieux!

Ce que nous allons construire dans la prochaine partie

Maintenant que nous avons construit un noyau très fort, nous pouvons maintenant passer à la construction des vues individuelles du magasin. Dans la partie suivante, nous allons créer l'une des vues principales de tout magasin, la vue produit. Restez à l'écoute!

Le dernier mot

Et nous avons fini! Aujourd'hui, nous avons fait le premier pas en créant notre thème personnalisé Magento, Cirrus. 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!