---
title: Build your search interface (legacy)
slug: ladf0003
canonical_url: https://docs.coveo.com/en/ladf0003/
collection: coveo-for-commerce
source_format: adoc
---
# Build your search interface (legacy)

> **Warning**
>
> This article explains how to implement Coveo-powered interfaces that use legacy [Atomic](https://docs.coveo.com/en/lcdf0264/) components interacting with the Coveo Search API.
> 
> For new Coveo for Commerce implementations, consider using [Coveo Headless for commerce](https://docs.coveo.com/en/ob480177/).
> [Coveo Headless](https://docs.coveo.com/en/lcdf0493/) leverages the Commerce API, offering a more efficient and flexible approach to interacting with the [Coveo Platform](https://docs.coveo.com/en/186/).

SAP Commerce Cloud composable storefront (previously SAP Spartacus) is built upon [Angular](https://angular.io/), which [Coveo Atomic](https://docs.coveo.com/en/lcdf0264/) [supports natively](https://docs.coveo.com/en/atomic/latest/usage/frameworks/atomic-angular-wrapper).

This article explains how to include Coveo Atomic into the Angular components of an SAP Commerce Cloud composable storefront.

> **Note**
>
> This article shows how to replace the default components of the SAP Commerce Cloud composable storefront.
> As the default components already exist in the back end, you don't need to do anything in the [Backoffice Administration Cockpit](https://help.sap.com/docs/SAP_COMMERCE/5c9ea0c629214e42b727bf08800d8dfa/8c16979286691014abe6f41434c7614a.html).
> 
> You must update the front end only.

## Adjust the app to use Coveo

To use Coveo-powered search in your project, perform the following steps.

. In the root of your Angular application, open the `tsconfig.json` file and update the `compilerOptions` object with the following:

```javascript
"compilerOptions": {
  // ...
  "allowSyntheticDefaultImports": true
},
```

. Install the Atomic Angular package:

```bash
npm i @coveo/atomic-angular
```

. [Move the Atomic static assets to the `src` directory](https://docs.coveo.com/en/atomic/latest/usage/frameworks/atomic-angular-wrapper#load-static-assets) of your app and update the `angular.json` file accordingly.

. To add basic styling, [include the Default Coveo Theme](https://docs.coveo.com/en/atomic/latest/usage/frameworks/atomic-angular-wrapper#include-the-default-coveo-theme).

. To be able to use the Atomic Angular components, open the `src/app/app.module.ts` file and [import the `AtomicAngular` module](https://docs.coveo.com/en/atomic/latest/usage/frameworks/atomic-angular-wrapper#import-atomicangularmodule).

## Update the main component

. [To initialize the search interface](https://docs.coveo.com/en/atomic/latest/usage/frameworks/atomic-angular-wrapper#initialize-your-search-interface), update the `src/app/app.component.ts` file:

```javascript
import { AfterViewInit, Component } from '@angular/core';
import { loadFieldActions } from '@coveo/atomic-angular'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const searchInterface = document.querySelector('atomic-search-interface');
    searchInterface
      ?.initialize({
        accessToken: 'xxxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', <1>
        organizationId: 'orgnameplaceholder',
      })
      .then(() => {
        const engine = searchInterface.engine;

        if (engine) {
          const fieldActions = loadFieldActions(engine);
          engine.dispatch(fieldActions.registerFieldsToInclude([ <2>
            'ec_brand',
            'ec_category',
            'ec_image',
            'ec_price'
          ]));
          searchInterface.executeFirstSearch();
        }
      });
  }
}
```

<1> Specifies credentials for the target Coveo organization.
See [Authenticate via search token](https://docs.coveo.com/en/ladf0004/) and [Use API key authentication with the Search API](https://docs.coveo.com/en/105/).

<2> Specifies what [custom fields](https://docs.coveo.com/en/1833#field-origin) to use in the UI.

. By default, the `src/app/app.component.html` contains only one component:

```html
<cx-storefront></cx-storefront>
```

This component is the entry point of the SAP Commerce Cloud composable storefront.
To add a search interface to the storefront, wrap it inside the `[atomic-search-interface](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-search-interface\--docs)` component.
Also, you must add an Angular template for every [Atomic](https://docs.coveo.com/en/lcdf0264/) component you want to implement in your project.
For example, you can add a `[atomic-search-box](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-search-box\--docs)` component:

```html
<atomic-search-interface>
  <cx-storefront></cx-storefront>
</atomic-search-interface>

<ng-template cxOutletRef="SearchBoxComponent"> <1>
  <app-coveo-search-box></app-coveo-search-box>
</ng-template>
```

<1> `cxOutletRef` is the name of the default component you want to replace.
To find out the name of the default component, you must:
. Open the storefront in your browser.
. On the **Network** tab, find the request to the `cms/pages?` endpoint.
. In the preview, find the content slot that contains the component you want to replace.

For example, the default search box component is called `SearchBoxComponent`:

![The preview of the request to the `cms/pages?` endpoint with the `contentSlots` section expanded](https://docs.coveo.com/en/assets/images/coveo-for-commerce/images/searchboxcomponent-request-preview.png)

> **Important**
>
> You can also replace a default component by updating the storefront's global configuration.
> See [`provideConfig`](https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/eaef8c61b6d9477daf75bff9ac1b7eb4/b547483f90a7422abf7c597b454af4b2.html?q=Global%20Configurations#loiofd8c004bd5cb4281a0a43362c8973864) in the SAP Commerce Cloud documentation.
> 
> See the example of this method below, in the next section.

## Build a search box module

Now that you imported and initialized Coveo Atomic, you can use [Atomic components](https://docs.coveo.com/en/atomic/latest/reference/) to build a UI.

. Create a `coveo-search` module:

```bash
ng g module coveo-search
```

. Open the created `src/app/coveo-search/coveo-search.module.ts` file and import `AtomicAngularModule`:

```tsx
// other imports
import { AtomicAngularModule } from '@coveo/atomic-angular';

@NgModule({
  declarations: [],
  imports: [CommonModule, AtomicAngularModule]
})
export class CoveoSearchModule {}
```

. Next, within your new module, create a `coveo-search-box` component:

```bash
ng g component coveo-search/coveo-search-box
```

This imports the `CoveoSearchBoxComponent` component and adds it into your module's `declarations` section.
You may also want to specify the component in the `exports` section, so that you can use it in other modules in the future.

**Example**

```tsx
// other imports
import { CoveoSearchBoxComponent } from './coveo-search-box/coveo-search-box.component';

@NgModule({
  declarations: [CoveoSearchBoxComponent],
  imports: [CommonModule, AtomicAngularModule],
  exports: [CoveoSearchBoxComponent]
})
```

> **Another way to replace components**
>
> If you decided not to update `src/app/app.component.html` to replace the default components, you can do the replacement via [`provideConfig`](https://help.sap.com/docs/SAP_COMMERCE_COMPOSABLE_STOREFRONT/eaef8c61b6d9477daf75bff9ac1b7eb4/b547483f90a7422abf7c597b454af4b2.html?q=Global%20Configurations#loiofd8c004bd5cb4281a0a43362c8973864).
> 
> For example, to replace `SearchBoxComponent`, open the `src/app/coveo-search/coveo-search.module.ts` file and add the `providers` section to the `@NgModule` decorator:
> 
> ```tsx
@NgModule({
  declarations: [CoveoSearchBoxComponent],
  imports: [CommonModule, SearchBoxModule, AtomicAngularModule],
  exports: [CoveoSearchBoxComponent],
  providers: [
    provideConfig({
      cmsComponents: {
        SearchBoxComponent: {
          component: CoveoSearchBoxComponent,
        },
      },
    }),
  ],
})
```

. Update the `src/app/coveo-search-box/coveo-search-box.component.html` template:

```html
<div class="custom-search">
  <atomic-layout-section section="search">
    <atomic-search-box>
      <atomic-search-box-recent-queries></atomic-search-box-recent-queries>
      <atomic-search-box-query-suggestions></atomic-search-box-query-suggestions>
    </atomic-search-box>
  </atomic-layout-section>
</div>
```

## Build a search results module

The default search results component is called `SearchResultsListComponent`.

![The preview of the request to the `cms/pages?` endpoint with the `SearchResultsListComponent` component shown](https://docs.coveo.com/en/assets/images/coveo-for-commerce/images/searchresultslistcomponent-request-preview.png)

To replace it with an [Atomic](https://docs.coveo.com/en/lcdf0264/) component, perform the similar steps as for the search box component above.

. Update the `src/app/app.component.html` file to replace that component:

```html
// ...
// previously added components

<ng-template cxOutletRef="SearchResultsListComponent">
  <app-coveo-search-list></app-coveo-search-list>
</ng-template>
```

. Create a `coveo-search-result` module and the `coveo-search-list` component within it.

. Update the `src/app/coveo-search-list/coveo-search-list.component.html` template file:

```html
<div class="custom-search-results">
  <atomic-layout-section section="main">
    <atomic-layout-section section="status">
      <atomic-refine-toggle></atomic-refine-toggle>
      <atomic-query-summary></atomic-query-summary>
      <atomic-sort-dropdown>
        <atomic-sort-expression label="relevance" expression="relevancy"></atomic-sort-expression>
        <!-- The custom field dispatched in app.component.ts -->
        <atomic-sort-expression label="Price (high to low)" expression="ec_price descending"></atomic-sort-expression>
        <!-- The custom field dispatched in app.component.ts -->
        <atomic-sort-expression label="Price (low to high)" expression="ec_price ascending"></atomic-sort-expression>
      </atomic-sort-dropdown>
    </atomic-layout-section>
    <atomic-layout-section section="results">
      <atomic-result-list
        display="grid"
        image-size="large"
      >
        <atomic-result-template>
          <template>
            <atomic-result-text field="title"></atomic-result-text>
            <atomic-result-section-visual>
              <!-- The custom field dispatched in app.component.ts -->
              <atomic-result-image field="ec_image"></atomic-result-image>
            </atomic-result-section-visual>
            <atomic-result-section-excerpt>
              <atomic-result-text field="excerpt"></atomic-result-text>
            </atomic-result-section-excerpt>
          </template>
        </atomic-result-template>
      </atomic-result-list>
    </atomic-layout-section>
    <atomic-layout-section section="pagination">
      <atomic-load-more-results></atomic-load-more-results>
    </atomic-layout-section>
  </atomic-layout-section>
</div>
```

## Build a facet module

The default component for facets and filters is called `ProductRefinementComponent`.

![The preview of the request to the `cms/pages?` endpoint with the `ProductRefinementComponent` component shown](https://docs.coveo.com/en/assets/images/coveo-for-commerce/images/productrefinementcomponent-request-preview.png)

To replace it with an [Atomic](https://docs.coveo.com/en/lcdf0264/) component, perform the similar steps as shown in the previous section.

. Update the `src/app/app.component.html` file to replace that component:

```html
// ...
// previously added components

<ng-template cxOutletRef="ProductRefinementComponent">
  <app-coveo-search-facet></app-coveo-search-facet>
</ng-template>
```

. Create a `coveo-search-result-refinement` module and the `coveo-search-facet` component within it.

. Update the `src/app/coveo-search-list/coveo-search-facet.component.html` template file:

```html
<div class="custom-search-facets">
  <atomic-layout-section section="facets">
    <atomic-facet-manager>
      <!-- The custom field dispatched in app.component.ts -->
      <atomic-category-facet
        field="ec_category"
        label="Category"
      ></atomic-category-facet>
      <!-- The custom field dispatched in app.component.ts -->
      <atomic-facet
        field="ec_brand"
        label="Brand"
      ></atomic-facet>
      <!-- The custom field dispatched in app.component.ts -->
      <atomic-numeric-facet
        field="ec_price"
        label="Price"
      ></atomic-numeric-facet>
    </atomic-facet-manager>
  </atomic-layout-section>
</div>
```

## Test the application

. To launch the application locally, run the `yarn start` command.
The application will open in the browser, at the `+http://localhost:4200+` address by default.

. You should now have an interface powered by Coveo! Feel free to modify and experiment with it.
You can add or remove components in the markup, type in requests in the search bar, use facets on the left side, or click the results.

> **Important**
>
> To see search results, make sure that your Coveo organization already has [data indexed from an SAP Commerce Cloud instance](https://docs.coveo.com/en/ladf0002/).

## Sample implementation

To see a more advanced implementation, examine the [Coveo Barca demo](https://engineering.barca.group/).