Creating Custom Viewsets

Overview

Custom viewsets are simply a proprietary collection of views that you create and one of several extension points in Hotcakes Commerce. These views can have slight or major modifications in comparison to the default views you begin with.  They can include any number of technologies too, including: Bootstrap, jQuery, HTML, XHTML, CSS, and so much more.  In fact, we have sample downloads of such viewsets on this very page.

Requirements

The following information is required to already be known:

• HTML & CSS development skills
• Knowledge of jQuery and similar JavaScript frameworks
• Familiarity with scripting methodologies or an understanding of Razor Syntax
• Experience in ASP.Net MVC (only if you’re creating controllers and models)
• Visual Studio 2012 or newer
• A working DNN site with Hotcakes installed

If you don’t know or have never heard of Razor Syntax, don’t worry.  It’s a lot easier than you think.  If you’ve ever used scripting languages like PHP, it works very much the same way – only Visual Studio gives you a ton of help by way of intellisense.

Getting Started

Download Sample Visual Studio Project

We know just how wary you might feel working with yet another software solution and having to learn yet another way to work with something new.  Even if you know everything about ASP.Net and HTML design, we know just how intimidating that can be.

It is for this reason that we have provided you with a starter project to get you up and running on the right.  Go ahead and download it.  You’ll be creating your own custom views in mere minutes!

CREATING CUSTOM VIEWSETS

What we are discussing is most often referred to as “development.”  As such, it is very important that perform our development on an offline website and not on your production website.

IMPORTANT! Do not make any changes to the _default viewset! You will lose your changes on upgrades.

Before we get started creating a custom viewset, it is important to know where viewsets live in your website.  You can find the default viewset in the following folder location.

[SITE ROOT FOLDER]\Portals\_default\HotcakesViews\_default\

If you install more viewsets, they will be in the same folder, as shown in the image below.

This is only the default location.  If you want a viewset to only be available for a specific site in your DNN CMS, then find the appropriate Portals folder. They will be labeled according to the Portal ID.  This can be found in the Admin > Site Settings view in the CMS.  Once you find it, the file path will change to look something like this.

[SITE ROOT FOLDER]\Portals\1\HotcakesViews\MyViewSet\

Note the “1” in the folder path.  This would match a site in your CMS with the ID of the same number.

Setting Up Your Viewset Project

By now, you should have downloaded the starter project from above.  Open that zip file and extract its contents to the root of your DNN site.  If prompted, go ahead and merge the files.  This is mostly likely because you have another Hotcakes Commerce project in the site.  If this is your first time, there will simply be new files added to the site like shown below.

There is a Visual Studio project file in the root of your site now.  It’s currently named MyCompany.MyViewSet.csproj.  Open this file in Visual Studio so that it opens the project.

The ReadMe.txt file has instructions that are repeated here.  Feel free to follow either set of instructions.

Open the web.config and the web.config.ReadMe.txt file.  Find the “system.web.webPages.razor” section in your web.config.  Replace it with the section in the web.config.ReadMe.txt file.

Now that you have updated your web.config, feel free to close it.  Build your project like you always do.  This will allow you to have intellisense in your views.

Project Architecture

You have three (3) folders in your project.  They are described below.

• Controllers – This folder allows you to create any custom controllers that you might need for your view.  A sample controller has been provided for your convenience.
• Models – This folder allows you to create any custom view models that you might need for your custom views.  A sample view model has been provided for your convenience.
• Portals – This folder is where your custom views will live.

If you are not going to be creating your own custom controllers or view models, feel free to delete the Controllers and Models folders.  They can always be added again.

Development

Controllers and view models are standard ASP.Net MVC controllers and view models. You will create and work with these the same way that you already do as an MVC developer.  The views in the Portals folder are also MVC views.  Feel free to create and use your own partial views.

If you navigate into the Portals folder until you get to the MyViewSet folder like shown below, you will see the various views that are used to display things to the customer like the cart, categories, checkout, and more.

Deployment

If you have been making these changes this whole time on your store website (not recommended), then all you have to do to deploy your views is to build your project to compile any server-side code you have in the project.  All of your code and files are already in the right place.

It is highly suggested that you use a source control repository of some kind to version your work.  Also, version your project using the project properties so that you can keep track of your changes and version your deployment zip files. Finally, if you have changed the name of your project, DLL, or folder, please keep that in mind in the instructions below.

We’ll assume you’ve been making these changes on a development website.  You have to do either one (1) or two (2) things to deploy your custom viewset.

First, if you have any server-side code and especially if you’ve created any custom controllers or view models, you will need to grab the appropriate DLL file from your website’s Bin folder.  Copy it to the Bin folder of your production website.

Second, gather all files in your MyViewSet folder and zip them up like shown below.  Just be aware that whatever name you give your zip file will be used as the name of the folder and viewset after upload.

This zip file can now be taken to your production website and uploaded using the Views Manager in the store admin area.  This process will install the viewset for you in the right place and allow you to choose it for the “current” viewset.

You’re done!