How to add additional tab or panel in admin side in nopCommerce ?

Nopcommerce is one of the best open source ecommerce platforms built with ASP.NET Core and Sql server. Recently they added MySQL support with the solution.

Adding a tab or panel in nopCommerce admin panel is essential when you want to show extra functionality with the existing nopCommerce entity. This post only helps you about How to add tab or panel, if you don’t know how to write nopCommerce plugin then please check here.

So Question is, “How to add additional tab or panel in admin side?”

Here is the Answer, From nopCommerce 4.20+ to add an additional tab or panel in the admin side we have to follow these steps.

nopCommerce introduced Admin widget zones from nopCommerce 4.20.
1) you have to inherit IWidgetPlugin in yourplugin.cs file.
2) Implement “GetWidgetZones” method.
if you don’t know which admin widget is used in the admin page. Then you can open that “view” in Visual Studio or any other editor file.
3) Now you have to create a component in a similar way that we do it for public area components.
4) Create a view in the following way,

<nop-panel id="custom-{ACTION}-panel">
    <div class="panel panel-default collapsible-panel" data-panel-name="custom-{ACTION}" id="custom-{ACTION}">

        <div class="panel-heading" data-hideattribute="{ENTITY}Page.{ACTION}">
            <div class="icon-container">
                <i class="fa panel-icon"></i>
            </div>
            <span>{PANEL TITLE}</span>
            <i class="toggle-icon fa fa-plus"></i>
        </div>

        <div class="panel-container collapsed">
            <div class="panel-body">
                 {YOUR HTML}
            </div>
        </div>
    </div>
</nop-panel>

so considering if I want to add an extra panel in order edit page then,
Entity =order
Action = order-details
Panel Title = custom details

Hire us for nopCommrece development