Coveo For Sitecore And RequireJS

Playing Nicely Together

Getting Set Up

You've got your site all optimized, loading only the javascript you need for each page. Your dependencies are all handled, it's nice and maintainable. This Require thing is really working out for you.

Time to move on to search! The users have to find what they want on your new shiny site. So you install Coveo, follow all the setup dialogs, get your new items published, and the test search page runs perfectly.

Everything is coming up roses. Nothing can go wrong now! Swap in the main site layout and the menu to the test search page, add your styling, get your theme going...

RequireJS Error Window

Now that's an awful lot of red text. It's scary. What's going on? What do we do? How do we fix it?
Never fear! All of these questions have simple answers.

What's Going On?

What's happening is that Coveo, like you, wants to load their Javascript in asynchronous modules. Doesn't hold up the main rendering thread, the page loads faster, it's good all around.

But they didn't use Require, they have their own library. There's conflicts. That's the bad news.

Here's the good news. The fix is easy, once you know what to do.

What Is The Fix? Splitting The Resources.

The rendering you want is named Coveo Search resources and is stored in /sitecore/layout/Renderings/Coveo Hive/Resources/Coveo Search Resources.

Sitecore content tree

Make two copies of it! Name one "Coveo Search Resources Head" and the other one "Coveo Search Resources Body". Copy the view file, which is in \Views\Coveo Hive\Resources.

In the head copy, delete the <div> that holds the resources and keep the css and script links at the top. Don't edit the @using or @model declaration.

In the body copy, do the opposite. Now update the new renderings you've made to point at the new files. Almost done!

Add a "head" placeholder to your main layout, before where you are loading require, and add the Coveo Search Resources Head rendering there, and replace the original Coveo Search Resources rendering on your search page with the new Coveo Search Resources Body.

All Done!

This won't interfere with your module loading any more, and still won't block the main thread, because Coveo will handle its own modules too."

Hey, Developers!

We're on the look out for talented developers to join our team.

Think you have what it takes?

Meet Ryan Allan

Senior Developer


Ryan is a seasoned Senior Developer at Fishtank and is Sitecore Developer Certified. In a nutshell, he describes his role as "building extremely fancy websites". Ryan has a degree in Mechanical Engineering and previously worked on power plants and compressors, and now builds websites for the same company as a client! Outside of work, his interests are science + physics and spending time with his kids.

Connect with Ryan