Coveo Atomic's Atomic Rating Facet

November 30, 2021

By David Austin

A Coveo Atomic rating facet, while truthfully nothing more than a basic facet, has now taken the effort out of transforming simple data into something much more visually appealing and meaningful.

AttributeDescriptionValues
field (required)The field in your source you want to use for the facet.string
labelThe facet heading.string
display-values-asWhether to display the facet values as checkboxes (multiple selection) or links (single selection). Possible values are 'checkbox' and 'link'."checkbox" | "link"
facet-idSpecifies a unique identifier for the facet.string | undefined
iconThe SVG icon to use to display the rating. You have a number of options available.

1. Link to an SVG. URL shoud start with http://, https://, ./, or ../

2. Use a value that starts with assets://, to display an icon from the Atomic package.

3. Use a stringified SVG to display it directly.

NOTE: When using a custom icon, at least part of your icon should have the color set to fill="currentColor". This part of the SVG will take on the colors set in the following variables:
--atomic-rating-facet-icon-active-color
--atomic-rating-facet-icon-inactive-color
star
max-value-in-indexThe maximum value in the field’s index and the number of rating icons to display in the facet. If not assigned a value, this property will default to the same value as numberOfIntervals.this.numberOfIntervals
min-value-in-indexThe maximum value in the field’s index and the number of rating icons to display in the facet. If not assigned a value, this property will default to the same value as numberOfIntervals.1
number-of-intervalsThe number of options to display in the facet. If maxValueInIndex isn’t specified, it will be assumed that this is also the maximum number of rating icons.5
filter-facet-countWhether to use basePath as a filter for the results.true (default) | false
injection-depthThe maximum number of results to scan in the index to ensure that the facet lists all potential facet values. Note: A high injectionDepth may negatively impact the facet request performance. Minimum: 01000 (default)
is-collapsedSpecifies if the facet is collapsed.false (default) | true

If you want to see all the Shadow Parts, do check out full list of Shadow Parts here.

Let's check out an example of how we this component for a recent blog, Feel The Power Of Coveo's Generic Rest API.

The Example

How It Looks

So now because our rating value was a 10 base system, we initially configured it to show all 10 stars.

 

Screenshot of the Coveo Atomic rating facet filters

We can adjust the min and max to show say, 1 - 5 or 5 - 10, but that's not very helpful as it will cut out a large number of results. So instead we created an extension to obtain a new rating system of 1 - 5.

Screenshot of the Coveo Atomic rating facet filters

How It's Configured

To get this to work, couldn't be easier. Have a look at the HTML used in creating this.

<atomic-rating-facet
    field="mdb_rating_5"
    min-value-in-index="1"
    max-value-in-index="5"
    label="Rating 2"
    number-of-intervals="5"></atomic-category-facet>

If we wanted a custom icon, we can use pretty much whatever we want, however it does need to support the attribute, fill: customColor on the part of the graphic that should fill according to the rating.

Screenshot of the Coveo Atomic rating facet filters

<atomic-rating-facet
    field="mdb_rating_5"
    icon="./bolt.svg"
    min-value-in-index="1"
    max-value-in-index="5"
    label="Rating 2"
    number-of-intervals="5"></atomic-category-facet>

If we don't like the checkboxes, we can change the update the attribute, display-values-as="link" and then it's functions like the atomic-facet set as a link.

Screenshot of the Coveo Atomic rating facet filters

That's all for today. More to come real soon.

Image of Fishtank employee David Austin

David Austin

Development Team Lead | Sitecore Technology MVP x 3

David is a decorated Development Team Lead with Sitecore Technology MVP and Coveo MVP awards, as well as Sitecore CDP & Personalize Certified. He's worked in IT for 25 years; everything ranging from Developer to Business Analyst to Group Lead helping manage everything from Intranet and Internet sites to facility management and application support. David is a dedicated family man who loves to spend time with his girls. He's also an avid photographer and loves to explore new places.