This blog was updated on Aug 8th, 2017 based on readers’ feedback.

Magento 2 developers have a need to create category widgets that can be positioned in any page of the store. This blog provides the complete code to create such a widget that will display the categories along with their respective sub-categories.

Step 1

Create a module. Refer the blog How to create a module in Magento 2?

Step 2

To begin with, we need to create an XML that should render and indicate the widget.

Create widget.xml in app/code/Companyname/Modulename/etc/. Here, for instance, Company name will be Dckap and module name will be Showcategories.

In the above code, we get category-id as parameters to get displayed wherever the widget is called.

When you navigate to the admin -> content -> widgets -> Add New, you will see the page as seen below

Widgets

magento 2

magento 2

Step 3

Now we need to create a Block file in the path app/code/Dckap/Showcategories/Block/Showcategories.php as specified in the widget.xml class=”Dckap\Showcategories\Block\Widget\Showcategories”.

In this block, we are going to collect all the data to show the categories and their subcategories along with the image.

Step 4

In this step, we are going to create a phtml in the path app/code/Dckap/Showcategories/view/frontend/templates/widget/showcategories.phtml

Once finished, follow usual Magento procedures like setup:upgrade, cache flush etc

Now the widget is ready to show specific categories in the pages you want. The pages can be selected in the page layouts.

Please refer the screenshot below.

magento 2

Was this helpful? Please let us know your feedback.

HAPPY CODING!!!

Be the first to Know

Subscribe to our blog to get the latest articles directly to your inbox.

READY TO DRIVE SALES?

Request a Quote Today

Request a Quote

Leave a Reply

8 Comments on "How To Create A Category Widget In Magento 2?"


Guest
Tomas Novoselić
1 year 3 months ago

Code is very bad. Too many unnecessary classes included and not used. Not using repositories. Loading categories in loop. Not even trying to use any coding standard (especially not Magento 2 one). This is school example of how not to code M2 and how to end up with performance and maintenance issues.

Jeyakiruthika
Author
1 year 3 months ago

Hi Tomas,

Thanks for your comment and feedback. Sorry for the slip. We will fix this and update.

Jeyakiruthika
Author
1 year 3 months ago

Hi Tomas,

Thanks for your comments. We have updated the blog.

Guest
Me
1 year 3 months ago

I have never seen code this bad. Sorry, but just look at it.

Jeyakiruthika
Author
1 year 3 months ago

Hi,

Thanks for your comment and feedback. Sorry for the slip. We will fix this and update.

Jeyakiruthika
Author
1 year 3 months ago

Hi,

Thanks for your comments. We have updated the blog.

Guest
Syed Muneeb Ul Hasan
1 year 7 months ago

Great tutorial!

Jeyakiruthika
Author
1 year 7 months ago

Hi Syed,

Thanks for your comments.
Please keep reading our blogs and subscribe to the same.