Insert Custom Components in an Existing Search Interface

Sitecore Ecommerce Website Workplace Developer System Administrator Product Documentation

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

Inserting a Placeholder Section

The Placeholder Section rendering allows adding a placeholder in the interface. This placeholder can be an existing one that already has been configured or a custom placeholder.

Many of the placeholders in the Coveo Modular Frame already let you add the Placeholder Section rendering.

  1. Select the Main Content section, and click Add To Here

  2. Select the Placeholder Section component.

    37553669

  3. Select or create a new data source. If you select an existing data source that’s already configured, jump to step 7.

  4. You should now have a non-configured Placeholder Section component.

    37553666

  5. Click on the component, and click Edit Coveo Data Source.

  6. Enter the placeholder key that you want to insert.

    37553667

  7. You should now have an empty placeholder. If you don’t see it, ensure that you have properly configured the Placeholder Settings for the key entered in the data source.

    37553668

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 example, create a folder named "My Placeholder Extenders" under the path Sitecore > Layout> Placeholder Settings..

      37553671

  2. Right-click on the folder and choose Insert > Insert From Template

  3. In the templates, navigate to Coveo Hive > Structure and choose Placeholder Extender.

    1. Choose a name that identifies what you’re extending.

      SelectPlaceHolderExtenderTemplate

  4. In your newly created item, select the Placeholder Setting property.

  5. Choose the placeholder that you want to extend.

    PlaceholderToExtendKey

  6. In the Allowed Controls property, click Edit.

  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.

      37553674

  8. Save the item.

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

    37553675