Développement de thèmes Magento Page d'accueil, première partie

Alors que nous préparions le terrain dans le précédent article sur l'amorçage, il est maintenant temps de plonger profondément dans le code et de commencer à apporter des modifications. Comme choix évident, nous allons commencer le processus d'édition à partir de la page d'accueil..

Dans ce premier article, nous éditerons partiellement la section d'en-tête. Nous allons éditer les fichiers wrapper par défaut et le fichier header.phtml, puis nous commencerons à éditer les différents composants de l'en-tête tels que la devise, le sélecteur de langue, etc. Ainsi, sans plus tarder, nous allons commencer le processus d'édition.

Tout d'abord, nous allons activer la Astuces de modèles depuis le panneau d'administration, en allant sur Système> Développeur> Débogage, et en le faisant, nous ferons en sorte que Portée de la configuration actuelle est réglé sur Site principal. En activant les indicateurs de modèle, nous saurons quel modèle est responsable des styles d'en-tête. Voici à quoi ressemblera la page d'accueil lorsque les indications de modèle sont activées..

Ici, comme vous pouvez le constater, l’emballage le plus externe dans lequel tous les autres fichiers sont inclus provient de frontend / rwd / default / template / page / 1column.phtml, qui provient du thème RWD, car nous avons hérité notre thème de ce thème par défaut. Au lieu d'éditer ce fichier directement dans le thème RWD, nous allons créer un dossier similaire dans notre thème vstyle à cet emplacement: frontend / tutsplus / vstyle / template / page. Ensuite, nous copierons ces fichiers dans ce dossier et les éditerons là. Donc, nous allons au frontend / rwd / default / template / page répertoire et copie 1column.phtml, 2column-left.phtml, 2column-right.phtml, et 3column.phtml dans ce dossier nouvellement créé.

Si on regarde le code de 1-column.phtml, c'est comme ça:

         getChildHtml ('tête')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?>  getChildHtml ('en-tête')?>   getChildHtml ("chapelure")?>  getChildHtml ('global_messages')?> getChildHtml ('contenu')?> 
 
 
 getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Nous devons maintenant le modifier pour qu'il corresponde à notre fichier index.html. Nous allons donc utiliser nos classes body et conteneur et ajouter quelques divs supplémentaires. Le code modifié ressemblera à ceci:

   getChildHtml ('tête')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('en-tête')?>   getChildHtml ('global_messages')?> getChildHtml ('contenu')?> 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

De même, nous allons également éditer le 2column-left.phtml, 2column-right.phtml, et 3column.phtml des dossiers. Voici comment le code modifié va chercher 2-column-left.phtml:

   getChildHtml ('tête')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('en-tête')?>     getChildHtml ('left')?> 
  getChildHtml ('global_messages')?> getChildHtml ('contenu')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Suivant, 2columns-right.phtml ressemblera à ceci après le montage:

   getChildHtml ('tête')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('en-tête')?>     getChildHtml ('global_messages')?> getChildHtml ('contenu')?> 
  getChildHtml ('right')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Enfin, nous allons éditer 3columns.phtml comme ça:

   getChildHtml ('tête')?>  getBodyClass ()? '': "? >> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('en-tête')?>     getChildHtml ('left')?> 
  getChildHtml ('global_messages')?> getChildHtml ('contenu')?> 
  getChildHtml ('right')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Examinez attentivement les modifications apportées à ces fichiers modèles. Lorsque vous le comparerez au fichier index.html de notre site Web HTML, cela vous semblera logique..

Voici à quoi devrait ressembler le site Web après l’édition de ces fichiers. Vous ne verrez pas beaucoup de différence, mais nous allons dans la bonne direction.

