Add extra tab to Admin > Edit Order Details

Hello,

Without modifying the NOP core is it possible to add an additional tab to the Admin > Edit Order Details page please?

At the moment it has tabs of "Info", "Billing Info", "Shipping Info", "Products" & "Order notes"

I have a requirement to add an additional tab to this page which has custom functionality in the tab....

Is this possible and can anyone suggest the best way to achieve it please?

Many thanks

Hi,

Yes, it is possible.

All you need to do is to inherit from the IConsumer interface and implement the required method.

Here is a simple example:

public class AdminTabStripConsumer : IConsumer<AdminTabStripCreated>
{
  public void HandleEvent(AdminTabStripCreated tabEventInfo)
  {
    if (tabEventInfo != null && !string.IsNullOrEmpty(tabEventInfo.TabStripName))
    {
      if (tabEventInfo.TabStripName == "order-edit")
      {
        var urlHelper = new UrlHelper(HttpContext.Current.Request.RequestContext);

        object objectId = HttpContext.Current.Request.RequestContext.RouteData.Values["id"];

        if (!string.IsNullOrEmpty(objectId.ToString()))
        {
          string text = "Additional tab";
          string content = urlHelper.Action("YourController", "YourAction", new { id = objectId });

          tabEventInfo.BlocksToRender.Add(
            new MvcHtmlString(
              "<script>" +
                "$(document).ready(function() {" +
                  "$('#product-edit').data('kendoTabStrip').append(" +
                    "[{" +
                      "text: '" + text + "'," +
                      "contentUrl: '" + content + "'" +
                    "}]" +
                  ");" +
                "});" +
              "</script>"
            )
          );
        }
      }
    }
  }
}

tabEventInfo.TabStripName == "order-edit" - order-edit is the name of the tabstrip, which is defined in the "Presentation\Nop.Web\Administration\Views\Order\Edit.cshtml".

string content = urlHelper.Action("YourController", "YourAction", new { id = objectId }); - change YourController and YourAction to correspond with yours.

In the controller, you can define your logic for preparing the view. Example:

public ActionResult Action(int? id)
{
        // Add some logic, if you have any.
  return PartialView("Path/to/your/View.cshtml", id);
}

View.cshtml:

@model int?

@{
    var productId = Model;

    if (productId == null)
    {
        <div>Save before edit</div>
        return;
    }
}

<div>Your code here</div>

This will render an additional tab with name "Additional tab" and when you click it, it will make a request to your controller and action to get the html.

Hope this helps!

If there is anything that is not clear, please ask!

Regards,
Hristian

Cannot read property 'append' of undefined

 .data('kendoTabStrip') 

 .data('kendoTabStrip') 

Hello,


I am using 3.80 version.

Please help.

Vishal

Hello,


I am using 3.80 version.

Please help.

Vishal

You have to follow the previous post==>https://www.nopcommerce.com/boards/t/43586/adding-tab-via-plugin-in-version-380.aspx#173145