Mises en page et modèles personnalisés avec Magento

Dans la première partie de cette série, nous avons appris les bases du développement de modules Magento, notamment la structure de répertoires Magento, la structure de modules personnalisée, et nous avons créé un module de base "Hello World" afin de comprendre le fonctionnement des contrôleurs dans Magento..

Dans cet article, nous allons apprendre à créer des fichiers de blocs et de mises en forme. Plus précisément, nous verrons comment fonctionnent les fichiers de présentation et les fichiers de blocs dans Magento, ainsi que le rendu des fichiers de présentation..

À la recherche d'une solution rapide?

Si vous cherchez une solution rapide, Envato Market propose une grande collection de thèmes et de modèles Magento. C'est un excellent moyen de constituer rapidement une collection d'objets low poly de haute qualité pour votre projet..

Vous pouvez également obtenir une aide personnalisée en embauchant l'un des fournisseurs de services Magento sur Envato Studio..

Mais passons au tutoriel! Tout d'abord, nous verrons quels sont les fichiers de disposition et de blocage et leur utilité pour le rendu des pages frontales dans Magento, puis nous verrons comment les inclure dans notre module personnalisé..

Qu'est-ce que le fichier de mise en page?

Comme leur nom l'indique, les fichiers de présentation sont utiles pour le rendu des pages de couverture de Magento. Les fichiers de mise en page sont des fichiers XML qui résident dans app> conception> interface> votre interface> votre thème> mise en page.. Ici, vous pouvez voir qu’il existe de nombreux fichiers d’agencement pour un module donné. Chaque module Magento a ses propres fichiers de présentation, un peu comme le module client a la client.xmlfichier de mise en page, module de catalogue ont catalogue.xmlfichier de mise en page, etc. Ces fichiers de mise en forme contiennent des blocs structurels et des blocs de contenu.

Si vous vous demandez pourquoi Magento a besoin de ces blocs, vous pouvez en apprendre plus à ce sujet dans la première partie de la série..

Creusons plus dans les fichiers de mise en page

Explorons davantage les fichiers de mise en page en regardant un exemple. Allez dans app> design> frontend> base> layoutet ouvrez le client.xmlfichier. Ici, tous les blocs sont enroulés autour de étiquette. Vous pouvez voir les différents qui contient des blocs spécifiques.

Voir l'extrait ci-dessous:

  Formulaire d'inscription au compte client          Champs de formulaire avant

Manipuler

Les poignées sont l'entité principale via laquelle Magento identifie le bloc à charger lorsqu'un module particulier est appelé.. est le descripteur spécifique au module. Ce descripteur est déclenché lorsque quelqu'un ouvre la page d'enregistrement du client.

Chacun traite un bloc imbriqué au contenu spécifique à la page. Certains fichiers de mises en page contiennent les manipuler. À ce stade, vous pouvez vous interroger sur la différence entre les descripteurs spécifiques au module et les descripteurs par défaut. En bref, les descripteurs spécifiques aux modules ne rendent les blocs qu’il contient lorsque ce module est rendu dans le navigateur, tandis que les descripteurs par défaut se chargent dans la plupart des pages..

À l'intérieur de la poignée, il y a différents blocs qui spécifient le rendu du fichier de modèle lors de l'appel de ce bloc. Les blocs sont de deux types:

Structurer Blocs
Blocs de contenu

Dans notre fichier de mise en page, nous définissons uniquement le Blocs de contenupuis on les enveloppe dans Structurer Blocs. Par exemple, si quelqu'un appelle une page d'enregistrement de client et que nous voulons le charger à gauche, à droite, dans le contenu ou le pied de page, nous encapsulons ce bloc dans son bloc structurant respectif. Ici, nous avons encapsulé deux blocs à l'intérieur du bloc "content" qui est un bloc structurant.

Blocs contient les attributs suivants:

type définit les classes de blocs dans lesquelles on peut définir les différentes fonctionnalités
prénom définitle nom unique d'un bloc particulier afin que les autres blocs puissent faire référence à un bloc existant et le prolonger
avant après sont des attributs que nous pouvons définir qui nous permettent de définir la position de notre bloc à l'intérieur du bloc structurant
modèle définit le réel phtml nom de fichier et chemin d'accès vers notre code HTML et PHP
action nous permet de déclencher n'importe quelle action comme charger du JavaScript et tout en utilisant cet attribut.
comme est un attribut principalement utilisé pour les blocs de structuration

le La balise est utilisée pour étendre les blocs existants. Dans ce cas, nous avons étendu le bloc de contenu et y avons inséré notre propre bloc. Vous devez utiliser le nom de bloc correct que vous souhaitez étendre.

le tag est utilisé pour supprimer le bloc spécifique. Par exemple, disons que sur la page d’enregistrement de votre compte, vous ne souhaitez pas afficher les colonnes droite et gauche. Dans ce cas, vous pouvez simplement supprimer ce bloc avec la syntaxe suivante .

Enfant

Lorsque vous placez un bloc sous un autre, ce bloc est appelé bloc enfant. Chaque fois que notre bloc parent est appelé par notre module, le bloc enfant est automatiquement appelé.

