Coveo for Sitecore Hive – Understanding Placeholders

Currently, i am working on building search capabilities using Coveo. I am really impressed with the tool and capability it gives while keeping things simple and more in Sitecore context.

Why Coveo components are not getting displayed?

After installing and understanding Coveo (Coveo for Sitecore 90 4.1.729.23 with Sitecore 9.0.2), i started building a sample search page. Coveo team has done a great job for on-demand recording of labs.

While building a search page, I started adding required various components in below hierarchy:

  • Body-main (Custom main container placeholder): Coveo search interface
  • UI Content: Modular Frame
  • UI Header: Coveo For Sitecore Analytics
  • Main section: Results Section
  • Results List: Coveo Results List
  • Boddy-bottom: Coveo Search Resources
  • UI Results Footer: Coveo Pager
  • Results Header (using results header extender): Custom rich text component
  • Main Section: Facets Section
  • Results Header: Results Header Section
  • Results Header Section: Results Sorts Section
  • Results Header: Coveo Breadcrumbs
  • Sorts: Coveo Relevancy & Field sorts

For some of the Coveo components, when you add the components on page, it requires a datasource. So, you’re prompted to create a new or select existing datasource. I left most of the properties unchanged as i was just playing around and wasn’t configuring for actual requirements.

1

And each of the datasource has a field for DOM unique Id with value in format coveo8c7b58dc. From name one can understand that whatever id we specify here will be used to uniquely identify particular component in html.

4

Completed adding components and required datasource. Everything was working fine. Results and other components were getting displayed on page until i changed DOM unique id for my search interface component. As shown below:
3

What is the issue?

  • I first and foremost checked browser’s console for any JavaScript related errors or any error while making a request to Coveo rest point. There wasn’t a single error in console. So, All the Coveo resources were added successfully, i was able to see the Coveo rest endpoint request, i was then able to show the results coming from request but nothing was getting displayed on page.
  • After removal of all possibilities, i was checking presentation details of the search page and i found that DOM unique Id of the Coveo Search Interface component was getting used as part of placeholder key. I renamed unique Id later but that didn’t changed placeholder key and thus it wasn’t showing any component added into search interface component as unique Id and placeholder key wasn’t matching.
    5

How to solve it?

I wanted to have unique identifier for search interface component. So, i used that id and changed the placeholder key accordingly as shown below and everything started displaying on page.

6

Important: Whenever you add Coveo components and if the component requires a datasouce, specify meaningful name in DOM unique Id at the time of adding component itself, before you start adding more component inside that to avoid any issue in future.

Some more information about Coveo Placeholders

  • Dynamic placeholder key which is getting generated for Coveo components is different then normal dynamic placeholder keys of Sitecore 9. See the difference:
    • Sitecore 9 default: /body-bottom/footer-container/footer-links-{C00378EF-EA1F-4090-A640-F8BC10403476}-0
    • Coveo: /body-main/coveo-ui-content_dynamic_coveo-global-search-interface/coveo-ui-main-section/coveo-ui-results_dynamic_coveo45196b99
  • I first checked for mvc.getDynamicPlaceholderKeys pipeline. If Coveo has added any custom processor to generate the dynamic placeholder key using that uniqueId. But i didn’t found anything there which i was strongly believing.
    7
  • I looked at one of the view which ships with Coveo installation from path /Views/Coveo Hive/Sections/Results Section.cshtml and found that Coveo is using it’s own extension method for placeholder. CoveoDynamicPlaceholder
    8
  • It’s defined in Coveo.UI.Components.Extensions.SitecoreHelperExtensions
    coveo-extensions-1
  • There are two overloads for CoveoDynamicPlaceholder method
    coveo-extensions-2
  • First method accepts GroupName as well UniqueId. So, for all components where it requires a datasource, DOM unique Id is getting used as UniqueId from the datasource. When i searched for CoveoDynamiclaceholder in all views of Coveo Hive, found two usages of above method.
    • Coveo Search Interface Component
      • @Html.Sitecore().CoveoDynamicPlaceholder(“coveo-ui-content”, @Model.Id)
    • Placeholder Section
      • @Html.Sitecore().CoveoDynamicPlaceholder(@Model.PlaceholderKey)
    • So, do not forgot to give meaningful name for field DOM unique Id/Placeholder Key when you add any of these two components.
  • Rest of the components are using the second method. Where, UniqueId is not being specified by us, but it’s using UniqueId of the rendering.

Implement great search experience using Sitecore and Coveo. Stay tuned for more posts on this.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s