Développement de thèmes Magento Fichiers de modèles

Dans cet article, nous aborderons les bases des fichiers de modèles Magento. Nous allons passer en revue leur introduction et faire quelques modifications de base. 

Cela inclura l’affichage des produits en vedette sur la page d’accueil et la procédure de chargement de JavaScript dans le pied de page..

Dans la suite de notre précédent article, nous avons vu que les fichiers de mise en page contrôlent chaque bloc d’un thème et décident de ce qui est affiché ou non. Mais ce qui est rendu à l'intérieur de ce bloc est l'endroit où les fichiers de modèle entrent en action.

Dans cet article, nous allons nous concentrer sur les répertoires suivants:

• Modèle - app / design / frontend ///modèle/
• Lieu - app / design / frontend ///lieu/

Si vous venez de nous rejoindre, assurez-vous de consulter les articles précédents de cette série..

Pour référence, nous avons couvert:

1. Une introduction
2. Fichiers de mise en page

Sans plus tarder, commençons.

Modèle

Les fichiers de modèle Magento sont des fichiers PHTML composés d’un mélange de HTML et de PHP, dont certains rendent une page telle que 1column.phtml tandis que d'autres rendent des blocs spécifiques dans une page tels que header.phtml. 

La plupart du temps, lors du développement d'un site Web, ce sont les fichiers avec lesquels nous allons travailler principalement, pour les développeurs front-end. Une fois que le XML est en place et qu'un modèle est appelé, il est prévu que le fichier sera analysé et affiché en conséquence..

Il existe des centaines de fichiers de modèle disponibles. Il est parfois difficile de savoir lequel éditer, puis rechercher le fichier dans la hiérarchie.. 

Tout va bien cependant, il y a quelques paramètres de la zone d'administration qui peuvent nous aider, ils nous épargneront des heures de maux de tête!

Il est important de noter que nous ne pouvons utiliser que les paramètres suivants au niveau de la portée "Site Web" ou "Vue du magasin". Les paramètres ne sont pas disponibles pour nous dans la portée "Configuration par défaut". Ceci est utile car cela signifie que nous pouvons basculer les paramètres uniquement pour un site Web particulier ou une vue de magasin plutôt que globalement..

Conseils de modèles

Ceux-ci identifieront rapidement les fichiers en cours de chargement pour une page spécifique en nous indiquant le chemin d'accès au fichier. L’activation ou la désactivation est un changement de paramètre rapide dans la zone admin. 

Rendez-vous sur système> configuration. Ensuite, dans le menu de gauche, faites défiler tout le chemin vers le bas et cliquez sur "Développeur" dans la rubrique "Avancé". Une fois que nous avons changé la portée en "Site Web principal", nous avons le paramètre disponible sous "Débogage"..

Il semblerait que rien ne se soit passé une fois que vous avez cliqué sur Enregistrer la configuration, mais si vous allez au début du site Web, la page d'accueil par exemple, et actualisez la page, vous verrez apparaître les astuces. 

Avec cela, nous savons maintenant où se trouvent les fichiers et, si des modifications sont nécessaires, copiez simplement le fichier de la base à notre thème et modifiez-le si nécessaire..

Nous pouvons également définir "Ajouter un nom de bloc aux indications" sur "Oui" si nous voulons des informations supplémentaires. Ceci est généralement utilisé pour le développement back-end, je ne m'inquiéterais donc pas trop de ce paramètre..

Passons maintenant au code. Je vais passer en revue quelques modifications qui sont souvent utilisées dans le développement de thèmes, mais encore une fois, je ne toucherai à la surface que dans la mesure du possible..

1. Affichage des produits en vedette sur la page d'accueil
2. Chargement de JavaScript dans le pied de page

Commençons…

1. Affichage des produits en vedette sur la page d'accueil

Ce point doit être la requête la plus courante sur n'importe quel site Web, tout le monde veut montrer une poignée de produits sur la page de destination de son site, à droite.?

C'est en fait beaucoup plus facile que vous ne l'imaginiez, avec une combinaison de XML et de PHP, nous pouvons y parvenir en un rien de temps. Comme dans beaucoup de choses dans Magento, il existe plus d’une façon de le faire. Je vais vous montrer ce que je pense être la méthode la plus simple.

Tout d'abord, nous devons créer notre catégorie dans la zone d'administration qui contiendra nos produits. Une fois connecté, rendez-vous sur catalogue> gérer les catégories. Pour cet exemple, nous allons créer une sous-catégorie sous root. Nous devons donc cliquer sur "Catalogue racine", puis sur le bouton "Ajouter une sous-catégorie". Entrez un titre pour la catégorie, assurez-vous que "est actif" est défini sur "Oui" puis cliquez sur "Enregistrer la catégorie".

Notez le numéro d’identification de la catégorie en haut, car nous en aurons besoin plus tard:

Ce sera un bon moment pour ajouter également des produits à la catégorie que nous venons de créer. Pour ce faire, cliquez sur l'onglet "Catégorie de produits" et sélectionnez les produits que vous souhaitez afficher, sans oublier de cliquer sur "Enregistrer la catégorie" une fois l'opération terminée..

Ensuite, nous devons créer notre modèle où notre pour chaque la boucle sera exécutée.

Pour cela, nous allons nous baser sur le modèle de liste de produits qui contient tout le code nécessaire, nous avons juste besoin de faire quelques ajustements pour répondre à nos besoins..

app / design / frontend / base / default / catalogue / product / list.phtml

