Initial Script changes

The script manager provides multiple benefits, increasing page speeds, removing duplication and script conflict and making site scripts easy to manage but it needs to be set up correctly for your site and each site is different. To help with this we'll walk through an existing site and how it should be changed to take advantage of the script manager.

The first thing to notice is that with 10.2 is that there's already a bunch of registered scripts and groups for your site sitting the the registered script table. This is because the Sitekit CMS uses scripts for some of its front end functionality. The TinyMCE scripts are used to render a rich text editor for front end forum edits and other script are used to provide date pickers in forms or geolocation pickers or analytics tracking. Most of these will relay on the underlying JQuery library also. 

What you as a site administrator needs to do is to looks at your existing scripts which are normally held in the HeadSectionHTML variable block and then move them into the script manager . We'll use an existing site example to illustrate this.

As you can see this script block contains five Javascript file references including an external reference to version 1.8.2 of the JQuery library.

The most basic approach to take would be to put all 5 into the script manage in one script group and then replace them in HeadSectionHTML with a call to :::include-<new script block name>:::. Whilst that would work it doesn't provide any performance improvements or  remove the risk of conflict and duplication between the JQuery versions.

A better approach is as follows, bear in mind that you need an element of knowledge about what the relevant script files are doing and their dependencies.

1. The hardcoded JQuery is version 1.8.2, Sitekit internal one is 1.11, after checking that none of the four scripts need features available in 1.8.2 its safe to remove it
2. 'cycle' and 'fancybox' are dependent on each other and on JQuery. They're used on several pages to produce a carousel effect. We can create a new script group 'carousel', add the files to it in the correct order and then make JQuery a dependency. Remove them both from HeadSectionHTML . Look for the pages that use this functionality and then either in the relevant template or page properties add a reference to :::include-carousel:::. No matter where this reference is inserted the script manager will put the script block in the correct 'position'
3. 'full-site' and 'cookie' are apparently used on every page and reference JQuery. Create new script groups 'cookie' and 'fullsite', add the files to them respectively and again make JQuery a dependency of each. On investigation in this example only 'cookie' is actually used on every page of the site so it should be replaced in HeadSectionHTML with a call to :::include-cookie:::.
4. In contrast 'fullsite' is only used on a handful of page on a single branch of the site. So the options are to add it in as :::include-fullsite::: to the relevant pages body fields or put it into the pages contentlayout, or create a branch dependent variable block and add it to that so it's only applied where needed. Don't be lazy about this if some of your scripts they have limited use throughout the site.

The revised HeadSectionHTML  will now look like this