Adding tab via plugin in version 3.80

hi,

I noticed that tab rendering is changed in Nop Commerce version 3.80. I am trying to add a tab in products edit, the way I did in version 3.70. but it is not working.

Can some one help to identify the change in new version i.e. version 3.80.

Can anyone help to add a tab via plugin in product-edit in nop commerce 3.80?

puneetnopdev wrote:

What's wrong? nop 3.80 also fire the AdminTabStripCreated Event

Did you try with the following way ?==>https://www.nopcommerce.com/boards/t/43569/how-can-my-plugin-add-a-tab-into-product-or-category-admin-view.aspx#172964

Hi sohel,

The admin has now moved from KendoTabStrip to Bootstrap Tabs. The code output to render the tab therefore no longer works.

Anyone who's got this figured out will be very popular!

sohel wrote:


The Event is fine it works. But as Fireblade said:

"The admin has now moved from KendoTabStrip to Bootstrap Tabs. The code output to render the tab therefore no longer works."

This is the real problem.

Hi,

now you can add tab the following way:

eventMessage.BlocksToRender.Add(new MvcHtmlString(
"<script>"
        + "$(document).ready(function() {"
            + "$(\"<li><a data-tab-name='tab-name' data-toggle='tab' href='#tab-name'>"
            + _localizationService.GetResource("Computer.Category.MenuIconTab")
            + "</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>"));

Mariann wrote:

Thanks a lot @Mariann. Nop team are Great.

Thanks a lot Mariann.

The only downside to this implementation is if users are fast when selecting a plugin tab upon arriving at the admin screen.
For example, I have 3 custom tabs on the product edit screen. I also have a license for nop-templates quick tabs and attachments....so 5 in total.
If you edit a product (/admin/product/edit/x), if the loading spinner (top right) is still going and you click on a custom tab, the tab is selected visually, but the content from 'info' tab will continue to display.  Even when the page is fully loaded, your custom tab is selected (visually), but the info tab is actually being displayed.  Then you can click on any other tab, then click back on your custom tab and your in good shape.
If you edit a product and wait the couple seconds for the loading to totally finish, then click on your custom tab, its great.
Now, nop-templates must have noticed this during their development of their plugins, and they implemented differently than the code suggested in this thread.  They look to be doing a call on demand when you click on one of their custom tabs... They display simple "loading" text during the fetch.  But even if you click immediately on their attachments tab (as an example) while the main sites loading gif is still spinning, they show the loading text in the content panel, and after a brief delay, the content renders.
I am changing my implementation to work this way, but just thought I would mention this so that people can rethink this implementation before using it.

I created a little helper to add admin tab strips using a similar technique to the way nop-templates does it, which gets around the issue @ChuckR saw:

public static class TabStripHelper
{
    /// <summary>
    /// Renders an additional tab to an element
    /// </summary>
    /// <param name="attachToElementWithId">The id of the element to attach to, e.g. product-edit</param>
    /// <param name="tabTitle">The title of the tab</param>
    /// <param name="contentUrl">The url to fetch the content of the tab</param>
    /// <param name="tabId">The id of the new tab. If null or empty, it is calculated from <paramref name="tabTitle"/></param>
    /// <returns></returns>
    public static MvcHtmlString RenderAdminTab(string attachToElementWithId, string tabTitle, string contentUrl, string tabId = null)
    {
        tabId = string.IsNullOrEmpty(tabId)
            ? ("tab-" + tabTitle.Trim().ToLower().Replace(" ", "-").Replace("'", "\""))
            : tabId;
        return new MvcHtmlString(
            "<script>"
            + "$(document).ready(function() {"
            + "$('#" + attachToElementWithId + " > .nav-tabs')"
            + ".append('<li><a data-tab-name=\"" + tabId + "\" data-toggle=\"tab\" href=\"#" + tabId + "\">" + tabTitle + "</a></li>');"
            + "$('#" + attachToElementWithId + " > .tab-content').append('<div class=\"tab-pane\" id=\"" + tabId + "\" data-contenturl=\"" + contentUrl + "\">Loading...</div>');});"
            + "$(document).one('click', 'a[data-tab-name=" + tabId + "]', function() {$(this).tab('show');"
            + "$.ajax({async: true,cache: false,type: 'GET',url: '" + contentUrl + "'})"
            + ".done(function(data) {$('#" + tabId + "').html(data);}); }); "
            + "</script>");
    }
}

You can use it in the

HandleEvent(AdminTabStripCreated eventMessage)

something like this:

    eventMessage.BlocksToRender.Add(
        TabStripHelper.RenderAdminTab("product-edit",
            "My Tab",
            "/MyAdminController/Configure/" + productId));