View our collection in our block template magento2

Today we will see how to get a collection and to display it in a magento2 template.

Reminder on the Magento2 MVC

Remember what we saw in the previous tutorials. When we go on http://www.votredomaine.lan/contacts/test/index Magento2 will call our 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();
    }
}

In this action it loads the layout and display it. Magento will fetch the file 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>

It knows the information to display for our action thanks to the directives contained in this layout file. Here magento display our block using the class Pfay\Contacts\Block\Contactslist for the "logical" part and the Pfay_Contacts::test_index.phtml template ie app/code/Pfay/Contacts/view/frontend/templates/test_index.phtml for the "view" (template) part.

Edit our magento2 block to get the collection

We will now modify our block so that it automatically takes a contact type object when it is created that will allow us to retrieve its collection and pass it to our template. Edit your Contactslist.php file like this:


<?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;
    }
}

Show the collection items in the template

We will then edit our template file app/code/Pfay/Contacts/view/frontend/templates/test_index.phtml as follows:


<?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>

You notice that we use the function getContacts() created in the block just above. Display your page (do not forget to empty your cache) and you should normally see your contact table displayed on the magento front office. Congratulations this is the end of this tutorial which is finally a reminder for the developers magento2 :)

Available documents for this article :

Source code

Books that can help you :

Article BackThe form (uiComponent) of the backend and the CRUD in magento2 admin Next itemOverloading a native magento2 class (Model, Block, Helper, Action ...)