Salesforce Communities multi-language omnistudio fix

headMarkup.js

  //find the sessionStorage key that contains the UserLocale value
  function getOmniLangKey(){        
      for(let i=0; i<sessionStorage.length; i++){
          let key = sessionStorage.key(i);
          if (key === 'LSSIndex:SESSION{"namespace":"omnistudio"}'){
              let omniSession = JSON.parse(sessionStorage.getItem(key));
              return omniSession.userLocale
          }
      }
      return null;
  }

  //get the value if there is one, from the Omniscript sessionStorage row
  function checkSessionLocale(){
      try{
          let omniK = getOmniLangKey();
          if(omniK){
              return sessionStorage.getItem(omniK);
          }
      }catch (e) {
          console.log(e);
      }
      return 'en_US'; //default
  }

  //Get the language setting from the URL (primary) or Omniscript SessionStorage(secondary)
  //The value in the URL language param will always override any other value (as that is the OOTB parameter used by SF)
  function getLocaleFromURLorSession(){
      const newUrl = new URL(window.location.href);
      const urlParams = newUrl.searchParams;
      if(urlParams.get('language')){
          return urlParams.get('language');
      }
      return checkSessionLocale();
  }

  function setSessionLocale(langCode){
      let omniK = getOmniLangKey();
      if(omniK){
          sessionStorage.setItem(omniK, langCode);
      }
  }

  function setLocale(lang){
      if(!lang){
          lang = getLocaleFromURLorSession();
      }
      setSessionLocale(lang);
      setLocaleURL(lang);
  }

  function setLocaleURL(lang){
      if(!lang) return;
      const newUrl = new URL(window.location.href);
      const urlParams = newUrl.searchParams;
      const urlLang = urlParams.get('language');
      const urlLangCode = urlParams.get('LanguageCode');
      const sessionLocale = checkSessionLocale();
      //keep all 3 params in sync
      const shouldCheckSession = getOmniLangKey() != null && lang != sessionLocale; //fix for blank sessionStorage
      if(lang != urlLang || lang != urlLangCode || shouldCheckSession){
          setSessionLocale(lang);
          urlParams.set('language', lang);
          urlParams.set('LanguageCode', lang);
          window.location.href = newUrl.toString();
      }
  }

  //sync up the language on page load
  setLocaleURL(getLocaleFromURLorSession());

  //reload for custom picker event
  document.addEventListener('resetUserSessionStorage', function(evt) {
      let lang = evt.detail.language;
      setSessionLocale(lang);
      setLocaleURL(lang);
  }); 

This method keeps Omniscripts and community components in sync on multi-language communities (anonymous or logged in). It needs to be in the head markup for the community.

The main parameter is the URL language parameter.
Secondary is the value from SessionStorage (if there is one)

The main issue here is that we have to keep 3 different things in sync to get all of the different component types to render in the same language (2 URL Params and Session Storage):
technically, we also have to set the Locale on the user to match all of these, as well

1. URL Param 1: language - used by the community (in addition to the user profile locale)
2. URL Param 2: LanguageCode - used by flexcards
3. SessionStorage (used by omniscripts):
   userLocale (which is stored via a numeric key, which is stored in the value of the row with key LSSIndex:SESSION{"namespace":"omnistudio"}

**NOTE**
Set the Community Security Settings:
this is required in order to run inline scripts (the above script in the header)
Go to Community Builder > Gear icon (settings) > Security & Privacy
The Content Security Policy (CSP) needs to be Relaxed CSP: Permit Access to Inline Scripts and Allowed Hosts