Inserting Custom Components in an Existing Search Interface

There are two ways to insert your own components into an existing search interface.

Inserting a Placeholder Section

The placeholder section allows adding a provided placeholder in the interface. This placeholder can be an existing one that already has been configured for custom placeholder.

Many of the placeholders in the Coveo Modular Frame already allow you to add the Placeholder Section component.

  1. Select the Main Content section, and click Add To Here
  2. Select the Placeholder Section component.

  3. Select or create a new Data Source. If you select an existing Data Source that is already configured,  jump to step 7.
  4. You should now have a non-configured Placeholder Section component.

  5. Click on the component, and click the Edit Coveo Data Source button.
  6. Enter the placeholder key that you want to insert.

  7. You should now have an empty placeholder. If you do not see it, ensure that you have properly configured the Placeholder Settings for the key entered in the Data Source.

Patching the Allowed Controls of an Existing Placeholder

This item allows you to add your own Allowed Controls to a placeholder without running the risk getting your placeholder overwritten during an upgrade.

You should always use this method to patch the placeholders provided by Coveo for Sitecore.

  1. In the Content Editor, in the location of your choice.
    1. For instance, create a folder named “My Placeholder Extenders” under the path Sitecore > LayoutPlaceholder Settings..

  2. Right-click on the folder and choose InsertInsert From Template
  3. In the templates, navigate to Coveo HiveStructure and choose Placeholder Extender
    1. Choose a name that identifies what you are extending.

  4. In your newly created item, select the Placeholder Setting property.
  5. Choose the placeholder that you want to extend.

  6. In the Allowed Controls property, click the Edit button.
  7. Choose the controls that you want to add and click OK.
    1. In this example, we add Coveo Pager to the coveo-facets placeholder. This allows us to add the Pager component where the Facets are usually located.

  8. Save the item.
  9. You should now be able to add the component from the extender to the provided placeholder.

If you do not see the component, ensure that the ResolvePlaceholderExtenderAllowedControls processor is included in the coveoResolvePlaceholderAllowedControls pipeline.