Insights

Coveo Atomic 1.0.4

What's New

Coveo Atomic 1.0.4

It's been a few months since I covered Coveo Atomic. Back then we were at release 0.51.0 and now we're all the way up to release 1.0.4. I honestly had to do a double take because part of me thought, well, I clearly missed a few releases. Strangely, I did not. This is honestly great news though as with a 1.0.4 release Coveo is essentially telling us that it's stable and ready to use fully.

I have no doubt there will be future releases in the months to come, but for now I just can't wait to dig in.

The Highlights

So what all has changed? A fair bit. Well for starters, all components have had a visual overhaul. By doing this they've also made it easier to theme the site and it's components.

The interface is now translatable with both English and French support out-of-the-box.

Components

For starters Coveo has made a clear indicator of what are simply "Components" and those that are "Result Template Components".

From my initial investigation this is largely a way of indicating which components are usable from within an atomic-result component.

What's New?

Below are components that are new to the Atomic release.

Component What's New?
atomic-color-facet Purpose is to display a facet of results for the current query as colors.
atomic-icon Will display an SVG icon wth a 1:1 aspect ratio.
Has a singular property, titled icon that essentially a URL to said SVG.
atomic-load-more-results Well allow users to load additional results if there more are available.
atomic-rating-facet A facet of the results for the current query displayed as numerical ratings.
atomic-rating-range-facet Similar to the atomic-rating-facet but displayed as ranges.
atomic-refine-modal Is automatically created as a child of the atomic-search-interface when the atomic-refine-toggle is initialized.
atomic-refine-toggle Shows a button that opens a modal containing the facets and the sort components.
atomic-result-badge Renders a badge containing a field by identifying both the field parameter and the icon parameter by which to identify it by.
atomic-result-field-list Selectively renders its children to ensure they fit the parent element and adds dividers between them.
atomic-result-multi-value-text Renders the values of a multi-value string field by identifying the field parameter and the maxValuesToDisplay.

By utilizng the Shadow Parts: result-multi-value-text-separator and result-multi-value-text-value we can define how they're displayed.
atomic-result-section-actions Allows the user to perform an action on an item without having to view its details. An example that Coveo provided was think of adding an item to a shopping cart.
atomic-result-section-badges Icons / Images that highlight special features of the item.
atomic-result-section-bottom-metadata Displays additional descriptive information about the item.
atomic-result-section-emphasized Displays the field that’s important for its search criteria in very large font.
atomic-result-section-excerpt Displays the summary of a result item.
atomic-result-section-title This is typically the result's page title.
atomic-result-section-title-metadata By default, shown in very small font size as it is typically used for referencing fields that are related to the title.
atomic-result-section-visual Typically an image that represents the result. It can be used as an "icon", "small" or "large".
atomic-table-cell Used internally by the atomic-result-list component
atomic-table-element Defines a table column in a result list
atomic-timeframe Defines a timeframe of an atomic-timeframe-facet, and therefore must be defined within an atomic-timeframe-facet component. What's interesting though is that a timeframe is always from the current time to a point of time in the past.

You do this by specifying the period property and the unit property ["day", "hour", "minute", "month", "quarter", "week", "yeaer"].
atomic-timeframe-facet Displays a facet for the results as defined by the query as date intervals.

What's Changed?

Below are components that have been altered in a significant way, either inheriting functionaliity from a now deprecated component or classified differently (i.e. those that are now in the Result Template Component list).

Given the significant release change, my anticipation is that in all likelihood all components have been updated to some degree.

Component What's Changed?
atomic-breadbox Formerly titled, atomic-breadcrumb-manager.
atomic-date-facet Appears to have been removed. Possibly replaced by the atomic-timeframe-facet
atomic-date-range Appears to have been removed. Unsure what, if anything, it's been replaced with.
atomic-field-condition Now defined as part of the list of Result Template Components.
atomic-modal Appears to have been removed. Unsure what, if anything, it's been replaced with.
atomic-result-date Now defined as part of the list of Result Template Components.
atomic-result-icon Now defined as part of the list of Result Template Components.
atomic-result-image Now defined as part of the list of Result Template Components.
atomic-result-link Now defined as part of the list of Result Template Components.
atomic-result-list-placeholder Appears to have been removed.
atomic-result-number Now allows for formatting by using the atomic-format-number, atomic-format-currency, or atomic-format-unit inside the component.
atomic-result-price Appears to have been removed and merged into atomic-result-number
atomic-result-printable-uri Now defined as part of the list of Result Template Components.
atomic-result-quickview Appears to have been removed entirely.

With so much new and so much changed, I'm looking forward to getting in and playing around and creating some sample works that allow us to better understand how all of these things work together.

Set the search bar higher.

Personalize every digital experience with A.I. powered website search technology. Serve your website visitors relevant content, no matter who they are.