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

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 modèle 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 complète..

En activant 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 à travers ce fichier: frontend / rwd / default / template / checkout / cart / minicart / items.phtml. Enfin, chaque article 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 plus externe minicart.phtml fichier. Ceci est le code actuel de ce fichier:

getSummaryCount (); if (vide ($ _ cartQty)) $ _cartQty = 0; ?> helper ('checkout / cart') -> getCartUrl (); ?> "data-target-element =" # header-cart ">  __('Chariot'); ?>    getChildHtml ('minicart_content');?>

Maintenant, avant de commencer toute modification, vérifions le code de notre section de panier d'en-tête dans notre fichier HTML d'origine. Le code ressemble à ceci:

 Chariot     
  Chaise Lincoln
 Taille: Taille unique
 Quantité: 01
 
  30,00 $
 
 
 
   
  Chaise Lincoln
 Taille: Taille unique
 Quantité: 01
 
  30,00 $
 
 
 
 Total 60,00 $

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 de panier, puis nous afficherons le contenu de minicart. C'est pourquoi notre code ressemblera à ceci:

helper ('checkout / cart') -> getCartUrl (); ?> "> cart  getChildHtml ('minicart_content');?>

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

getSummaryCount (); if (vide ($ _ cartQty)) $ _cartQty = 0; ?> 
 
   __ ('Elément (s) ajouté (s) récemment')?> __ ('Fermer'); ?> "> × 
 getRecentItems ()?>      getItemHtml ($ _ item)?>  
 
   getChildHtml ('cart_promotion')?> 
   canApplyMsrp ()):?> __ ("TOTAL DE LA COMMANDE SERA AFFICHÉ AVANT DE SOUMETTRE LA COMMANDE"); ?>  __ ("Sous-total du panier:")?> formatPrice ($ this-> getSous-total ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)   
 
  isPossibleOnepageCheckout ()):?>  getChildHtml ('extra_actions')?>  __ ('Commander')?> "Href ="getCheckoutUrl ()?> "> __ ('Commander')?>  
 
  getUrl ('caisse / panier'); ?> "> __('Voir Panier d'achat'); ?>  
  __ ('Vous n'avez aucun article dans votre panier.')?>

Lorsque nous le comparons à notre modèle HTML, nous devons faire certaines choses. Tout d'abord, à l'intérieur du minicart-wrapper div, nous allons commencer à mettre en œuvre notre ul, et pour chaque élément, nous allons itérer sous la li étiquette. À la fin, nous afficherons le total du panier ou indiquerons qu'il n'y a aucun article dans le panier. Notre code final pour ce fichier ressemblera à ceci:

getSummaryCount (); if (vide ($ _ cartQty)) $ _cartQty = 0; ?> 
 
 getRecentItems ()?>      getItemHtml ($ _ item)?>    canApplyMsrp ()):?> __ ("TOTAL DE LA COMMANDE SERA AFFICHÉ AVANT DE SOUMETTRE LA COMMANDE"); ?>  __ ("Sous-total du panier:")?> formatPrice ($ this-> getSous-total ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)     
  __ ('Vous n'avez aucun article dans votre panier.')?>

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 soyez pas intimidé. Nous n'avons pas besoin de modifier tout cela, car l'essentiel du code de fichier consiste à calculer le prix juste, ainsi que d'autres options de produit. Encore une fois, nous allons vérifier notre code HTML, le mettre 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:

  
  Chaise Lincoln
 Taille: Taille unique
 Quantité: 01
 
  30,00 $

Nous remplacerons le img tag avec celui-ci:

Ensuite, nous remplacerons le nom par du code dynamique:

hasProductUrl ()):?> getProductUrl ()?> ">escapeHtml ($ this-> getProductName ())?>hasProductUrl ()):?>

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

getOptionList ()):?>  escapeHtml ($ _ option ['label'])?>:

Ensuite, nous déterminerons et afficherons la quantité en utilisant ce code:

__ ('Qté:'); ?> getQty ()?>

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

 __ ('Voir prix avant confirmation de la commande.'); ?>  helper ('tax') -> displayCartPriceExclTax () || $ this-> helper ('impôt') -> displayCartBothPrices ()):?> helper ('tax') -> displayCartBothPrices ()):?> __ ('HT.'); ?>:  typeOfDisplay ($ _ item, tableau (0, 1, 4), 'ventes')):?> aide ('checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>  helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) en tant que $ taxe):?> : formatPrice ($ taxe ['montant'], vrai, vrai); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) en tant que $ taxe):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) en tant que $ taxe):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Total'); ?>:
 helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>    helper ('tax') -> displayCartPriceInclTax () || $ this-> helper ('impôt') -> displayCartBothPrices ()):?> helper ('checkout') -> getPriceInclTax ($ _ item); ?> helper ('tax') -> displayCartBothPrices ()):?> 