Copier:

app / design / frontend //default/catalog/product/list-home-featured.phtml

Nous allons ensuite apporter quelques modifications à notre dossier.

1. Charger dans notre collection de produits via la catégorie ID
2. N'afficher qu'une seule vue, j'ai choisi la vue en grille mais n'hésitez pas à la modifier
3. Supprimer la barre d'outils car cela n'est plus nécessaire
4. Ajouter dans notre nom de catégorie pour une rubrique

Le fichier fini ressemblera à ceci:

 load ($ _ categoryId); $ _productCollection = $ _category-> getProductCollection (); $ _productCollection-> addAttributeToSelect ('*'); ?> 
getName (); ?>
 count ()):?> 
__ ('Il n'y a aucun produit correspondant à la sélection.')?>
  
 
  
 getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">   
 getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> "> getName (); ?>  
 getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product, 'short')?>  getPriceHtml ($ _ product, true)?> 
 isSaleable ()):?> __ ('Ajouter au panier')?>  
__ (en rupture de stock)?>
  
 helper ('wishlist') -> isAllow ()):?> 
helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Ajouter à la liste de souhaits')?>
  getAddToCompareUrl ($ _ product)):?> 
| ">__ ('ajouter pour comparer')?>
  
 
 
  
 
 

N'oubliez pas de changer la valeur de la $ _categoryId variable en fonction de votre identifiant de catégorie.

Enfin, nous avons juste besoin de créer un bloc XML qui se chargera dans le modèle que nous avons créé ci-dessus. Nous ferons cela dans notre local.xml fichier comme si:

C'est tout ce qu'il y a à faire, assez simple, non? Ci-dessous une capture d'écran du produit fini.

2. Chargement de JavaScript dans le pied de page

Pour commencer, nous penserions que Magento a déjà intégré cette fonctionnalité via XML lorsque nous ajoutons nos scripts, une sorte de paramètre que nous pourrions transmettre, mais nous nous serions trompés - Magento ne va pas nous faciliter la tâche.!

WordPress, en revanche, le fait parfaitement via le wp_register_script. Peut-être qu'un développeur back-end y verra-t-il et ajoutera-t-il la possibilité de passer à travers un paramètre XML supplémentaire, il existe maintenant un projet parallèle pour quelqu'un avec qui craquer. 

N'importe quels preneurs?

Donc, heureusement pour le moment, il existe une méthode alternative pour que cela fonctionne.

Je pense qu'il est important de couvrir ce sujet car cela améliorera la vitesse de notre site, ce que tout le monde veut. J'ai tendance à laisser les fichiers JavaScript de base de Magento tels qu'ils sont dans le , Je peux les minimiser, mais à part cela, ils restent tels qu'ils sont.

Tout ce que nous ajoutons à Magento, comme jQuery et nos propres fonctions personnalisées, ne pose aucun problème en les chargeant dans le pied de page. Lors du développement d’un site Web, j’ai tendance à garder un œil sur le tag, lorsqu'un module tiers est installé, il ajoute généralement quelque chose ici. Avec un peu de travail, nous pouvons éditer le module XML tiers et le charger dans le pied de page. Cela vaut bien cinq minutes supplémentaires de le faire.!

Nous devons d’abord créer un bloc XML dans notre local.xml fichier dans le gestionnaire de présentation par défaut comme suit:

      skin_jsjs / build / jquery.min.js    

Notez que nous utilisons la même méthode d’ajout de fichiers JavaScript que celle décrite dans l’article précédent. Si vous avez besoin d'un rappel, cliquez ici. À des fins de démonstration, nous ajouterons une copie locale de jQuery..

Nous pouvons maintenant créer notre fichier de modèle. Créer un nouveau fichier dans:

app / design / frontend //default/page/html/footer-js.phtml

avec le contenu suivant:

getCssJsHtml ()?>

Enfin, nous devons ajouter une seule ligne de code dans nos fichiers modèles juste avant la fermeture. étiquette.

Nos fichiers modèles sont disponibles sur app / design / frontend / base / default / page / sans oublier de les copier sur notre propre thème. Il y a plusieurs fichiers modèles, j'ai rassemblé une liste ci-dessous:

• 1column.phtml
• 2columns-left.phtml
• 2columns-right.phtml
• 3columns.phtml

Voici un exemple de ce à quoi cela devrait ressembler:

… getAbsoluteFooter ()?>  getChildHtml ('footer.js')?>  

Avec toutes les étapes terminées maintenant, si nous actualisons notre page et visualisons le source, nous verrons maintenant le script en cours de chargement juste avant la fermeture. étiquette.

Si vous avez atteint ce stade, je pense que des félicitations s’imposent! Il y a beaucoup à prendre en une seule séance, mais j'espère que tout commence à avoir un sens..

Envelopper!

Cette série n’est que la partie visible de l’iceberg, Magento est une plate-forme très puissante qui a bien plus à offrir que ce que nous avons présenté. J'espère que cela vous a donné un aperçu des principes de thème de Magento et que vous pouvez le mettre à profit.

Il n'y a pas de meilleure façon d'apprendre Magento, mais pour rester coincé, vous apprendrez les ficelles du métier en un rien de temps..

Comme toujours, je suis ravi de pouvoir vous aider si vous avez besoin d'aide. Veillez également à vérifier mon plateau de cuisson Magento qui contient tout un tas de friandises à l'intérieur.

Jusqu'à la prochaine fois.