Adding tab via plugin in version 3.90

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.
6 years ago
Hi All,

This is related to this post https://www.nopcommerce.com/boards/t/43586/adding-tab-via-plugin-in-version-380.aspx and I'm trying to replicate this in Nop 3.90 and the code works fine, however, if I try this code using product-edit, for some reason the tab (test config) is not showing in product edit.

Appreciate any help. Thanks!


        public void HandleEvent(AdminTabStripCreated eventMessage)
        {
_genericAttributeService, _permissionService);
                    int Id = Convert.ToInt32(System.Web.HttpContext.Current.Request.RequestContext.RouteData.Values["id"]);
                    var actionName = "Action";
                    var controllerName = "Sample";
                    var routeValues = new RouteValueDictionary()
                                      {
                                          {"Namespaces", "Nop.Plugin.Misc.Test.Controllers"},
                                          {"area", null},
                                          {"id", Id}
                                      };
                    var urlHelper = new System.Web.Mvc.UrlHelper(eventMessage.Helper.ViewContext.RequestContext).Action(actionName, controllerName, routeValues);
                        eventMessage.BlocksToRender.Add(new System.Web.Mvc.MvcHtmlString(
                        "<script>"
                                + "$(document).ready(function() {"
                                    + "$(\"<li><a data-tab-name='tab-name' data-toggle='tab' href='#tab-name'>"
                                    + _localizationService.GetResource("Test Config")
                                    + "</a></li> \").appendTo('#category-edit .nav-tabs:first');"
                                    + "$.get('" + urlHelper + "', function(result) {"
                                    + "$(\" <div class='tab-pane' id='tab-name'>\" + result + \"</div>\").appendTo('#category-edit .tab-content:first');"
                                    + "});"
                                + "});"
                        + "</script>"));
        }

6 years ago
Your question pointed me in the right direction.
I think basically all you need to add is .tab() to make it a working tab.

Here is a working snippet for dynamically adding a tab to the product admin page (after specification attributes):

$("<li><a data-tab-name='tab-foo' data-toggle='tab' href='#tab-foo'>Tab foo</a></li>")
  .insertAfter('#product-edit .nav-tabs:first li:nth(4)').tab()
$("<div class='tab-pane' id='tab-foo'>Content foo</div>")
  .appendTo('#product-edit .tab-content:first');

You can easily try it by pasting it into the console on this or any other product page:
http://admin-demo.nopcommerce.com/Admin/Product/Edit/37
6 years ago
Scratch my previous answer.
Working solution here: https://www.nopcommerce.com/boards/t/43586/adding-tab-via-plugin-in-version-380.aspx#177229
This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.