Duplicate a Component to Modify Its HTML

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.

You might encounter circumstances where a Coveo for Sitecore component meets your requirements, aside from its HTML rendering. When situations like these arise, you might not need to create an entire new custom component, which is a complex and lengthy process.

Instead, you can probably achieve your goal by duplicating the component rendering item and view file and making the necessary adjustments on these duplicates. Using this technique, your duplicate component benefits from the original Coveo for Sitecore component configuration options available through its data source.

Certain Coveo for Sitecore search interface DOM element class attributes strictly serve to bind the element to Coveo CSS styles (see Configuration Through Markup). Integrators often prefer leveraging a front-end framework (for example, Bootstrap) so that Coveo-powered search interfaces better match the look and feel of their websites and to benefit from element positioning options and responsiveness these tools provide. To do so, integrators change some class attribute values of Coveo for Sitecore renderings, beginning with the Modular Frame component.

Warning
WARNING

Never edit Coveo for Sitecore renderings, layouts and view files directly. Always edit duplicates.

If you want to change Coveo for Sitecore search interface DOM element class attribute values in your duplicate component view files, ensure that you understand which DOM elements serve strictly for visual appearance purposes beforehand (see Configuration Through Markup).

Duplication Procedure

Duplicating a Coveo for Sitecore component involves performing the following steps:

  1. Creating and Editing the Duplicate Coveo for Sitecore Rendering Item

  2. Creating the Duplicate Coveo for Sitecore .cshtml View File

  3. Editing the Allowed Controls of the Target Coveo Placeholder

  4. Inserting Your Duplicate Component in a Coveo-Powered Search Page

  5. Editing the .cshtml View File

Important

The new items and file required for your duplicate component have to be stored outside Coveo folders in Sitecore, so as to avoid being overwritten during an upgrade of Coveo for Sitecore. Follow the instructions below carefully.

Creating and Editing the Duplicate Coveo for Sitecore Rendering Item

  1. In the Sitecore Content Editor, right-click the /sitecore/layout/Renderings folder and select Insert > Rendering Folder.

  2. Name your new folder Coveo Hive Duplicates.

  3. In the /sitecore/layout/Renderings/Coveo Hive folder, locate the Coveo rendering item you want to duplicate.

  4. Right-click the Coveo rendering item and select Duplicate.

    DuplicateCoveoRenderingItem

  5. Give your duplicate item a meaningful name.

    DuplicateRenderingItemName

  6. Move your duplicate item inside your Coveo Hive Duplicates folder.

    DuplicateModularFrameInNewFolder

  7. In your duplicate item, edit the Path field value. The Path field value represents the location and name of the soon-to-be-created duplicate component view file. The location of the new view file must not be inside the /Views/Coveo Hive/ folder or one of its subfolders.

    DuplicateRenderingViewPath

Creating the Duplicate Coveo for Sitecore .cshtml View File

  1. In your file manager, create the folder you provided the Path field value for in step 7 of section Creating and Editing the Duplicate Coveo for Sitecore Rendering Item.

    CreateDuplicateViewFolder

  2. Open the view folder that contains the .cshtml view file to duplicate.

    DuplicatedRenderingViewFolder

  3. Duplicate the .cshtml view file.

  4. Rename the new view file in accordance with the Path field value you specified in step 7 of section Creating and Editing the Duplicate Coveo for Sitecore Rendering Item.

    RenameDuplicateViewFile

  5. Move the new view file to its intended folder, in accordance with the Path field value you specified in step 7 of section Creating and Editing the Duplicate Coveo for Sitecore Rendering Item.

    MoveDuplicateViewToItsViewFolder

Editing the Allowed Controls of the Target Coveo Placeholder

Add your new rendering item to the list of Allowed Controls for the target placeholder through a Placeholder Extender (see Patching the Allowed Controls of an Existing Placeholder).

PlaceholderExtenderForDuplicateRendering

You now have a new Coveo duplicate component that’s protected from being overwritten upon a Coveo for Sitecore upgrade.

Inserting Your Duplicate Component in a Coveo-Powered Search Page

When you duplicate a Coveo for Sitecore rendering as explained in this article, certain characteristics of the original component are automatically carried over to its duplicate, namely:

  • its model

  • its data source template

Hence, in the Sitecore Experience Editor, when you insert your new rendering in the placeholder you have extended, the behavior is the same as if you had inserted the original Coveo for Sitecore rendering. For example, if the original component requires a data source, your duplicate also requires a data source of the same type (that is, that’s based off of the same template).

Editing the .cshtml View File

You can now begin editing the .cshtml view file of your duplicate component and test the results as you go.

Warning
WARNING

Never edit Coveo for Sitecore renderings, layouts and view files directly. Always edit duplicates.

If you want to change Coveo for Sitecore search interface DOM element class attribute values in your duplicate component view files, ensure that you understand which DOM elements serve strictly for visual appearance purposes beforehand (see Configuration Through Markup).