Vous pouvez également appeler le bloc enfant séparément avec la syntaxe ci-dessous dans votre fichier de modèle
echo $ this-> getChildHtml ('enfant');

racine

Ouvrir page.xmlfichier de mise en page, vous trouverez le bloquer qui ressemble à ci-dessous

Magento commence le rendu à partir du bloc racine. Tous les autres blocs sont des blocs enfants du bloc racine. Le bloc racine définit la structure de la page. Ici, vous pouvez voir qu’actuellement il est réglé sur 3columns.phtml, vous pouvez changer cela en 1column.phtml, 2columns-right.phtml ou 2columns-left.phtml.

Ajout de CSS et de JavaScript à la mise en page XML

Pour une page particulière, vous pouvez ajouter des fichiers CSS et JavaScript dans une balise de présentation comme ceci:

  css / styles.css

Ici, vous pouvez voir que nous avons ajouté un fichier CSS et un fichier JavaScript dans le tête de notre page de compte client.

Quelles sont les classes de blocs?

Les classes de bloc permettent de définir les fonctions spécifiques à un bloc particulier. Le fichier de classes de blocs est dans app> code> local / communauté / noyau> l'espace de noms de votre module> le nom de votre module> Bloquerannuaire. Ce fichier contient les fonctions que nous pouvons utiliser directement avec $ thismot-clé dans le fichier modèle spécifique au bloc. Prenons un exemple pour comprendre les classes de blocs.

Aller à review.xml fichier qui réside dans app> design> frontend> base> default> layout répertoire et trouvez la ligne de code ci-dessous:

Ici vous pouvez voir le bloc review / customer_recentqui font référence au modèle recent.phtml. Aller à app> design> frontend> base> défaut> template> review> customeret ouvert recent.phtml.

Dans ce fichier, vous pouvez voir deux fonctions appelées à l’aide de $ this mot-clé. Elles sont $ this-> getCollection () et $ this-> count (). Ces fonctions sont définies dans leur fichier de classes de blocs recent.php qui réside dans app> code> core> Mage> review> Bloquer> clientannuaire.

Ici, le bloc type = "review / customer_recent" se réfère à la Mage_Review_Block_Customer_Recent classe de bloc qui est définie dans recent.php fichier. Quelles que soient les fonctions que vous définissez dans cette classe, vous pouvez l’utiliser directement dans le fichier modèle correspondant avec $ this.

Création d'une disposition de module personnalisée et de fichiers de blocs

Enfin, il nous restait un module personnalisé "Hello World" avec contrôleur. Ici, nous créons le fichier d’agencement de notre module personnalisé..

Pour créer le fichier de présentation, nous devons d’abord créer le fichier de classe de bloc. Avant d'ajouter le fichier de classe, nous devons dire à notre module que nous incluons les fichiers de blocage. Alors allez à app> code> local> Chiragdodia> Mymodule> etc>config.xmlet ajoutez la ligne de code ci-dessous:

    mymodule.xml         Chiragdodia_Mymodule_Block

Le fichier XML final contient les lignes de code suivantes:

    0.1.0       la norme  Chiragdodia_Mymodule mymodule       mymodule.xml         Chiragdodia_Mymodule_Block

Créer le fichier de classe de bloc

Ensuite, allez à app> code> local> Chiragdodia> Mymodule> Blocet créez le fichier Mymodule.phpqui contient ci-dessous des lignes de code

Ici nous avons déclaré la classe Chiragdodia_Mymodule_Block_Mymodule qui contient la fonction ma fonction que nous pouvons appeler directement à partir de notre fichier de modèle de mise en page.

Créer le fichier XML de mise en page

Aller à app> design> frontend> default> default> layoutet créer le mymodule.xml fichier qui contient ci-dessous des lignes de code

Créer le fichier modèle

Aller à app> design> frontend> default> default> templateet créer le mymodule.phtml fichier. Dans ce fichier, nous appellerons la fonction ma fonction que nous avons déclaré dans notre classe de bloc.

ma fonction (); ?>

Si tout est correct jusqu'à présent, vous verrez la sortie avec une disposition en trois colonnes en accédant à l'URL yoursite.com/index.php/mymodule/index.

Dans certaines versions de Magento, les thèmes par défaut ne contiennent pas les répertoires de présentation et de modèle. Dans ce cas, vous pouvez créer votre mise en page et votre fichier modèle app> design> frontend> baseannuaire.

Voici comment fonctionnent les mises en page dans Magento. Dans l'article précédent, nous avons créé le module simple "Hello World". Dans cet article, nous l'avons créé à l'aide d'un fichier de mise en page. La structure de mise en page de Magento est un peu difficile à comprendre au début, mais une fois que vous aurez commencé à la modifier, vous aurez facilement l’idée derrière tout cela..

Dans cet article, j'ai joint les fichiers de démonstration du module que nous avons créés jusqu'à présent. N'hésitez pas à commenter et poser toutes les questions que vous pourriez avoir sur cette question particulière.

Code