Développement de blocs personnalisés dans Magento

Dans ce tutoriel, nous allons explorer les blocs Magento, l’un des composants essentiels de l’architecture Magento. Nous verrons la différence entre les blocs structurels et les blocs de contenu. Je vais également vous montrer comment créer des blocs personnalisés par programmation.

Que sont les blocs dans Magento?

Dans l'architecture Magento, un "bloc" est l'un des premiers éléments de la structure de la structure de Magento. Chaque page de Magento est décorée par le fichier "Layouts" et le contenu est rempli par les "Blocs" des différents modules. Les blocs Magento sont un moyen très puissant et flexible d’insérer votre contenu dans les modèles existants. D'autre part, vous pouvez également utiliser des fichiers XML de présentation pour supprimer ou repositionner facilement les blocs existants..

Il n’est pas surprenant que, compte tenu de la flexibilité de l’architecture Magento, vous puissiez également développer vos propres blocs à l’aide d’un module personnalisé dans Magento. Supposons, par exemple, que vous souhaitiez tirer quelques produits spéciaux pour la saison des fêtes à venir et que vous souhaitiez les afficher en première page. Dans ce cas, vous pouvez facilement accomplir la tâche en implémentant un bloc personnalisé. Et oui, c'est aussi l'objectif principal de ce tutoriel!

Blocs structurels vs blocs de contenu

Avant de passer à notre mission de blocs personnalisés, je voudrais expliquer la différence entre les blocs structurels et les blocs de contenu. Regardons rapidement chaque type de bloc.

Blocs structurels

Nous pourrions dire que les "blocs structurels" sont les conteneurs contenant les "blocs de contenu". Les blocs structurels eux-mêmes n'ont pas de contenu réel à afficher, mais ils affichent à leur tour les blocs de contenu à la fin. Comme leur nom l'indique, ils servent à structurer le contenu de la page entière.

Par exemple, "En-tête", "Pied de page", "Gauche" et "Droite" sont des blocs structurels dans Magento. Des "blocs de contenu" sont attribués aux différentes positions structurelles de la mise en page de la page Magento, qui affiche à son tour le contenu réel des blocs de contenu..

Blocs de contenu

Les «blocs de contenu» représentent la puissance de feu réelle, générant le contenu réel pour l'affichage. Comme nous venons de le voir dans la section précédente, vous devez affecter le bloc de contenu à l'un des blocs structurels de l'affichage frontal. Il existe d'autres moyens permettant d'insérer les blocs de contenu à l'aide de codes abrégés, mais nous en verrons plus à ce sujet plus tard..

Les blocs de contenu peuvent être de toutes les formes, du simple bloc de contenu statique à la liste des produits les plus récents de la page d'accueil! En fait, la majorité du contenu est générée par les blocs de contenu répartis sur les différents modules de Magento..

Donc, à présent, vous devriez comprendre la différence fondamentale entre les deux types de blocs dans Magento. Commençons donc par le développement de blocs personnalisés!

Développement de blocs personnalisés

Nous allons développer un module Magento personnalisé très basique pour le développement de notre bloc personnalisé. Notre bloc personnalisé sera un simple bloc affichant les produits les plus récents disponibles dans le magasin..

Je suppose que vous connaissez la structure de base et les conventions des fichiers de module Magento. Voyons maintenant la structure de fichier que nous devons implémenter pour notre bloc personnalisé..

  • app / etc / modules / Envato_All.xml: C'est un fichier utilisé pour activer notre module personnalisé.
  • app / code / local / Envato / Recentproducts / etc / config.xml: C'est un fichier de configuration de module.
  • app / code / local / Envato / Recentproducts / Model / Recentproducts.php: C'est un fichier de modèle qui fournit la gamme des produits les plus récents.
  • app / code / local / Envato / Recentproducts / Block / Recentproducts.php: C'est le fichier de bloc principal de notre bloc personnalisé.
  • app / design / frontend / default / default / template / recentproducts / recentproducts.phtml: C'est un fichier modèle qui contient les éléments liés à XHTML.

