How to add css/script url into SXA theme?

Question

I have javascript url which change in different environment like, QA, Staging and Prod. I am trying to add this url in sitecore CMS.

I have gone through sxa theming, in AssetInclude, there is an option AddUrlInclude its adding the url. But I couldn't know when it is called and what are the settings required to use this option. please help me on adding the direct link into the theme / asset?

Answer 1

There are different types of AssetInclude. The commonly used one is ThemeInclude.

What you've found is a function which will include UrlInclude into the result.

The thing is that this type exists but is not actively used. To include something like custom link depending on the environment you need to write your own custom processor.

You could achieve your goal by extending assetService pipeline (right now all assets comes from themes).

assetService pipeline uses AssetsArgs which has AssetsList processor. Just add desired script/css links into this collection.

args.AssetsList.Add(new UrlInclude
{
    Type = AssetType.Script,
    Url = "//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
});

Answer 2

I put together a module that covers the functionality you described. You can check it out here.

Some of the main functionality of the module includes referencing scripts and styles form a CDN using the SRI attributes that Chrome and Firefox handle.

The referenced assets can be associated per site and per page.

I went with the PlainInclude because it gives me more control over the asset. The Content is constructed manually so I can add attributes such as async.

var urlInclude = new PlainInclude
{
    SortOrder = num,
    Name = plainIncludeItem.Name,
    Type = assetType,
    Content = urlContent
};