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 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 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.
 

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