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

Maintenant que nous avons complètement personnalisé la première moitié de la page d'accueil, nous devons ensuite modifier le contenu de la page d'accueil. Si nous examinons notre conception HTML, la section de contenu de la page d'accueil ne comporte qu'un en-tête et un carrousel des derniers produits. Il existe un widget Magento que nous pouvons utiliser pour afficher les derniers produits sur la page d'accueil. En fait, si nous regardons notre section de page d'accueil actuelle, elle contient déjà le dernier widget de produits activé, mais nous devons le modifier pour l'adapter à nos exigences de conception..

Si nous regardons le contenu de notre page d'accueil en allant à la Panneau d'administration> CMS> Pages> Madison Island> Contenu, nous verrons qu'il n'y a qu'une seule ligne de code PHP (autre que certaines balises de style), c'est-à-dire:

widget type = "catalogue / product_widget_new" display_type = "new_products" products_count = "5" template = "catalogue / produit / widget / nouveau / contenu / nouveau_grid.phtml"

En gros, tout le contenu de la page d'accueil provient de ce modèle (qui n'est qu'un modèle pour afficher les nouveaux produits). Nous copierons ce fichier du thème RWD dans notre nouveau thème, en catalogue / produit / widget / nouveau / contenu / nouveau_grid.phtml, et commencez à l’éditer pour qu’il ressemble à notre conception HTML. Si nous regardons le code actuel de ce fichier, il est:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Nouveaux produits')?>
 
 
 getPagerHtml ()?> getColumnCount (); ?>  
 getItems () en tant que $ _product):?> 
  getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">   
 
getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?>) ">helper ('catalogue / output') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getPriceHtml ($ _ product, true, '-widget-new-grid')?> getReviewsSummaryHtml ($ _ product, 'short')?> 
 isSaleable ()):?> __ ('Ajouter au panier')?>  
__ (en rupture de stock)?>
  
 helper ('wishlist') -> isAllow ()):?> 
getAddToWishlistUrl ($ _ product)?> ">__ ('Ajouter à la liste de souhaits')?>
  getAddToCompareUrl ($ _ product)):?> 
| ">__ ('ajouter pour comparer')?>
  
 
 
 
  
 
 
  

Quand nous regardons notre code HTML pour cette section, cela ressemble à ceci:

 
 
Chaud Des produits
 
 
 
 
 
 
  
 Ajouter au panier 
 
Iphone 5s Or 32 Gb 2013
 
451,00 $
 
 
 
 
 
 

Nous allons donc commencer par brancher les balises dynamiques dans ce code HTML. La raison pour laquelle je vous ai montré le code actuel de ce fichier est que vous pouvez trouver les balises dynamiques requises à partir de ce code et les placer dans le code HTML..

Nous n’avons pas à modifier la structure de la division, la première ligne à modifier est la h3 étiquette:

Chaud Des produits

Nous devons remplacer le texte statique de Chaud et Des produits avec Magento $ this balises afin que Magento puisse les traduire ultérieurement en fonction des préférences de l'utilisateur. Ainsi, cette ligne deviendra quelque chose comme ceci: 

__ ('Nouveau')?>__ ('Produits')?>

La prochaine ligne qui doit changer est la image balise, où nous devons changer le chemin pertinent de la source de l'image. Actuellement, cela ressemble à ceci:

Nous allons le changer en ceci:

Ici, cette balise dynamique obtiendra la petite image réelle du produit de 236 x 357 px. Ensuite, nous devons changer cela Ajouter au panier lien:

Ajouter au panier

Nous allons le changer en ceci:

getProductUrl ()?> "> isSaleable ()):?> __ ('Ajouter au panier')?>  __ (en rupture de stock)?>   

Il possède une URL dynamique pour la page de détails du produit et affiche uniquement "Ajouter au panier" si le produit est disponible. Sinon, il affichera «Rupture de stock». Enfin, nous mettrons à jour le prix et le nom du produit en remplaçant cette ligne:

Iphone 5s Or 32 Gb 2013
 
451,00 $
 

Avec celui-ci: 

helper ('catalogue / output') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ product, true, '-widget-new-grid')?>
 

Notre vue de produit unique sera prête, mais pour pouvoir la parcourir parmi tous les nouveaux produits, nous devons placer notre division d'article dans une boucle. Nous allons donc ajouter cette ligne en haut de celle-ci:

getItems () en tant que $ _product):?>

Et cette ligne à la fin de celle-ci pour terminer la boucle:

Donc le code complet pour ce fichier deviendra comme ceci:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Nouveau')?>__ ('Produits')?>
 
 
 getItems () en tant que $ _product):?> 
 
 
 
  
 getProductUrl ()?> "> isSaleable ()):?> __ ('Ajouter au panier')?>  __ (en rupture de stock)?>   
 
