Inserting and Customizing a Distance Resources Component

The Coveo JavaScript Search Framework offers a Distance Resources Component to filter a query based on geolocation.

The Coveo Hive Framework offers a set of renderings to use this component in a Coveo for Sitecore scenario.

To be able to use geolocation components and rules,  you must first add the Distance Resources Hive Rendering to the page. This rendering calculates the distance between each item and the user.

Configuring the Distance Resources data-source

Before inserting the distance resource component, you need to configure its data-source component.

  1. In the Sitecore Content Editor, use the insert option on the (Global/Local) Resources folder to insert a Distance Resources data-source. If you don’t have a data-source folder yet, see Step 1: Branching the Data Sources of the Hive tutorial.

  2. In the Basic Settings section, fill out the following fields:

    1. Latitude Field:The name of the field to use as the latitude for the distance query.

    2. Longitude Field:The name of the field to use as the longitude for the distance query.

    3. Units: The units to use for calculating the distance.

      For more information about any of the fields above, see the Distance Resources Component.

  3. Depending on your needs, you may also want to change the value of the Distance Field Name,which represents the name of the field where the distance is stored on each item.

  4. Save the item.

Inserting a Distance Resources Component in a Search Page

  1. Access the Experience Editor of the Coveo-powered search page you want to edit.

  2. Locate the UI Header section.

  3. Click Add here to insert a CoveoDistanceResources rendering.

  4. In the Select a Rendering dialog, click the Distance Resources icon, and then click Select.

  5. Link it to the previously created Distance Resources data-source.

  6. The page will load for a few seconds before the component and a Distance Placeholder appears on the page.

  7. Click the Distance Placeholder.

  8. In the Select a Rendering dialog, click the icon of your preferred provider, and then click Select.

  9. Save your page.

What’s Next?

Once you have the resources in place, you can leverage it in these related renderings:

  • Distance Facet Slider

  • Distance Facet Range

  • Distance Sort