Let's face it, Coveo has a few incarnations. You've got the Coveo Platform, the API, Search UI, Headless, Sitecore, Salesforce, etc. and now you can add Atomic to that list. Each has their purpose and their strengths and one of the strengths of Atomic is to get a search page up and running fast.
The latest version of documentation for Atomic can be found here.
It's true purpose is that of a web component for building accessible, responsive and most importantly future proofed Coveo experiences. It does through building upon other another Coveo technology, Headless. You have a React app and you want a search functionality, Atomic. Due to it being in its relative infancy, aspects of it are expected to change and evolve, so just keep that in mind if you're thinking of diving in.
Let's Install It
So how does it work? Well like every other Coveo app things are broken down into a couple distinct areas. The initialization portion. And then the results, how it looks essentially.
Like Headless and JSUI you can install Atomic a couple different ways.
Install Via NPM
The first being by running npm install @coveo/atomic within a project you've setup.
Script Install
The second approach is if you have a page ready, you can simply add in the JavaScript and CSS references into the head tag.
<script type="module" src="https://static.cloud.coveo.com/atomic/latest/atomic.esm.js"></script>
<link rel="stylesheet" href="https://static.cloud.coveo.com/atomic/latest/themes/default.css"/>
Let's Get It Running
Inside the <head> tag of your page you would add the following script tags. Looks pretty familiar doesn't it.
<head>
<script>
(async () => {
await customElements.whenDefined('atomic-search-interface');
const searchInterface = document.querySelector('atomic-search-interface');
await searchInterface.initialize({
accessToken:'<ORGANIZATION_ID>',
organizationId: '<ACCESS_TOKEN>'
});
})();
</script>
</head>
Looks familiar doesn't it. There are a few key differences however. First you notice it's entirely in an async/await setup waiting for the page to be rendered. It's just more efficient. The second being that it's looking for the atomic-search-interface tag. This refers to the Atomic Search Interface component.
As Atomic is built upon Headless this is how things will be structured. There are now far fewer div tags with class references. You still have them, but they're more for styling and not functional in nature.
Where div tags used to contain data attributes, we now have parameters that can enhance the capabilities and functionality of each component.
Search Interface Structure
Taking a look at the html structure of a basic Atomic search component we see the following.
<atomic-search-interface>
<atomic-search-box></atomic-search-box>
<atomic-facet-manager>
<atomic-facet field="author" label="Authors"></atomic-facet>
</atomic-facet-manager>
<div class="results-container">
<atomic-no-results></atomic-no-results>
<atomic-result-list></atomic-result-list>
</div>
</atomic-search-interface>
Have no fear, you can style these like any other HTML tag and as such you can create some phenomenal looking search experiences.
More To Come
In upcoming articles I'll be exploring a bit deeper into the various components you can use to build a search page.
