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 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?! 

 

Have more questions? Submit a request

Need More Help?

Do you need more assistance with this article? Please review your support options.