Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento
Code

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

by
Length:LongLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page, Part 1
Magento Theme Development: Home Page, Part 3

French (Français) translation by honeymmmm (you can also view the original English article)

Dans le didacticiel précédent de cette série, nous avons commencé à modifier la section d’en-tête de la page d’accueil. Dans ce tutoriel, nous allons commencer là où nous en sommes restés avec l'amélioration de la section d'en-tête, puis nous allons créer le nouveau bloc CMS de curseur et l'appeler à partir de nos fichiers de modèle. Comme nous avons beaucoup à couvrir dans cet article, commençons sans plus tarder.

Comme nous avons partiellement réparé l’en-tête supérieure, la seule chose à réparer est la section supérieure du chariot. Pour personnaliser le panier d'en-tête, nous allons d'abord essayer de savoir quels fichiers de gabarit sont responsables du rendu de cette pièce. Pour analyser cela, commençons par ajouter quelques produits au panier afin que nous puissions en faire une analyse approfondie.

Enabling Template Tags

Lorsque nous activons les indicateurs de modèle, nous pouvons constater que le conteneur externe du panier d’en-tête provient de ce fichier de modèle: frontend/rwd/default/template/checkout/cart /minicart.phtml. Ensuite, au clic, la partie développée est rendue par le biais de ce fichier: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Enfin, chaque élément du panier est rendu via ce fichier: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Nous allons importer tous ces fichiers dans notre thème nouvellement créé, puis commencer à les modifier.

Commençons le processus de modification avec le fichier minicart.phtml le plus externe. Ceci est le code actuel de ce fichier:

Avant d’y apporter des modifications, vérifions le code de la section panier de notre en-tête dans notre fichier HTML original. Le code ressemble à ceci:

Nous allons donc commencer à modifier le code du fichier PHP pour le rendre similaire à notre code HTML. Nous allons simplement utiliser une balise d'ancrage ici pour envelopper l'icône du panier, puis nous afficherons le contenu de minicart. Par conséquent, notre code ressemblera à ceci:

Ici, nous avons remplacé le wrapper le plus externe du panier supérieur, mais nous devons maintenant modifier le wrapper de section déroulante. Comme nous l'avons déjà vu, cet emballage provient de frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Vérifions le code actuel de ce fichier:

Lorsque nous le comparons à votre modèle HTML, nous devons faire certaines choses. Tout d’abord, dans le mini-catalogue-wrapper div, nous commencerons à mettre en œuvre notre ul et, pour chaque élément, nous itérerons sous la balise li. À la fin, nous afficherons le total du panier ou indiquerons qu’il n’ya aucun article dans le panier. Notre code final pour ce fichier ressemblera à ceci:

Maintenant, la dernière partie qui reste est le style de l'élément de liste de panier lui-même. Comme nous l'avons déjà compris, le fichier responsable de cette partie est: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Le code actuel de ce fichier semble assez long et difficile à comprendre, mais ne vous laissez pas intimider. Nous n’avons pas besoin de modifier tout cela, car la partie principale du code de fichier consiste à calculer le prix juste, ainsi que d’autres options de produit. De nouveau, nous allons vérifier notre code HTML, le placer dans ce fichier et commencer à remplacer le texte statique par des valeurs dynamiques. Ceci est le code pour chaque article de panier dans notre HTML:

Nous allons remplacer le tag img par celui-ci:

Ensuite, nous remplacerons le nom par du code dynamique:

Pour afficher les options du produit, nous allons utiliser ce code dynamique:

Ensuite, nous déterminerons et afficherons la quantité à l’aide de ce code:

Pour le calcul du prix, nous allons saisir ce code à la place du prix statique:

Et comme dernière étape, nous remplacerons le href pour supprimer l’URL par celui-ci:

J'ai trouvé tout ce code du fichier default.phtml actuel. Vous n’avez pas à comprendre toute la logique et le code par vous-même, mais si vous regardez bien, vous pourrez le trouver dans le fichier que vous essayez de modifier.

Ainsi, le code final de notre fichier default.phtml ressemble à ceci:

Maintenant, si vous enregistrez tous ces fichiers et rechargez la page d'accueil, vous devriez voir quelque chose comme ceci:

Top Cart Fixed

Nous avons quelques problèmes avec les styles, mais le rendu HTML est assez proche de notre conception HTML requise. Maintenant que nous avons terminé la section d'en-tête supérieure, la suivante est la section de logo. Heureusement, il n’ya rien d’autre à faire ici que la partie styling (aligner le logo au centre) que nous ferons dans l’article styling. Nos éléments de menu semblent également assez proches de ce à quoi nous nous attendons. Il suffit donc de modifier la barre de recherche puis le curseur principal.

Pour modifier notre barre de recherche, activons les indicateurs de modèle et voyons quelle partie est responsable du rendu de ce code: frontend/rwd/default/template/catalogsearch/form.mini.phtml.

Actuellement, ce fichier ressemble à ceci:

Nous allons donc utiliser les div externes du code HTML et remplacer le contenu interne par le contenu dynamique. Notre nouveau fichier form.mini.phtml ressemblera à ceci:

Dans la dernière partie de cet article, nous allons éditer le curseur principal. Pour cela, nous allons créer un nouveau bloc statique en accédant à CMS> Static Blocks> Add New Block. Nous nommerons ce bloc Slider de la page d'accueil et nous insérerons l'identificateur en tant que home-slider (curseur de la maison). C'est ainsi que le code pourra trouver ce bloc.

Creating Homepage Slider Static Block

Nous allons maintenant entrer le code du curseur de votre code HTML.

Notez que nous avons remplacé l'image source relative au répertoire skin en utilisant la balise skin_url comme ceci:

Maintenant, nous allons ajouter ces lignes dans le fichier header.phtml créé dans le dernier article, juste au-dessus de la dernière ligne <?php echo $this->getChildHtml('topContainer'); ?>.

La dernière étape consiste à supprimer le curseur actuel. Pour ce faire, accédez à CMS-Pages> Madison Island, puis dans la section Contenu, supprimez tout le code jusqu'au début de la section Style.

Removing previous Home Slider

Tout sauvegarder et recharger la page d'accueil, et maintenant, vous devriez voir tout cela très bien. Certains styles sont désactivés, mais nous en traiterons dans un didacticiel séparé. Pour l'instant, nous devons simplement nous occuper de la section de contenu de la page d'accueil, où nous afficherons un carrousel de produits, puis nous personnaliserons le pied de page. Nous allons faire tout cela dans le prochain tutoriel, alors restez à l’écoute!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.