How to add a new picture property to Category entity in nopCommerce?

I wrote a post about how to add a new property to Product entity in nopCommerce earlier, this is quite similar, but it still took me some time to figure out how to do. So I think it's good for me to write another post for this too.

Scenario: I'd like to add a top banner to the category page. When user clicks on it, it'll navigate to another page.

1. Go to Database and add new columns TopBannerId & TopBannerLink in Category table.

It's recommended to add a new column via SQL.
ALTER TABLE [dbname].[dbo].[Category] ADD [TopBannerId] INT NOT NULL DEFAULT '0'
ALTER TABLE [dbname].[dbo].[Category] ADD [TopBannerLink] NVARCHAR(500) NULL

2. Go to Libraries > Nop.Core > Domain > Catalog > Category.cs
Add this code:
public int TopBannerId { get; set; }
public string TopBannerLink { get; set; }

3. Go to Libraries > Nop.Data > Mapping > Catalog > CategoryMap.cs
Add this code:

this.Property(p => p.TopBannerLink).HasMaxLength(500).IsOptional();

4. Go to Presentation > Nop.Admin > Models > Catalog > CategoryModel.cs
Add these codes:

        [UIHint("Picture")]
        [NopResourceDisplayName("Admin.Catalog.Categories.Fields.TopBanner")]
        public int TopBannerId { get; set; }

        [NopResourceDisplayName("Admin.Catalog.Categories.Fields.TopBannerLink")]
        [AllowHtml]

        public string TopBannerLink { get; set; }

5. Go to Presentation > Nop.Admin > Validators > Catalog > CategoryValidator.cs
Add this code:

RuleFor(x => x.TopBannerLink).Length(0, 500);

6. Go to Presentation > Nop.Admin > Views > Category >  _CreateOrUpdate.Info.cshtml
Add these codes to where you want to edit the new property:

       
           
                @Html.NopLabelFor(model => model.TopBannerId)
           
           
                @Html.EditorFor(model => model.TopBannerId)
                @Html.ValidationMessageFor(model => model.TopBannerId)


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

       
           
       

5. Go to Presentation > Nop.Admin > Controllers > CategoryController.cs
Add in these codes:

Method name: Edit(CategoryModel model, bool continueEditing)

This is to delete the old top banner when deleting or updating.
I just modified the codes from the Picture, and placed the codes just below it.

int prevTopBannerId = category.TopBannerId;

if (prevTopBannerId > 0 && prevTopBannerId != category.TopBannerId)
                {
                    var prevTopBanner = _pictureService.GetPictureById(prevTopBannerId);
                    if (prevTopBanner != null)
                        _pictureService.DeletePicture(prevTopBanner);
                }

6. Go to Presentation > Nop.Web > Models > Catalog > CategoryModel.cs
Add in this code:

public PictureModel TopBannerModel { get; set; }
public string TopBannerLink { get; set; }

7. Go to Nop.Web > Infrastructure > Cache > ModelCacheEventConsumer.cs

Add these codes:
(I just modify the codes for CATEGORY_PICTURE_MODEL_KEY & CATEGORY_PICTURE_PATTERN_KEY)

        public const string CATEGORY_TOP_BANNER_MODEL_KEY = "Nop.pres.category.topbanner-{0}-{1}-{2}-{3}-{4}-{5}";
        public const string CATEGORY_TOP_BANNER_PATTERN_KEY = "Nop.pres.category.topbanner";

8. Go to Presentation > Nop.Web > Controllers > CategoryController.cs

Method name: Category(CategoryModel model, bool continueEditing)
Place these codes after var model = category.ToModel();


int topBannerSize = _mediaSettings.MaximumImageSize;
            var categoryTopBannerCacheKey = string.Format(ModelCacheEventConsumer.CATEGORY_TOP_BANNER_MODEL_KEY, category.Id, topBannerSize, true, _workContext.WorkingLanguage.Id, _webHelper.IsCurrentConnectionSecured(), _storeContext.CurrentStore.Id);
            model.TopBannerModel = _cacheManager.Get(categoryTopBannerCacheKey, () =>
            {
                var topBanner = _pictureService.GetPictureById(category.TopBannerId);
                var topBannerModel = new PictureModel
                {
                    FullSizeImageUrl = _pictureService.GetPictureUrl(topBanner),
                    ImageUrl = _pictureService.GetPictureUrl(topBanner, topBannerSize),
                    Title = string.Format(_localizationService.GetResource("Media.Category.ImageLinkTitleFormat"), model.Name),
                    AlternateText = string.Format(_localizationService.GetResource("Media.Category.ImageAlternateTextFormat"), model.Name)
                };
                return topBannerModel;
            });

9. Go to Presentation > Nop.Web > Views> Catalog > CategoryTemplate.ProductsInGridOrLines.cshtml

Add in these codes where you want to display the picture.


                     src="@Model.TopBannerModel.ImageUrl"
                     title="@Model.TopBannerModel.Title" />

10. Go to Admin > Configuration > Languages
Click on View string resouces for your language.
Add new record for the newly added field - The name of the resouce is the one we previously set in step 4.
[NopResourceDisplayName("Admin.Catalog.Categories.Fields.TopBanner")]

How to modify About Us page in nopCommerce?

My tasks:
1) Show the About Us link in top menu.
2) Change the About Us page to only one column.
3) Modify the contents in About Us.

There is already an About Us page created in nopCommerce, so we can just make use of that page without creating a new one.

1. Go to Administration > Content Management > Topics (Pages)

2. Click on the Edit button for AboutUs page - modify the contents and check include in top menu.

3. Look for the file : \Presentation\Nop.Web\Views\Topic\TopicDetails.cshtml

Change this code to:
Layout = "~/Views/Shared/_ColumnsOne.cshtml";

How to change the default title in nopCommerce?

The default title currently showing for each page is Your store. It's a very simple setting for us to change the store name.

1. Go to Administration > Configuration > Settings >   General And Miscellaneous Settings

2. Go to SEO Settings tab

3. Change the Default title 

You can also set other SEO information here.

How to remove search box in nopCommerce?

I do not need the default search box to be displayed on my site, so I found a way to remove it.

1. Look for the file : \Presentation\Nop.Web\Views\Shared\Header\Header.cshtml

2. Just remove this code section:

   

        @Html.Action("SearchBox", "Catalog")
   

How to disable wishlist in nopCommerce

This is just another simple setting.

1. Go to Administration > Configuration > Access Control List

2. Just uncheck the last item Public Store. Enable Wishlist accordingly.

How to change currency in nopCommerce?

By default, the currency displayed on the site is USD, and I'd like to change it to my own country currency, which is MYR.

This is how I changed:

1. Go to Administration > Configuration > Currencies

2. If your currency is already in the list, just publish or mark it as primary store currency, otherwise click on Add New button to add a new currency.

3. This is the setting I created for my own country currency.

4. As we do not provide the currency exchange feature, so I just un-publish the other currencies, but just published this newly created currency.