Managing Viewsets

RazorCart Views are simply Razor Engine Template files that contain straight HTML in addition to C# code that will be compiled on the server prior to the pages being sent to the browser,  Creating custom viewsets allows you to extend RazorCart with your own business logic and customize the user interface without worrying about losing your modifications when upgrading.  Razor syntax is based on the ASP.NET framework.

 

Requirements:

  • HTML/CSS development skills
  • JavaScript frameworks (AngularJS)
  • ASP.Net MVC Razor Syntax
 
To access the Viewsets Managing page click on the Admin Menu in your DNN portal, then select RazorCart Admin Console:
 
 
 
You will be taken to the dashboard of your store. 
 
 
 
From the left-side menu go to Store Setup > Templates > Viewsets
 
 
Find the module that you would like to customize and click Actions menu > Copy Viewset, this will create a copy of the module views folder in DesktopModules to "Portals/{{PortalId}}/RazorCart/Viewsets". The module view list will be enabled and will show a "Customized" label next to the view files that are now copied to the Custom Viewset folder.
 
 
Select the desired MVC view file (,cshtml) and then click Edit Selected from the Actions menu
 
 
This will open the MVC Editor to modify the custom view file located in the Portal folder, edit the file and click Save
 
 
If you would like to undo your changes and roll back to the default Views, select the module and from the Actions menu click Delete Viewset, this will remove the copied view files from the Custom Viewset folder and module will now use the default views
.
 
** Please note that copying/deleting the Views require the application to be restarted as the ASP.NET MVC will determine the view location at the Application_Start() event, to restart the application Select the Server Icon from the top navigation bar and select Restart Application
 
 
 
Custom Viewsets are applied to the Portal/Site level and will affect all the stores you have created for this Portal! 
 
 

Viewset Visual Studio Project w/IntelliSense

You can access the model properties of the viewsets using the IntelliSense Viewset Manager, you can download the Visual Studio project here https://www.smith-consulting.com/Portals/0/Downloads/RazorCart.ViewsetManager.zip
 
Extract it inside: /Portals/{ID}/RazorCart/
 
The project includes all references for the view files but not the files themselves, when you “Copy Viewset” from Admin-Console then the files can be opened/edited in Visual Studio with Razor IntelliSense.
 
IntelliSense is a powerful feature that can dramatically increase your productivity. It is designed to make the development of your application much easier by helping you automatically generate code and access the RazorCart model properties in the Code Editor.
 
 

Access Model Properties from Browser Dev Tools

Another way to access the model properties is using your browser dev tools.  Using your browsers JS Console (Developer Tools) you can get all the properties, for example:
 
Product List Module
angular.element('[ng-controller="listCtrl as list"]').scope().list
 
Product Details Module
angular.element('[ng-controller="detailsCtrl as details"]').scope().details
 
Product Slider Module
angular.element('[ng-controller="sliderCtrl as slider"]').scope().slider
 
Checkout/Cart Module
angular.element('[ng-controller="checkoutCtrl as checkout"]').scope().checkout
 
Mini Cart Module
angular.element('[ng-controller="minicartCtrl as minicart"]').scope().minicart
 
Category Menu Module
angular.element('[ng-controller="categoryCtrl as catMenu"]').scope().category
 
Quick Order Module
angular.element('[ng-controller="entryCtrl as entry"]').scope().entry
 
Product Grid Module
angular.element('[ng-controller="gridCtrl as grid"]').scope().grid
 
My Account Module
angular.element('[ng-controller="accountCtrl as account"]').scope().account
 
 
The following screen shots are of the browser developer tools and show how to view the properties of the product slider module:
 
 
 
Once you have the module properties you can add your own custom logic using c# or js.
 
In regards to the model properties, the double curly braces are AngularJS Expressions <https://docs.angularjs.org/guide/expression> which are transferred from the MVC.Net model to the Client's AngularJS model.
 

Customizing RazorCart Admin Pages

The following example illustrates how to customize the order admin screen:
 
  1. Create a folder "AdminConsole" in "/Portals/{ID}/RazorCart/Viewsets/"
  2. Copy the file "_ViewStart.cshtml" from "/DesktopModules/RazorCart/AdminConsole/Views" to the above location. Don't modify it unless if you also want to change the layout location to edit it!
  3. Create another folder "Order" and copy the file "Edit.cshtml" from "/DesktopModules/RazorCart/AdminConsole/Views/Order" into it.
  4. Edit the view file "Edit.cshtml" as needed. Add the html label and use @model.Order.UDF1 to populate that field.
  5. Recycle AppPool or you can click "Restart Application" from server icon in Admin-Console if you're logged in as a super user. This is needed to update the MVC view locations.
** Only the copied view files will be loaded from Portals folder, the rest will be loaded from the DesktopModules by default, also viewset files inside the Portals folder will not be lost during installation/upgrading.
 
 

Resx Files

All front end user facing modules use Resx files to store labels so that they can be changed and localized for different languages.  The following is the path to all the resx files in RazorCart:
 
\DesktopModules\MVC\RazorCart\[ModuleName]\App_LocalResources
 
 
If you have any questions, please Contact Us.

Add Feedback