Ensuite, nous allons éditer le fichier header.phtml, car nous pouvons voir que c’est le fichier qui contient le contenu de l’en-tête de la section d’en-tête. Donc, nous allons copier le frontend / rwd / default / template / page / html / header.phtml fichier, déplacez-le vers le frontend / tutsplus / vstyle / template / page / html dossier, et commencez à le modifier. Actuellement, son code ressemblera à ceci:

   getChildHtml ('store_language')?> 
 getChildHtml ('currency_switcher')?> getChildHtml ('bienvenue')?> getAdditionalHtml ()?>
 
 
   getUrl (")?>">     
     __('Menu'); ?>    __('Chercher'); ?>   helper ('client') -> getAccountUrl (); ?> "data-target-element =" # header-account ">  __('Compte'); ?>    getChildHtml ('minicart_head'); ?> 
 
 
   getChildHtml ('topMenu')?> 
   getChildHtml ('topSearch')?> 
   getChildHtml ('topLinks')?> 
 
  getChildHtml ('topContainer'); ?>

Nous allons le comparer à la section d'en-tête de notre code HTML et commencer à y apporter les modifications suivantes:

     Appelez-nous maintenant! 0800-123-456-78
 
      Eng
 Vns
 Fer
 Gemme
 
 
   USD
 UKD
 FER
 
 
 
  
 
  Chariot     
  Chaise Lincoln
 Taille: Taille unique
 Quantité: 01
 
  30,00 $
 
 
 
   
  Chaise Lincoln
 Taille: Taille unique
 Quantité: 01
 
  30,00 $
 
 
 
 Total 60,00 $

Nous insérerons ce code HTML dans le fichier header.phtml et remplacerons les sections de différence par les balises de modèle dynamique appropriées, telles que le sélecteur de devise, la langue du magasin, le logo, le menu, la barre de recherche, etc. Voici comment le code apparaîtra après ces modifications:

     getChildHtml ('bienvenue')?> getAdditionalHtml ()?>
 
    getChildHtml ('currency_switcher')?> getChildHtml ('store_language')?> 
  ">
 
   getChildHtml ('minicart_head'); ?> 
 
 
 
 
 
 
 
      getUrl (")?>">    
 
 
 
 
      getChildHtml ('topMenu')?> 
 
    getChildHtml ('topSearch')?> 
 
 
 
 
 
 getChildHtml ('topContainer'); ?>

Voici à quoi ressemblera la section d’en-tête après la modification de la header.phtml fichier:

Maintenant, comme vous pouvez le constater, nous devons modifier le code des différentes sections que nous utilisons, telles que le sélecteur de langue et de devise, le curseur, le menu, la barre de recherche, etc. Pour commencer, nous allons modifier les sélecteurs de devise et de langue. Si nous activons à nouveau les indications de modèle, nous pouvons voir que la section de sélection de langue provient de base / default / template / page / switch / languages.phtml, Nous allons donc copier ce fichier dans notre thème au même endroit et commencer à le modifier pour qu'il corresponde à notre code HTML. L'original languages.phtml Le fichier ressemble à ceci:

getStores ())> 1):?>  __ ('Votre langue:')?>

Le code HTML d'origine du sélecteur de langue et de devise se présente comme suit:

   Eng
 Vns
 Fer
 Gemme
 
 
   USD
 UKD
 FER

Après avoir modifié languages.phtml pour correspondre au code HTML, cela ressemblera à ceci:

getStores ())> 1):?>    getStores () en tant que $ _lang):?>  getCurrentUrl ()?> "> EscapeHtml ($ _lang-> getName ()); $ langName = substr ("$ langName", 0, 3); $ langName = strtoupper ($ langName); echo $ langName; ?>

Comme vous pouvez le constater, le sélecteur de devise n'apparaît pas sur notre site Web pour l'instant. Nous devons d'abord activer le sélecteur de devise à partir du panneau d'administration. De Système> Configuration> Général> Configuration de la devise, vous devez d'abord activer certaines langues, puis à partir de Système> Gérer la devise> Tarifs fixer les taux de change. Ensuite, vous verrez que le sélecteur de devise est activé sur votre site Web. En activant à nouveau les indications de modèle, nous pouvons voir que son modèle est rwd / default / template / directory / currency.phtml, et son code actuel ressemblera à ceci:

getCurrencyCount ()> 1):?>  __ ('Votre devise:')?>

Nous l'éditerons pour correspondre à notre code HTML, donc le code modifié ressemblera à ceci:

getCurrencyCount ()> 1):?>    getCurrency () en tant que $ _code => $ _name):?>  getSwitchCurrencyUrl ($ _ code)?> ">

Ensuite, nous modifierons notre message de bienvenue pour qu'il corresponde à notre conception HTML. Pour cela nous devrons aller à Système> Configuration / Général / Conception / En-tête / Texte de bienvenue. Après avoir édité ceci, l'en-tête ressemblera à ceci:

Si vous avez suivi toutes les étapes correctement, j'espère que vous constaterez de nombreux progrès dans l'apparence de votre page d'accueil. Maintenant que nous avons partiellement modifié la section d'en-tête, nous continuerons de modifier la section d'en-tête dans le prochain article et nous modifierons également le curseur principal de cet article..

S'il vous plaît expliquez vos expériences dans la section commentaires!

Code