Let’s just start creating this custom widget.

Open app folder and if you don’t have code folder in it please create it. After that open code folder and create a folder Vky. Here “Vky” is our namespace.
Then here is folder structure we will need. If you want to create all folders first go on create as shown in below image. Remember app/code/Vky then as shown in image.

Now follow the steps.

Step 1 : Create module.xml file in the app/code/Vky/WidgetBlock/etc/ folder with the following code:

Step 2 : Create registration.php file in the app/code/Vky/WidgetBlock/ folder with the following code:

Step 3 : Create widget.xml file in the app/code/Vky/WidgetBlock/etc/ folder with the following code:

Step 4 : Create CustomWidget.php file in the app/code/Vky/WidgetBlock/Block/Widget folder with the following code:

Step 5 : Here you can see custom_widget.phtml file so we need to create custom_widget.phtml file in the app/code/Vky/WidgetBlock/view/frontend/templates/widget/ folder with the following code:

Step 6 : Create WidgetWidth.php file in the app/code/Vky/WidgetBlock/Model/Config/Source/ folder with the following code:

Now open cmd go to your projects root directory and run php bin/magento setup:upgrade command.
So we have successfully created our custome widget.

Of course you want to check it

For that go to your admin panel and content->pages->Add New Page->Content click on “Show / Hide Editor” then click on “Insert Widget…” you will have list of widgets with one we just created “Vky custom widget”

Fill information and fill Add New Page information as well and go to page on frontend from URL key : “widget” like http://localhost/magento/widget/ you will have result like this

Custom Widget Display Frontend

Custom Widget Display
Frontend

Happy to help.

Be kind to one another. Take care!

No Comments

Post A Comment