Magento 2 Module

How to add a new Widget into a custom module in Magento 2

Hide/Show description

Hi Everybody, I am Cuong, Welcome to my Magento 2 Tutorial video series. #magento2tutorial In the previous lessons, I showed everyone: 1. How to create a new module in Magento 2, at the video link https://www.youtube.com/watch?v=JwxtiEwEZpk 2. How to add new tables for a custom module in Magento 2, at the video link https://www.youtube.com/watch?v=gtSx1BUxYtw 3. How to create an adminhtml grid using UI component in Magento 2, at the video link https://www.youtube.com/watch?v=qeIjXiAI5JY 4. How to create a form using UI component in Magento 2, at the video link https://www.youtube.com/watch?v=FCgi2-ZB7fA 5. How to upload an image using fileUploader in Magento 2, at the video link https://www.youtube.com/watch?v=YZ3JQ9sH6V0 6. How to validate the data before saving it in Magento 2, at the video link https://www.youtube.com/watch?v=yikk602Fv-I 7. How to display an image in the admin grid in Magento 2, at the video link https://www.youtube.com/watch?v=_bI8mJccH-E 8. How to use the Inline Edit Component in Magento 2, at the video link https://www.youtube.com/watch?v=Xm-rtcS0J3A 9. How to add the JS and CSS files into a custom module in Magento 2, at the video link https://www.youtube.com/watch?v=JGli227W1ks To continue the previous lessons, today, I am going to show everyone, How to add a new Widget into a custom module in Magento 2. In this video, I will create a new widget called Banner Slider, that allows displaying the banners slider via the group name. This the widgets list available default of Magento 2. Okie, let's go. To complete this exercise you need to complete the following high-level steps: 1. Create the new widget - Create the file named widget.xml in the path app\code\PHPCuong\BannerSlider\etc\ - Create the file BannerSlider.php in the path app\code\PHPCuong\BannerSlider\Block\Widget - Create the file Options.php in the path app\code\PHPCuong\BannerSlider\Model\Group\Config\Source - Create the file named list.phtml in the path app\code\PHPCuong\BannerSlider\view\frontend\templates\banner 2. Add the Widget named Banners Slider to the Homepage For now, I will add the Homepage Slider to the top of the homepage before Hot Sellers For now, I will add the Brand Slider to the bottom of the homepage 3. Test and see the results - php bin/magento cache:flush It works perfectly. Thank you for your watching. If you have any questions about this exercise please feel free to leave a comment below. Don't forget to like, comment, share and subscribe to my channel for getting the latest videos. Please do not hesitate to contact me if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2. You can get the source code of this tutorial on the github https://github.com/php-cuong/magento2-banners-slider

Today Hex Color Code

#052418
#264539
#47665a
#68877b
#89a89c
#aac9bd