Afficher notre collection dans notre template de bloc magento2

Aujourd'hui nous allons voir comment récupérer une collection, et l'afficher dans un template magento2.

Rappel sur le MVC de magento2

Rappelez vous ce qu'on a vu dans les tutoriaux précédents. Quand on va sur http://www.votredomaine.lan/contacts/test/index Magento2 va aller sur notre action app/code/Pfay/Contacts/Controller/Test/Index.php :


<?php
namespace Pfay\Contacts\Controller\Test;

use Magento\Framework\App\Action\Action;

class Index extends Action
{
    public function execute()
    {
        $this->_view->loadLayout();
        $this->_view->renderLayout();
    }
}

Dans cette action on lui dit d'aller charger le layout et de l'afficher. Il va donc aller chercher le fichier app/code/Pfay/Contacts/view/frontend/layout/contacts_test_index.xml.


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Pfay\Contacts\Block\Contactslist" name="contactForm" template="Pfay_Contacts::test_index.phtml"></block>
        </referenceContainer>
    </body>
</page>

Il connait les informations à afficher pour notre action grâces aux directives contenues dans ce fichier de layout. Ici on lui dit d'aller afficher notre bloc utilisant la classe Pfay\Contacts\Block\Contactslist pour la partie "logique" et le template fay_Contacts::test_index.phtml c'est à dire app/code/Pfay/Contacts/view/frontend/templates/test_index.phtml pour la partie "affichage".

Editer notre bloc magento2 pour récupérer la collection

On va maintenant modifier notre bloc magento2 pour qu'il prenne automatiquement un objet de type contact lors de sa création qui va nous permettre de récupérer sa collection et de la passer à notre template. Editez donc votre fichier Contactslist.php comme ceci :


<?php
namespace Pfay\Contacts\Block;
use Magento\Framework\View\Element\Template;

class Contactslist extends \Magento\Framework\View\Element\Template
{
    private $_contact;

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Pfay\Contacts\Model\Contact $contact,
        \Magento\Framework\App\ResourceConnection $resource,
        array $data = []
    ) {
        $this->_contact = $contact;
        $this->_resource = $resource;

        parent::__construct(
            $context,
            $data
        );
    }

    public function getContacts()
    {
        $collection = $this->_contact->getCollection();
        return $collection;
    }
}

Afficher la collection dans le template

On va ensuite éditez notre fichier de template app/code/Pfay/Contacts/view/frontend/templates/test_index.phtml de la façon suivante:


<?php
$contacts = $this->getContacts();
?>
<div id="contactslist">
    <h2>empty</h2>
    <table>html/
        <tr>
            <th>Name</th>
            <th>email</th>
        </tr>
        <?php foreach ($contacts as $contact): ?>
            <tr>
                <td><?php echo $contact->getName(); ?></td>
                <td><?php echo $contact->getEmail(); ?></td>
            </tr>
        <?php endforeach; ?>
        <tr>
            <td>there is no contact in this list</td>
        </tr>
    </table>
</div>

Vous remarquez qu'on utilise la fonction getContacts() crée dans le bloc juste au dessus. Affichez votre page (n'oubliez pas de vider votre cache) et vous devriez normalement voir votre tableau de contacts s'afficher sur le front office de magento. Félicitation c'est la fin de ce tutoriel qui n'est finalement qu'un rappel pour les développeurs magento2 :)

Documents disponibles pour cet article :

Source code

Les livres qui peuvent vous aider :

Article PrécédentLes formulaire (uiComponent form) du backend et le CRUD dans l'admin magento2 Article suivantSurcharger une classe native magento2 (Model, Block, Helper, Action...)