helper ('catalogue / output') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ product, true, '-widget-new-grid')?>
 
 
 
 
  
 
 
  

Actualisez votre page d'accueil maintenant. Il devrait comporter une section de nouveaux produits parfaitement adaptée et stylée, qui ressemblerait à ceci:

Nous devons maintenant modifier le pied de page avant d’en finir avec la page d’accueil. Si nous regardons notre conception HTML, le pied de page comporte quatre sections. Le premier indique "Nos marques", le second une boîte d'abonnement et des liens de médias sociaux, le troisième quelques URL, et le quatrième uniquement la notice de copyright..

La quatrième section est déjà présente dans notre thème, nous devons donc modifier le contenu et les styles, mais les trois autres composants que nous devons ajouter à notre thème. 

Pour ajouter un composant, nous allons créer un nouveau bloc statique à partir du panneau d'administration et y insérer notre contenu. Donc, nous allons aller à Panneau d'administration> Blocs statiques> Ajouter un nouveau bloc, et ajouter un nouveau bloc pour la Nos marques section. Nous allons changer le titre du bloc en «Nos marques», définir l'identifiant sur «nos_brands», sélectionner la vue du magasin dans «Toutes les vues du magasin» et la mettre dans la section Contenu:

Notre  Marques
 
<>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Si vous regardez bien, c'est le même code que celui que nous avons dans notre code HTML pour cette section. Nous venons de changer les chemins relatifs des images, tout en téléchargeant manuellement les nouvelles images à partir de l'éditeur WYSIWYG. Enregistrez le bloc et commencez à créer un autre bloc pour la section d'inscription.

Pour ce deuxième bloc, nous utiliserons le titre de bloc 'Above Footer'. Pour l'identifiant, nous utiliserons 'above_footer', et pour le contenu, nous entrerons ce code:

Nous devons maintenant créer le bloc de liens de la même manière. Nous allons créer un nouveau bloc avec le titre du bloc 'Footer Links', avec l'identifiant 'footer_links', et y insérer ce code:

 
Client Soutien
 
 
FAQ
 
Modalité de paiement
 
Conseils de réservation
 
Infomation
 
 
 
 
Client Soutien
 
 
FAQ
 
Modalité de paiement
 
Conseils de réservation
 
Infomation
 
 
 
 
Client Soutien
 
 
FAQ
 
Modalité de paiement
 
Conseils de réservation
 
Infomation
 
 
 
 
Contact Info
 
Anwar ul Haq, Californie
 
Appelez nous: (123) 398 5063
 
Appelez nous: (123) 398 5063
 
Email: abs @ tutsplus
 
 

Tous ces liens ne sont liés nulle part maintenant, mais vous pouvez les modifier ultérieurement. Les liens d’image sont à nouveau générés dynamiquement à l’aide de la fonctionnalité de téléchargement de l’éditeur WYSIWYG. Tout le reste du code est simplement copié et collé à partir du code HTML.

Enregistrez également ce bloc et consultez la page d'accueil, mais vous ne verrez toujours pas ces trois blocs apparaître. En effet, vous devez indiquer explicitement à Magento où afficher ces nouveaux blocs, ce que nous pouvons faire à partir de la section de présentation. Pour cela, allez au layout / local.xml fichier, et ajoutez ces lignes, juste avant la fermeture du défaut étiquette.

  footer_links   above_footer   nos marques   

Ce code XML indique fondamentalement à Magento d’ajouter ces deux nouveaux blocs à la section de bas de page de Magento. Enfin, nous devons appeler ces blocs à partir du fichier phtml du pied de page. Pour cela, nous allons créer un nouveau fichier footer.phtml à cet emplacement: template / page / html / footer.phtml.

Ajoutez ce code dans cette footer.phtml fichier: 

 
 
 getChildHtml ("our_brands")?> 
 
 
 
 
 
 
 getChildHtml ("above_footer")?> 
 
 
 
 
 
 getChildHtml ("footer_links_sm")?> getChildHtml ()?> 
 
 
 
 
 
 
 
getCopyright ()?>
 
 
 
 
 
 
 

Il s’agit là encore d’un simple code HTML, dans lequel tous les codes de section sont remplacés par des liens pertinents vers des blocs statiques. Et la section copyright est remplacée par une balise dynamique copyright.

Vérifiez la page d'accueil maintenant, et elle devrait maintenant montrer ces nouveaux blocs statiques, et devrait ressembler à ceci:

Notre page d'accueil est maintenant complète. Il ne reste que quelques corrections de style, et nous le ferons dans le prochain article..