__ ('TTC'); ?>:  typeOfDisplay ($ _ item, tableau (0, 1, 4), 'ventes')):?> helper ('checkout') -> formatPrice ($ _in + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  helper ('checkout') -> formatPrice ($ _ incl - $ _ item-> getWeeeTaxDisposition ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) en tant que $ taxe):?> : formatPrice ($ taxe ['montant'], vrai, vrai); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) en tant que $ taxe):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) en tant que $ taxe):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ («Total TTC»); ?>:
 helper ('checkout') -> formatPrice ($ _in + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>

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

getAjaxDeleteUrl ()?>

J'ai trouvé tout ce code de la réelle default.phtml. Vous n'avez pas à comprendre vous-même toute la logique et le code, mais si vous regardez de plus près, vous pourrez le trouver dans le fichier que vous essayez de modifier..

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

obtenir l'article(); $ isVisibleProduct = $ _item-> getProduct () -> isVisibleInSiteVisibility (); $ canApplyMsrp = Mage :: helper ('catalogue') -> canApplyMsrp ($ _ item-> getProduct (), Mage_Catalog_Model_Product_Attribute_Source_Msrp_Type :: TYPE_BEFORE_ORDER_CERFIRM; ?>   
  hasProductUrl ()):?> getProductUrl ()?> ">escapeHtml ($ this-> getProductName ())?>hasProductUrl ()):?>
  getOptionList ()):?>  escapeHtml ($ _ option ['label'])?>:        
  __ ('Qté:'); ?> getQty ()?> 
 
    __ ('Voir prix avant confirmation de la commande.'); ?>  helper ('tax') -> displayCartPriceExclTax () || $ this-> helper ('impôt') -> displayCartBothPrices ()):?> helper ('tax') -> displayCartBothPrices ()):?> __ ('HT.'); ?>:  typeOfDisplay ($ _ item, tableau (0, 1, 4), 'ventes')):?> helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>  helper ('checkout') -> formatPrice ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) en tant que $ taxe):?> : formatPrice ($ taxe ['montant'], vrai, vrai); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) en tant que $ taxe):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) en tant que $ taxe):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Total'); ?>:
 aide ('checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>    helper ('tax') -> displayCartPriceInclTax () || $ this-> helper ('impôt') -> displayCartBothPrices ()):?> helper ('checkout') -> getPriceInclTax ($ _ item); ?> helper ('tax') -> displayCartBothPrices ()):?> 
__ ('TTC'); ?>:  typeOfDisplay ($ _ item, tableau (0, 1, 4), 'ventes')):?> helper ('checkout') -> formatPrice ($ _in + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  helper ('checkout') -> formatPrice ($ _ incl - $ _ item-> getWeeeTaxDisposition ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) en tant que $ taxe):?> : formatPrice ($ taxe ['montant'], vrai, vrai); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) en tant que $ taxe):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) en tant que $ taxe):?> : formatPrice ($ tax ['amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ («Total TTC»); ?>:
 helper ('checkout') -> formatPrice ($ _in + Mage :: helper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>     
 getAjaxDeleteUrl ()?> ">

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

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'y a rien de plus à faire là-bas, à l'exception de la partie style (pour aligner le logo au centre) que nous allons faire dans l'article de style. Nos éléments de menu semblent également assez proches de ce à quoi nous nous attendons, nous aurons donc besoin de modifier la barre de recherche, puis le curseur principal..

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

Actuellement, ce fichier ressemble à ceci:

  __ ('Recherche:')?>   
 
  
 Si nous regardons le code HTML de la barre de recherche dans notre fichier de conception HTML, cela ressemble à ceci:

Nous allons donc utiliser les div externes du code HTML et remplacer le contenu interne par le contenu dynamique. Notre nouveau form.mini.phtml Le fichier 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 allant à CMS> Blocs statiques> Ajouter un nouveau bloc. Nous nommerons ce bloc 'Slider de la page d'accueil', et nous insérerons l'identifiant comme 'home-slider'-c'est ainsi que le code pourra trouver ce bloc.

Maintenant, nous allons entrer le code du curseur de notre code HTML.


 
    
 
   
  rayon de lumière
 Lorem Ipsum est tout simplement un texte factice de l'industrie de l'impression et de la composition.
 Achetez maintenant 
 
   rayon de lumière
 Lorem Ipsum est tout simplement un texte factice de l'industrie de l'impression et de la composition.
 Achetez maintenant

Notez que nous avons remplacé la source d’image par rapport au répertoire skin en utilisant le skin_url tag comme ceci:

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

getIsHomePage ()):?> getLayout () -> createBlock ('csms / block') -> setBlockId ('home-slider') -> toHtml (); ?>

La dernière étape consiste à supprimer le curseur actuel. Pour ce faire, allez à Pages des CMS> Madison Island, et du Contenu section, supprime tout le code jusqu'au début de la section de style.

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 juste nous occuper de la section de contenu de la page d'accueil, où nous montrerons un dernier carrousel de produits, puis nous personnaliserons le pied de page. Nous ferons tout cela dans le prochain tutoriel, alors restez à l'écoute!

Code