Sitecore FXM with Coveo, dynamic html does not seem to render

Question

Sitecore 8.1 (160302)

I have a client using Sitecore FXM to export HTML/JS/CSS to an external site in order to preserve the same experience outside of Sitecore.

The "experience" itself is mostly the header and footer, which contains site navigation and a Coveo for Sitecore Search Box component.

The search box works well within Sitecore, but on the external site, the search box is not even appearing.

I validated that:

• All the JS dependencies are loaded
• All the CSS is loaded
• The HTML is loaded

What I realized is that not all the HTML is renderred, actually is seems like the Razor-inserted HTML is not done properly. By adding the HTML directly in the Chrome console, I managed to re-create my search box, but obviously, the JavaScript events were not attached to it, so the box was useless.

Coveo will build an array of components when the page load, and then init these components in order for them to be usable. It seems like that init is never done in this case.

Now here is where I am heading: Is it possible that FXM might not always respect the hierarchy of execution when exporting to an external website?

Answer 1

Simon,

I found an answer. There is an FXM variant of $(document).ready (more details here)

So solution is to customize SearchBoxView and substitute existed inline js code with FXM-aware js code:

 <script type="text/javascript">

    if (typeof (SCBeacon) != 'undefined' && SCBeacon && SCBeacon.push) {
        // Sitecore FXM SearchBoxView load on ready event
        SCBeacon.push(["ready", initCoveoSearchBox]);
    }
    else {
        // Sitecore SearchBoxView ioad
        Coveo.$(function () {
            initCoveoSearchBox();
        });
    }

    function initCoveoSearchBox()
    {
        // original inline js code
    }
</script>