Home / Blog / View Model in Magento 2
View Model in Magento 2

View Model in Magento 2

  • Anna KoshevaAnna Kosheva
  • September 19, 2022

    September 19, 2022

A view model is a class that allows you to pass data and additional functionality from a place that represents a business logic to a template. It can also provide data loaded from an entity, such as a product.

The View Model class can hold calculation logic, data lookups, and object fetches and passes them directly to a template, so the template’s reasoning can be as simple as possible.

View Models are usually located in the module’s directory called ViewModel. However, the location of view model classes is not limited to a ViewModel guide. You can create as many view models as needed to provide a required set of separate classes with its logic.

Today we’ll learn: 

  • What is a View Model?
  • How to use View Model?
  • When to use a View Model?

View Model Example

The concept of a view model is simple and, at the same time, powerful. Let’s jump into the example to understand the creation flow better. We must create a PHP class in the ViewModel directory to implement a view model.

class ProductViewModel
{
    private $resource;
    public function __construct(Resource $resource)
    {
        $this->resource = $resource;
    }
    public function getProductBySku(string $sku): ProductInterface
    {
         return $this->resource->load($sku, ‘sku’);
    }
}

The only requirement is that the ProductViewModel class must implement Magento\Framework\View\Element\Block\ArgumentInterface. Let’s add it.

use Magento\Framework\View\Element\Block\ArgumentInterface;
class ProductViewModel implements ArgumentInterface
{
    //...
}

Once the view model class is created, we must add it to a layout XML file. So that during layout rendering, it will find the view model class, instantiate it and add it into the pool of Block class dependencies.

A Layout XML file should be located in the module’s view/frontend/layout directory. We’ve discussed different layout configuration areas in the Template and Layout rendering lesson. Check the study to understand better frontend and adminhtml directory locations for layout xml files.

Inside the layout file, we have to add a new node in the and. The two attributes should be added to the node, the name of the view model variable and its type; the type should always be set to an object since we pass a class name that has to be initiated as a view model.

<?xml version="1.0"?>
<page>
    <body>
        <referenceBlock name="block.name">
            <arguments>
                <argument 
                    name="view_model" 
                    xsi:type="object">MageMastery\ViewModelExample\ViewModel\ProductViewModel</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

From the example above, a “block.name” can be a block’s name where we want to add a View Model class.

Inside the node, we have to provide the full class name of the view model. Remember, all objects injected to block arguments as view models should implement the ArgumentInterface interface.

Finally, the template of the block to which we’ve added the view model class can get access to the view model. The view model object is passed as an argument of the Template object. It can be accessed via the getData() method by providing the name of the idea we’ve provided in the layout XML file.

/** @var ProductData $productData */
$productData = $block->getData(“view_model”);

After we’ve received an access to the view model, we can start using it in the template.

<h1><?= $productData->getProductBySku(‘sku’); ?></h1>

And as a result, the data provided from the view model class is rendered by a template.

View Model Checklist

Let’s recap what we need to create and use a view model.

  1. Create a PHP class
  2. Add an ArgumentInterface
  3. Add a PHP Class into a layout xml
  4. Retrieve a View Model in a template
  5. Use View Model public methods

When to use a View Model?

A view model should be used every time you pass data from storage or the other object to a template for rendering. It includes calculation logic, data lookups, object fetches, etc.

A view model has to be used instead of a block, so your code will be less dependent on block changes in the Magento 2 framework.

Conclusion 

A view model in Magento 2 is a powerful mechanism that allows us to represent and provide data ready for rendering in a template. It provides a simple tool recommended every time a UI customization should be added.

  • Anna KoshevaAnna Kosheva
  • September 19, 2022

    September 19, 2022

Sign up and don't miss our awesome Mage Mastery lessons and updates!

Related Posts
How to create User Login with PHP and MySQL?

How to create User Login with PHP and MySQL?

editAnna Kosheva
edit October 04, 2022

Authenticate your users with the PHP and MySQL knowledge. Learn more about HTML form creation for it, MySQL database etc.

JavaScript Mixins in Magento 2

JavaScript Mixins in Magento 2

editAnna Kosheva
edit September 29, 2022

Read the blog and learn how to cleate a Magento 2 extension. This module can hide information in the dropbox. Why is it essential?

Test plan for manual QA in Magento 2

Test plan for manual QA in Magento 2

editAnna Kosheva
edit September 27, 2022

How can you make a test plan for a QA? Read about test plan creation, types of them and a template.

If you like this blog post, you may want to watch
Start: March 28, 2021
Intermediate
 
Max Pronko
Web Icon20 lessons
Clock Icon15 hours
Adobe Certified Professional — Magento Commerce Developer Study Group is an 10-week (1.5 hours/week) instructor-led study group. This study group will help PHP and JavaScript developers evaluate their readiness and prepare for the Adobe Certified Professional — Magento Commerce Developer exam.
Start: March 15, 2021
Advanced
 
Max Pronko
Web Icon80 lessons
Clock Icon15 hours
Magento 2 Development Workshop is for those who want to practice and learn how to implement Magento 2 extensions. During the workshop, you will have lots of homework, practical exercises, video lessons, and theory that will give you the required skills for your Magento 2 job.
2022 © Made with ❤ by Max Pronko