Initializing two Coveo Search Results Lists in one page

Question

Is it possible to have two Coveo Search Results Lists in one page?

I need to display two kinds of results, one for the filtered results list and one for the rest of the results (not retrieved by the first query).

I already have the rest of the results in JS, I just need to pass this results list to something that can render the results using the same results template but in another location.

I'm using Sitecore 8.2 and Coveo For Sitecore 4.1

Answer 1

In Coveo for Sitecore 4.1, there is a Coveo for Sitecore Hive component fronted exactly for this purpose, Coveo Related Query.

It allows you to execute a second query that is related (or not) to another Search Interface.

The component works just like a standard Search Interface, so you need to add a Result List in it as well as result templates.

Some options allow you to customize the experience:

• Main Search Interface: Allows you to bind the Related Query to an existing Search Interface. This will ensure the state is shared between the two interfaces.
• Use the search interface current filters: When clicking on a facet, the facet's filter will also be propagated to the Related Query.
• Use the search interface current query: When entering a keyword in the search box, the keywords will also be propagated to the Related Query.

Mixing those attributes together, you can most probably achieve the required result here.

For instance, you could have a "Related Articles" widget that only inherits the keywords but not the filters, since you don't want facets like "Product Type" to affect your "Related Articles" widget. You would need to add a Query Filter component to only show articles in the Related Query.

Here is what it looks like in action:

Answer 2

A Coveo Result List component binds to events triggered by its parent Coveo Search Interface component. When there is more than one Coveo Result List component in a Coveo Search Interface, all of them are displaying the same search results. There is no way to pass specific search results to a Coveo Results List component.

The way to achieve your goal is by having 2 distinct Coveo Search Interface components. Each of them will have their own Coveo Result List component. Each of them will have their own query filters.

To share a single result template for both Coveo Result List components, you can extract the result template script element outside of the 2 search interfaces and give it a unique id:

<script id="MyTemplate" type="text/underscore" class="result-template">
  Your result template here
</script>

Then, in each Coveo Result List component, you insert a very small result template that load the global one:

<script type="text/underscore" class="result-template">
  <%= loadTemplate('MyTemplate') %>
</script>

Answer 3

While I was reading about Coveo Related Query, I came across this document which perfectly suited my problem. My second query was already achieved using SearchEndpoint I had my results object ready but needed a way to render the results in a new results list component.

What I ended up doing is getting the underscore Template used for the original results list, and then used Coveo's template.instantiateToElement() to render the results in a similar design with the original results list and finally added the html into a its related html div.

var templateElement = $('#' + this.templateElementId);
var template = new Coveo.UnderscoreTemplate(templateElement[0]);
for (let i = 0; i < data.results.length; i++) {
    var renderedTemplatePromise = template.instantiateToElement(data.results[i]);
    renderedTemplatePromise.done(res => {
        $('.related-results').append("res);
    });
}