Wednesday, March 4, 2015

How to add a new tab in administration edit product page in nopCommerce?

Scenario: I need to add a section "Weather Recommender" in Product page, so the admin can configure the related information.

I followed the steps here and here to add the new properties to the Product entity.

In order to add another new tab, I tried these step and I was glad that it works!

1. Go to Presentation > Nop.Admin > Views > Product >  _CreateOrUpdate.cshtml

2. Add these codes in the "product-edit" div in the list.

       

  •             @T("Admin.Catalog.Products.WeatherRecommender")
           

    3. Also add this code in the "product-edit" div.
       

            @TabWeatherRecommender()
       

    4. Add this at the end of the class too:
    @helper TabWeatherRecommender()
    {
        @Html.Partial("_CreateOrUpdate.WeatherRecommender", Model)
    }

    I just copied and pasted from the existing tab information.

    5. Create a _CreateOrUpdate.WeatherRecommender.cshtml (Just copy from one of the existing file)

    6. Add the admin content to the class file,
    such as:

       
           
                @Html.NopLabelFor(model => model.WRPublished):
           
           
                @Html.EditorFor(model => model.WRPublished)
                @Html.ValidationMessageFor(model => model.WRPublished)
           
       

    7. Remember to go to AdministrationLanguages > Add new resource for "Admin.Catalog.Products.WeatherRecommender", so the value will be displayed as the tab name.