Reading time: 5 min read
Coveo Atomic 1.0.4
What's New
Start typing to search...
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.
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.
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.
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. |
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.
