How can my plugin add a tab into product or category admin view?

Hi All,

is there native support for adding a tab with external/plugin functionality to the main view of the products or categories?

Regards,
Boris

vorodot wrote:

Yes, you can do it.

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

Here is a simple example for product:

public class AdminTabStripConsumer : IConsumer<AdminTabStripCreated>
{
  public void HandleEvent(AdminTabStripCreated tabEventInfo)
  {
    if (tabEventInfo != null && !string.IsNullOrEmpty(tabEventInfo.TabStripName))
    {
      if (tabEventInfo.TabStripName == "product-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 == "product-edit" - product-edit is the name of the tabstrip, which is defined in the "Presentation\Nop.Web\Administration\Views\Product\_CreateOrUpdate.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)
{
        // do code here.
  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 it will help you.

Perfect work!

Thanks ( :