Using Content Tokens with jQuery script in SXA

Recently, in a special requirement, we had to allow script tag in Rich Text editor during Sitecore upgrade. Though this is not recommended, we chose this path as migrated Rich content had scripts from original source.

To achieve this, I disabled “HtmlEditor.RemoveScripts” setting. Though it looked easy, it had side effects. Suddenly this started breaking few pages in Preview and Published mode. (SC 10 with SXA).

This was very unusual and while investigating, I realised that $ was culprit. (I know this is not pleasant but this was my introduction to content tokens.)

In SXA, there is a feature called Content tokens. This is convenient when you need reusable lines of text/numbers to use within site. For more details, you can refer this great article.

If you see in above Sitecore’s official doc, these tokens are evaluated in Preview mode and actual Web Page which has to be entered after $ symbol. Due to this, jQuery variable ($) was interpreted as a beginning of token and processor could not find token item. Hence it errored out saying Null Item.

So, to conclude, you can either use $ symbol in Single Line/ Multiline/ Rich Text or can use Content tokens. There are 2 ways to handle this,

  • Get rid of Content Tokens feature. (Not recommended) You will need to disable its config located at ~webroot\App_Config\Modules\SXA\Feature\Sitecore.XA.Feature.ContentTokens.config
  • Get rid of $ symbol in Script. And make sure that your Content Author doesn’t use it henceforth.

You may face this if you are migrating content from non SXA sites to SXA. My recommendation would be to re-write jQuery with javascript.

Happy Debugging !!