Configuration des fichiers

Conformément aux conventions de Magento, nous devons d’abord créer le fichier activateur de module. Créer app / etc / modules / Envato_All.xml et collez le contenu suivant dans ce fichier. Nous avons utilisé Envato comme notre espace de noms de module et Produits recents comme nom de notre module. Ça va permettre à notre Produits recents module par défaut.

     vrai local   

Créer app / code / local / Envato / Recentproducts / etc / config.xml et collez le contenu suivant dans ce fichier. Nous venons de déclarer les noms de classe de modèle et de bloc conformément aux conventions de fichier XML du module Magento.

     1,0      Envato_Recentproducts_Block     Envato_Recentproducts_Model    

Maintenant, créez le fichier de modèle à app / code / local / Envato / Recentproducts / Model / Recentproducts.php. Collez le contenu suivant dans le fichier de modèle.

getCollection () -> addAttributeToSelect ('*') -> setOrder ('entity_id', 'DESC') -> setPageSize (5); retourner les produits $; 

Donc, comme vous pouvez le constater, nous venons de déclarer une méthode getRecentProducts qui renverra les cinq derniers produits ajoutés.

En outre, créez le app / code / local / Envato / Recentproducts / Block / Recentproducts.php fichier et insérez le code suivant dans ce fichier.

getRecentProducts (); foreach ($ produits en tant que $ produit) $ arr_products [] = array ('id' => $ product -> getId (), 'name' => $ product -> getName (), 'url' => $ produit -> getProductUrl (),);  return $ arr_products; 

Dans le contexte du tutoriel, c'est l'un des fichiers les plus importants que nous recherchions! Oui, c'est un fichier lié à notre bloc personnalisé.

Dans ce fichier, nous appellerons notre méthode de modèle getRecentProducts pour charger le tableau des produits à l'aide du Mage :: getModel beauté de Magento. Ensuite, nous allons parcourir les données et configurer le $ arr_products tableau qui sera nécessaire dans notre fichier de modèle de bloc.

Enfin, nous aurons besoin d’un fichier make modèle à l’adresse suivante: app / design / frontend / default / default / template / recentproducts / recentproducts.phtml. Il contient le code XHTML associé à l'affichage des produits..

getRecentProducts (); ?> 

Produits recents

">

Tout d’abord, nous allons chercher le tableau de produits en utilisant le getRecentProducts méthode du bloc. Une fois que nous obtenons cela, nous parcourons simplement les données et préparons le code XHTML pour notre bloc. C'est aussi simple que ça!

Nous avons terminé avec notre module de bloc personnalisé. Dans la section suivante, nous verrons comment utiliser les codes de fonction de bloc pour afficher notre bloc dans les premières pages..

Tester le front - fin

Comme nous l'avons vu précédemment, les blocs de contenu sont affichés en les affectant à l'un des blocs structurels. Et oui, vous pouvez attribuer les blocs personnalisés de la même manière que les autres blocs principaux de Magento, soit par fichiers de mise en page, soit par pages CMS..

Pour insérer votre bloc personnalisé à l'aide du fichier de mise à jour, vous pouvez utiliser le code suivant.

D'autre part, si vous souhaitez afficher votre bloc personnalisé à l'aide de la page CMS, voici le code que vous devez utiliser..

block type = "recentproducts / recentproducts" name = "recentproducts_recentproducts" template = "recentproducts / recentproducts.phtml"

Voyons rapidement à quoi ça ressemble au début quand il est inséré dans une des pages du CMS. Connectez-vous à votre back-end Magento et allez à CMS> Pages, et ajouter une nouvelle page CMS en utilisant Ajouter une nouvelle page. Entrez les informations requises et collez votre code court de bloc comme indiqué dans la capture d'écran suivante..


Enregistrez la page et allez au début pour voir à quoi elle ressemble!


Ça a l'air génial, n'est-ce pas? C’est donc tout pour le moment et je reviendrai avec des choses plus excitantes. J'adore entendre vos pensées en utilisant le flux ci-dessous.