Custom Multi-Sort tutorial - Integrate the component

This is for:

Developer System Administrator
Warning
Legacy feature

This article pertains to the Coveo Hive framework which is now in maintenance mode.

Choose one of Coveo’s more modern, lightweight, and responsive libraries for any future search interface development. See the search interface Implementation guide for more details.

This page covers how to integrate our custom component in any existing search interface.

Inserting the Component in the Required Placeholder

Since our component is a sort component, we want to be able to insert it in the Coveo Sorts placeholder.

  1. In the Content Editor, under sitecore > Layout > Placeholder Settings, create a new folder named Coveo Hive Custom

  2. Right-click this folder, and select Insert From Template.

    Performing an Insert from template on the Coveo Hive Custom folder in the Content Editor | Coveo

  3. Under templates > Coveo Hive > Structure, select Placeholder Extender. Change its name to Multi Sort Placeholder Extension.

    Sitecore Content Editor folder structure showing the Placeholder Extender item | Coveo

  4. In the Placeholder Setting field, select the Sorts placeholder, located under Coveo Hive> Sorts.

  5. In the Allowed Controls field, select your custom Multi Sort rendering.

    Adding the custom component to the allowed renderings for the default Sorts placeholder | Coveo

This adds the custom component in the allowed renderings for the default Sorts placeholder.

Inserting the Component in the Search Interface

The following steps are used to insert our custom component into an existing search interface.

Get into the Experience Editor, in a Coveo Hive search interface of your choice.

  1. Find a sort component, and click Navigate to Parent.

    Navigating to the parent using the component toolbar in the Sitecore Experience Editor | Coveo

    1. This selects the Sorts placeholder, which we patched in the previous steps.

  2. Click Add here.

    Screenshot showing how to add a component to the Sorts placeholder in the Sitecore Experience Editor | Coveo

  3. You should see your new component. Select it, and click Select.

    Selecting the Multi Sort component to insert it into the Sorts placeholder | Coveo

  4. Click Change Associated Content.

    Changing the associated content for the Multi Sort component | Coveo

  5. Create a new data source for this component and click OK. For this example, we’ll place it in our local Sorts Parameters Folder.

    Creating a new data source for the Multi Sort component | Coveo

  6. Save the page.

Result

You should now see your component in the search interface.

The Sitecore Experience Editor showing the Multi Sort component | Coveo

In the next step, we’ll add some options for this component.