It may happen that you want to render multiple templates in a single page. For instance, let’s say that we’d like to have a page displaying multiple search results categories : Products, Downloads etc.
Defining our templates
Let’s start by creating our first Underscore template for the Products section. It basically just renders a list of products with their pictures and name. There’s also a section that will be used to display more/less results.
PS : Don’t mind the “ToCoveoFieldName” syntax, this is coming from a Coveo for Sitecore example.
We then need to compile and render our template with results. In a
Obviously, if we want the whole thing to actually do something, we’ll need to render our template with relevant results. Let’s perform a query directly on the REST endpoint to get our results from the CES index. In this example, the productsQuery/numberOfResults are parameters passed to this function, it could be anything.
This will actually output the resulting HTML in the page. You may notice that i’m using the results object, which actually contains the Query Results object returned by the REST endpoint. So the whole thing work, and we have products and rainbows displayed in our page. SUDDENLY, someone asks us to display another section, based on Downloads this time. Alright! Let’s create another template.
This time, we’re outputting slightly different informations : we have a link, as well as the file size and the file extension. Just like we did before for the Products, we need to compile and then render our template. We’ll extract our query in an utility function, since we don’t want to repeat code, don’t we?
Excellent. We have Products and Downloads rendered, our customer is happy and we’re riding unicorns. But we’re not 100% happy. Take a look at this little piece of HTML that gets repeated :
This may seems small, but let’s say we add 6 more templates in our page (that actually happened), it will get impossible to maintain. Especially if you decide to change the CSS class of one of these elements, for instance.
Extracting a header template
My solution to our repetition problem is to create a new header template, by extracting and parametizing our little piece of markup. Our header template will use a category as parameter.
You can see that when we append the HTML, we now pass the headerTemplate to the current template we’re rendering. Last thing we need, let’s edit our templates to use this new header parameter.
When rendering one of those templates, Underscore will render the child templates as well (just like the header template there). Much cleaner!
That’s it for now! Feel free to use this trick in your projects or ask for more examples!