ReplaceHTML doesn't work in Web Experiences with Sitecore Personalize

February 6, 2022 Rodrigo Peplau 0

While creating a Web Experience in Sitecore Personalize, I wanted to use the replaceHTML function in the Javascript part of my Variant, but it was not working.

replaceHTML('#main-component');

My original HTML has a div like this:

<div id="main-component">Temporary content</div>

And I was trying to completely replace the whole div with the markup from my Variant

<div id="main-component">
 <h1 class="title">Hello World! - Variant 1</h1>
</div>

While the methods insertHTMLBefore and insertHTMLAfter were working normally, nothing was happening with replaceHTML.

But why?

Debugging the Javascript method, I’ve noticed the error is due to what looks to be a bug in the native replaceHTML function.

function replaceHTML(e) {
 var n = document.querySelector(e)
    , t = "bx-" + variant.ref;
 if (document.getElementById(t))
    document.getElementById(t).innerHTML = variant.assets.compiled.html;
 else {
    var r = document.createElement("div");
    if (r.setAttribute("id", "bx-" + variant.ref),
    r.innerHTML = variant.assets.compiled.html,
    !(n instanceof HTMLElement))
       throw "HTML element not found";
    n.innerHTML(r) // <=== The "bug" is here
 }
}

More specifically in the bottom of the block, the n.innerHTML is being called as a function, when it’s actually a string property.

I’m not sure what this line is really trying to do here, but I’ve managed to fix the “bug” with a corrected version of the replaceHTML function.

 

The “fix”

To fix the issue I’ve copied the original function to my target page (preferably at the bottom, before the closing body tag).

<script>
 function replaceHTML2(e, variant) {
     var n = document.querySelector(e)
     , t = "bx-" + variant.ref;
     if (document.getElementById(t))
         document.getElementById(t).innerHTML = variant.assets.compiled.html;
     else {
         var r = document.createElement("div");
         if (r.setAttribute("id", "bx-" + variant.ref),
         r.innerHTML = variant.assets.compiled.html,
         !(n instanceof HTMLElement))
             throw "HTML element not found";
         n.outerHTML = r.outerHTML;  // <=== the "fix" is here
     }
 } 
</script>

Now of course you’ll need to call the new function in your Variation Javascript, instead of the original one. Notice that the variant has to be also passed to the new function as a parameter, as the variant context is not accessible from where the function is declared.

replaceHTML2('#main-component',variant);

After these changes, I’m now able to actually replace any markup from the original page with markup from the Web Experience.

Do you have any thoughts on this strange situation? Please leave me a word!

Categories: CDP/Personalize