A Simple UI Component in Magento 2
Many of you are aware about new type of functionality in Magento 2 called UI Component. It helps to render different content using JavaScript and HTML files and data provided from the backend (PHP) part of a Magento 2 application.
In this post I will cover a creating of a simple UI Component in Magento 2. The “Hello World!” text will be rendered with the help of UI Component on all frontend pages in a body.
The fastest and straight forward way of creating a new UI Component includes the following steps:
- Create the module directory.
- Create the required registration.php file
- Create the module.xml configuration file
- Create the default.xml layout configuration file
- Add new block declaration under the “content” container in the default.xml file
- Create new script.phtml file
- Add HTML markup with the data-bind attribute and scope name for the UI Component
- Add UI component configuration via text/x-magento-init script
- Create new JavaScript part of the UI Component in the component.js file
- Enable module by running bin/magento module:enable command
- Install module by running bin/magento setup:upgrade command
In case you want to watch the step-by-step tutorial on how to create a Simple UI Component in Magento 2, feel free to watch the video from Magento DevChannel.
Also, I’ve created and shared all the code which has been created during the video episode on the GitHub. Check the mcspronko/magento2-ui-component repository.
Thank you for reading!
—
Connect with me over the social channels: Twitter, YouTube, Magento 2 Blog, Instagram, Facebook, Subscribe to Devletter.
Business enquiries: Pronko Consulting
Pronko Consulting is an e-commerce agency with a primary focus on Magento platform. We specialize in B2C and B2B markets including project planning, software development and post-launch maintenance.
