Brief Summary
This video explains the view part of Magento's MVC architecture, focusing on layouts, blocks, and templates. It demonstrates how to inject dynamic HTML into a product page by creating a module, modifying layout XML, creating a block with a function to fetch data, and using a template to display the data. The video also covers dependency injection to get the product model and stock information.
- Layouts define the structure of a page.
- Blocks handle the logic and data retrieval.
- Templates render the HTML.
Introduction to Magento's View Layer
The video introduces the concept of Magento's MVC architecture, specifically focusing on the "view" component. The view is further divided into layouts, blocks, and templates. The presenter aims to explain these concepts and demonstrate how they work together to render content on a Magento page.
Understanding Layouts
Layouts define the structure of a page, acting as a skeleton. They are written in XML and divide the page into containers like header, content, footer, etc. Layouts don't contain actual data but provide the structure into which data will be inserted.
Understanding Blocks
Blocks are PHP files responsible for the logic and data retrieval. A block prepares the data (e.g., logo image, search functionality, cart content) to be inserted into the layout containers. Blocks work in conjunction with templates to render dynamic content.
Understanding Templates
Templates are responsible for rendering the actual HTML. They work hand-in-hand with blocks. A block is a PHP file that provides the data, and the template uses this data to generate HTML. Without a template, a block's data cannot be displayed, and without a block, a template won't be rendered.
Injecting HTML into a Product Page
The presenter demonstrates how to inject HTML into a product page between the product name and the review section. This involves finding the correct layout file, inserting a block into a specific container within that layout, and linking the block to a template.
Locating the Layout File
The video explains how to find the layout file responsible for rendering the product view page. By navigating through the vendor/magento directory and using common sense, the presenter identifies catalog_product_view.xml as the relevant layout file. This file contains a container named product.info.main, which is used to insert the custom block.
Creating a Block and Template
The presenter creates a block (Stock.php) and a template (stock_left.phtml). Initially, the template displays "Hello World" to ensure the block is correctly inserted into the layout. The block file extends Magento\Framework\View\Element\Template.
Displaying Dynamic Data
The video demonstrates how to display dynamic data by creating a function (getRemainingQuantity) in the block that returns the current date. This function is then called in the template using the $block variable to display the date on the product page.
Fetching Product Quantity
To display the actual product quantity, the presenter modifies the block to fetch the quantity from the product model. This involves using dependency injection to inject the Magento\Framework\Registry and Magento\Catalog\Model\Product into the block's constructor. The registry is used to get the current product, and then the product's quantity is retrieved.
Using Stock Registry Interface
The video addresses an issue where the product quantity is not directly available in the product model. To solve this, the Magento\CatalogInventory\Api\StockRegistryInterface is injected into the block. This interface is used to retrieve the stock item, which contains the correct quantity.
Final Result and Conclusion
The presenter successfully displays the dynamic product quantity on the product page. The video concludes by summarizing the process of inserting a layout, using a block and template to display dynamic data, and highlighting the flexibility of Magento's layout system.
