How to add a new property to Product entity in nopCommerce?

There are many chances we'd like to add some new properties to the existing entity, such as Product or Category. I just learned how to add a new property to the Product entity, and here's how I did it.

I learned from this tutorial from nopCommerce documentation - Updating an existing entity. How to add a new property.

Scenario: I need to add a new CTALink property to the Product entity, and show the link in Product page.

1. Go to Database and add a new column CTALink in Product table.

2. Go to Libraries > Nop.Core > Domain > Catalog > Product.cs
Add this code:
public virtual string CTALink { get; set; }

3. Go to Libraries > Nop.Data > Mapping > Catalog > ProductMap.cs
Add this code:
this.Property(p => p.CTALink).HasMaxLength(500).IsOptional();

4. Go to Presentation > Nop.Admin > Models > Catalog > ProductModel.cs
Add this code:
[NopResourceDisplayName("Admin.Catalog.Products.Fields.CTALink")]
[AllowHtml]
public string CTALink { get; set; }

5. Go to Presentation > Nop.Admin > Validators > Catalog > ProductValidator.cs
Add this code:
RuleFor(x => x.CTALink).Length(0, 500);

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

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

7. Go to Presentation > Nop.Admin > Controllers > ProductController.cs
Add in these:
Method name: PrepareProductModel()
model.CTALink = product.CTALink;

Method name: Create(ProductModel model, bool continueEditing)
product.CTALink = model.CTALink;

Method name: Edit(ProductModel model, bool continueEditing)
product.CTALink = model.CTALink;

8. To display this on product page.
Go to Presentation > Nop.Web
Copy the ProductTemplate.Simple.cshtml in Product folder into your theme's Views folder.
Add the necessary code to display the new property on the Product page.
@if (!String.IsNullOrEmpty(Model.CTALink))
{
   

              Go Get It!
   
}

How do create your own theme in nopCommerce?

In nopCommerce, we can create our own theme and modify the existing code files without affecting the original ones.

1. Create a new folder with your theme name in Themes folder in the Nop.Web project.
e.g. Themes\[new_theme]
* Or you can copy the DefaultClean folder in the Themes folder and rename it to the new theme.

2. Whenever you want to modify the codes in any files, you can just copy the file, create the respective folder in your new theme folder, and paste the file over. Then, modify your new file.
E.g. If you want to change the home page.
step 1. Create a Views folder in your Themes\[new_theme]
step 2. Create a Home folder in your Themes\[new_theme]\Views folder
step 3. Go to Views\Home folder, copy Index.cshtml file over to your Themes\[new_theme]\Views folder
* Remember to modify the Index.cshtml in your own theme folder whenever you want to customize the home page.
Same goes to other files.

3. Modify the theme.config file

[new theme name]
"    supportRTL="true"
     previewImageUrl="~/Themes/[new_theme_name]/preview.jpg"
     previewText="The '[new theme name]' site theme.">


4. Go to Administration area to select your new theme.
Configuration >  General And Miscellaneous Settings > Select default store theme.

** Please note that I am just a beginner in developing nopCommerce e-commerce website. My ways of doing might not be the perfect or very good method, and just how I am working on them currently while learning.

How to install a plugin in nopCommerce?

I have purchased the Nop Store Locator from nop-Templates . Here is how I install the plugin.

1. Unzip the downloaded plugin file.

2. Copy the folder into the Presentation\Nop.Web\Plugins folder of your solution.
* If you do not see the plugin file, you can click on Refresh and Show All Files in the solution explorer.
* Please note that the plugin folder is to be copied into the Presentation folder, not the Plugins folder in the main folder.

3. Run the project and go to Administration area.

4. Go to Configuration > Plugins > Local Plugins, you will see a list of plugins.
If you do not see the newly added plugin, click on Reload list of plugins button at the top right corner.

5. Find the newly added plugin and click Install.

The plugin is installed and ready to use.

You can also read the documentation from nop-Templates here.

** Please note that I am just a beginner in developing nopCommerce e-commerce website. My ways of doing might not be the perfect or very good method, and just how I am working on them currently while learning.

How to add new categories in nopCommerce?

I am working on a nopCommerce project now. I think it'd be good for me to write down the steps for doing certain things, so it will help me to remember how to do these in future, and also hopefully it might help others too.

1. Click on the Administration link in the home page.

2. Select Catalog > Categories > List from the menu.

3. Click on Add New button to add new category.
* You can define the sub category by selecting its parent category.
* You can choose whether to allow customers select the page size. If not, then you can specify the page size.
* If you want this category to be displayed on the top menu, check the Include in top menu option.

4. Click on Save button.

You'll see the list here:

When you go to the home page of your store, you'll see the categories listed in the top menu (if you select it to be).

** Please note that I am just a beginner in developing nopCommerce e-commerce website. My ways of doing might not be the perfect or very good method, and just how I am working on them currently while learning.

How to install nopCommerce?

I just started to learn about nopCommerce, as I have just recently accepted a job which is to develop an e-commerce website with nopCommerce.

Though it seems to be very easy to install the nopCommerce, it really took me days to do so, especially when setting up the database. It's actually very simple, but I just didn't know how to do it right.

Here, I'm going to write the simple steps to install nopCommerce.

1. Go to nopCommerce download page to download the latest version.
I chose the Source code version. The current latest version is 3.50.

screen shot from nopCommerce download page

2. Unzip the downloaded file and open the nopCommerce.sln file. (I am using Visual Studio 2013.)

3. Set the Nop.Web project as start project. (Nop.Web project is located inside Presentation folder.)

4. The Install page will be displayed. I have encountered many issues during this stage previously.

Store information:
Admin user email: admin@yourStore.com
Admin user password: admin

Create sample data: uncheck (unless you want some sample data added to your new database)
Create database if it doesn't exist: check
Enter SQL connection values: check
SQL Server name: [PC name\SQL Named instance]
Database name: [The database name you'd like to create]

Previously, I had errors because I didn't enter the SQL server name correctly. I didn't know I have to add the PC name. It's my mistake, as I am not familiar with all these installation and configuration. Though it took me days, it's good for me to learn.

5. Once the nopCommerce has been successfully installed, you'll see this page.

Hope you will not take much time to get the nopCommerce installed.

Happy developing with nopCommerce.

** Please note that I am just a beginner in developing nopCommerce e-commerce website. My ways of doing might not be the perfect or very good method, and just how I am working on them currently while learning.