Add Custom Script and Style Sheet Files to Views

OVERVIEW

Adding your own scripts and style sheets not only need to be possible, but they need to be easy to do.  In fact, they need to be done in a way that works with the platform you've chosen, and have an option for being included dynamically.  Between the custom viewset engine that is in Hotcakes Commerce and the article below, we have you covered!

REQUIREMENTS

The following pre-requisites will be necessary to accomplish the goals of this article:

• Familiarity with how to modify and create views
• HTML & CSS knowledge
• Familiarity with scripting methodologies or an understanding of Razor Syntax
• Visual Studio 2012 or newer (only required for intellisense)

It is highly suggested that you first review the custom viewsets documentation prior to following the steps in this article.  Doing so will help you understand the steps required here better.

GETTING STARTED

If you haven't already done so, you'll need to have a Hotcakes site created and be ready to make modifications to the various views as desired.  The methods that are about to be explained below are not only useful 1-line code snippets, but they also include your respective script/style sheet using best practices.

Why Use this Feature?

Adding scripts and style sheets could have unintended results when you're working with a platform.  Sometimes they won't be added at all.  Sometimes they'll be added, but in the wrong place or in the wrong order.  Other times, you're successful, but now you realize that you have too many dependency files being requested by the web page.  This feature addresses those concerns.

When you register your scripts and style sheets using this method, you'll be able to specify the order that they get added and one added, they'll take advantage of the built-in aggregation and optimization features in the CMS.  This will allow your files to benefit from white space removal and composite files.

REGISTRATION METHODS

There are only two methods to use and they are explained below.  The method for the views has been added to Hotcakes as of version 01.07.00.  

RegisterViewScript

This method requires that you first create and add your file to the Scripts folder in your custom viewset.  The path to that file should be similar to the path shown below.

~/Portals/_default/HotcakesViews/VIEWSETNAME/Scripts/

Parameter	Description
helper	This parameter is inferred and does not need to be added.
path	You only need to put the file name in this parameter, such as MyScript.js.  Hotcakes will automatically include it from the Scripts folder as discussed above.
priorityOrder	This is an optional parameter with a default value of 20.  If you add your own priority, it is suggested that your value be at least 100 to prevent conflicts with other scripts that are loaded.

RegisterViewStyleSheet

This method requires that you first create and add your file to the Styles folder in your custom viewset.  The path to that file should be similar to the path shown below.

~/Portals/_default/HotcakesViews/VIEWSETNAME/Styles/

You'll notice that this folder does not yet exist in most sites.  If it does not exist in your site, please create it.

Parameter	Description
helper	This parameter is inferred and does not need to be added.
path	You only need to put the file name in this parameter, such as MyStyles.css.  Hotcakes will automatically include it from the Styles folder as discussed above.
priorityOrder	This is an optional parameter with a default value of 40.  If you add your own priority, it is suggested that your value be at least 40 to prevent any unintended CSS issues.

PRIORITIES

There are a number of CSS and JS files that get loaded in each page load.  Depending on how your site is configured, they may be aggregated into a composite file.

JavaScript Priorities

The JavaScript priorities are defined by the CMS and load in the following order.  Be sure to add your own scripts as appropriate to not interfere with these files.

Script	Priority	Description
jQuery	5	This is the standard jQuery file.  The version depends on the configuration and version of your website.
jQuery UI	10	This is the standard jQuery UI file.  The version depends on the configuration and version of your website.
DnnXml	15	Client-side library used to parse and write XML.  It is only loaded when required by certain features of the CMS, such as ClientAPI.
DnnXmlJsParser	20	Client-side library used to parse and write XML.  It is only loaded when required by certain features of the CMS, such as ClientAPI.
DnnXmlHttp	25	Client-side library to help manage AJAX requests. It is only loaded when required by certain features of the CMS, such as ClientAPI.
DnnXmlHttpJsXmlHttpRequest	30	Client-side library used to make callbacks using ClientAPI.  It is only loaded when required by certain features of the CMS.
DnnDomPositioning	35	Client-side library used to enable interactivity such as drag and drop.  It is a legacy library, only used by ClientAPI.
DnnControls	40	Client-side library used to render the display and behavior of client-side controls used by the CMS.  This is a legacy feature and is primarily used by the ClientAPI.
DnnControlsLabelEdit	45	Client-side library used to handle the display and behavior of the inline editing label used by the CMS.  This is a legacy feature and is primarily used by the ClientAPI.

CSS Priorities

The CSS priorities are defined by the CMS and load in the following order.  Be sure to add your own CSS as appropriate to not interfere with these files.

Style Sheet	Priority	Description
DefaultCss	5	This is the base CSS class that the entire platform and CMS uses to render the website.
ModuleCss	10	Each module on a page could and may load a CSS file into the page.
SkinCss	15	The chosen skin (web page design) will load a CSS file into the page.
SpecificSkinCss	20	The chosen skin (web page design) may also have an additional CSS file of the same name loaded into the page.
ContainerCss	25	The chosen containers used by the various modules on the page may load a CSS file into the page.
SpecificContainerCss	30	The chosen containers used by the various modules on the page may also have an additional CSS file of the same name loaded into the page.
PortalCss	35	The CMS site settings contains a CSS editor that will generate and maintain this CSS file.  It is the last possible override for CSS on your site.

EXAMPLE CODE

The code to add your style sheet or script file is incredibly simple.  In each case, it is only a single line of code!

@* This line is required to call the following examples *@
@using Hotcakes.Modules.Core.AppCode

@* This line adds a script to your view using all of the default values *@
@Html.RegisterViewScript("MyScript.js");
@Html.RegisterViewScript("MyScript-With-Priority.js", 105);

@* This line adds a stylesheet to your view using all of the default values *@
@Html.RegisterViewStyleSheet("MyStyles.css");
@Html.RegisterViewStyleSheet("MyStyles-With-Priority.css", 50);

That is literally all that you have to do... Simple, right?!