Use Coveo Search in SAP Commerce Cloud Composable Storefront
Use Coveo Search in SAP Commerce Cloud Composable Storefront
SAP Commerce Cloud composable storefront (previously known as SAP Spartacus) is built upon Angular, which Coveo Atomic supports natively.
This article explains the steps required to build a basic search UI in SAP Commerce Cloud composable storefront using the Atomic framework.
Create an app
-
Create a new Angular app
ng new mystore --style=scss
When prompted for Angular routing, enter
n
forno
. -
Go to the newly created folder
cd mystore
-
To install Spartacus, you have to use the Spartacus schematics to quickly set up your application.
For the
base-url
andbase-site
parameters, use values from your SAP Commerce instance.ng add @spartacus/schematics@latest --base-url https://api.your-instance.commerce.ondemand.com/ --base-site=your-site --language=en --ssr
NoteDuring the installation, you’ll be prompted to choose which features you want to set up. If you want to build a B2B storefront, select the relevant B2B feature(s).
For more details on available features, see the SAP documentation.
-
Install the dependencies.
yarn install
-
To specify the path to your OCC, go to the
the src/environments
folder.In the
environments
andenvironments.prod.ts
files, update theenvironment
object with the following parameter:occBaseUrl: 'https://api.your.instance.commerce.ondemand.com/'
-
Open the
tsconfig.json
file and update thecompilerOptions
object with the following:"compilerOptions": { // ... "allowSyntheticDefaultImports": true },
Adjust the app to use Coveo
To use Coveo-based search in your project, perform the following steps.
-
Install the Atomic Angular package
npm i @coveo/atomic-angular
-
Move the Atomic static assets to the
src
folder of your app and update theangular.json
file accordingly. -
To add basic styling, include the Default Coveo Theme.
-
To be able to use the Atomic Angular components, open the
src/app/app.module.ts
file and import theAtomicAngular
module. -
To initialize the search interface, update the
src/app/app.component.ts
file: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',
organizationId: 'orgnameplaceholder', }) .then(() => { const engine = searchInterface.engine; if (engine) { const fieldActions = loadFieldActions(engine); engine.dispatch(fieldActions.registerFieldsToInclude([
'ec_brand', 'ec_category', 'ec_image', 'ec_price' ])); searchInterface.executeFirstSearch(); } }); } }
Specifies credentials for the target Coveo organization. See Authenticate via search token and Use API key authentication with the Search API. Specifies what custom fields to use in the UI.
Build a search UI
Now that you imported and initialized Coveo Atomic, you can use Atomic components to build a UI.
-
As a starting point, paste the following sample into the
src/app/app.component.html
file:<atomic-search-interface> <atomic-search-layout> <atomic-layout-section section="search"> <atomic-search-box></atomic-search-box> </atomic-layout-section> <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> <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> </atomic-search-layout> </atomic-search-interface>
To see search results, make sure that your Coveo organization already has data indexed from an SAP Commerce Cloud instance.
-
To launch the application locally, run the
yarn start
command. The application will open in the browser, at thehttp://localhost:4200
address by default. -
You now have a basic search 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, click the results, etc.
Sample implementation
To see a more advanced implementation, examine the Coveo Barca demo.