nopCommerce Tips: How to Add a Custom Page, Part 2

In Part 1, we covered how to create a custom page in nopCommerce using the Topic technique; today, we’ll cover how to create a new page that supports multiple features, such as topics and widgets.

My client wanted a page for a gallery, which needed a slideshow in addition to the topic. In order to leverage one of the slider widgets, we needed to go beyond the simple topic solution covered in Part One.

We’ll start out with the usual disclaimer; these instructions presume you at least have Visual Studio Express 2010, and have opened up your solution in Visual Studio. Now that we’ve got that out of the way, let’ s begin.

1. Open the Nop.Web/Infrastructure folder, and open RouteProvider.cs

2. I chose to map a new Route directly below the listing for the home page for my gallery. My entry looks something like this:

 new { controller = "Gallery", action = "Index" },
 new[] { "Nop.Web.Controllers" });

3. Save your entry in RouteProvider.cs

4. Right-click on the “Controllers” folder under Nop.Web, and click “Add>>Controller”.

5. Go through the prompts – just use “Empty Controller” for a template. You’ll want to add the nopCommerce security framework in order to handle SSL properly, so your code will look something like this:

using System;
using System.Collections.Generic;
using System.Web.Mvc;
using Nop.Web.Framework.Security;

namespace Nop.Web.Controllers
 public class Gallery : BaseNopController
 // GET: /Gallery/
 public ActionResult Index()
 return View();

6. Save your controller, then right-click over the ActionResult, and select “Add View”

7. Go through the prompts, and name your view – in this instance, I named mine “Gallery”. Visual Studio will create your Gallery/index.cshtml under the “Views” folder of Nop.Web.

8. In your view, you’re going to add a topic block and a widget zone. I “borrowed” a widget zone from the front page that I knew I wouldn’t be using in my layout – in upcoming versions of nopCommerce, you’ll have the ability to create custom widget zones.

My final gallery/index.cshtml looks like this:

@using Nop.Core.Infrastructure;
 ViewBag.Title = "Gallery";
 Layout = "~/Themes/Fashion/Views/Shared/_ColumnsTwo.cshtml";
<div id="gallery">
 @Html.Action("TopicBlock", "Topic", new { systemName = "galleryintro" })
 @Html.Action("WidgetsByZone", "Widget", new { widgetZone = "home_page_bottom" })

After this step, I named a topic with the system name “galleryintro”, and assigned a slider widget to “home_page_bottom”.

9. The very last step is to add your route to your menu, and your title to your language resources;

<li><a href="@Url.RouteUrl("Gallery")">@T("gallery")</a> </li>

You’ll want to re-compile your solution in order to see the changes; after that, you’ll find that you’ve got a new page that you and your client can edit content from the Admin section.


Looking for quality nopCommerce Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Carole Bennett

Carole Bennett is the founder and principal of IndigoTea. As a professional IT consultant, Carole has provided solutions for companies as diverse as Verizon, Frito-Lay, Capital One Auto Finance, and Zales Jewelers, parlaying a unique talent for acting as a translator between the worlds of business challenges and technology solutions. She considers multi-tasking skills gained from simultaneously 1) managing a fire performance troupe, 2) raising a family, and 3) working as a full-time IT consultant excellent preparation for her current career incarnation as the driving force behind IndigoTea. "Fire-breathing redhead on a mission" is not just a metaphorical description!

2 Comments on nopCommerce Tips: How to Add a Custom Page, Part 2

  1. Steve says:

    Perfect, worked for me thanks very much for your helpful tutorial.

  2. Steve says:

    Thanks for your concise tutorial.

    Got everything i needed and learnt something too 🙂

    Just wanted to say thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *