Managing Viewsets

RazorCart > Integration

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 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 notethat 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 Properties

This section describes how to find the model properties available in a viewset.  The following example is for the product slider viewsets, but this technique applies to all viewsets in RazorCart. In regards to the model properties, these double curly braces are AngularJS Expressions <https://docs.angularjs.org/guide/expression> it was transferred from the MVC.Net model to the Client's AngularJS model. Using your browse's JS Console (Developer Tools) you can get all the properties, for example:
 
angular.element('[ng-controller="listCtrl as list"]').scope().list
angular.element('[ng-controller="detailsCtrl as details"]').scope().details
angular.element('[ng-controller="sliderCtrl as slider"]').scope().slider
angular.element('[ng-controller="checkoutCtrl as checkout"]').scope().checkout
angular.element('[ng-controller="minicartCtrl as minicart"]').scope().minicart
 
The following screen shots are of the browser developer tools and show the product description field:
 
 
 
 
If you have any questions, please Contact Us.