Skip to main content

Search Integration Setup

This guide walks you through setting up the search integration in your Archibald application, matching the patterns used in the Shop template.

Server-Side Configuration​

To enable search functionality on the server, register the SearchModule in your CoreServer implementation (e.g., templates/shop/src/shop/server/module/server.tsx).

Module Registration​

import { SearchModule } from '@archibald/search';
import { CommerceSearchProvider } from '@archibald/commerce/search';
import { ProjectCommerceProductMapper } from 'shop/server/classes/project-commerce-product-mapper';

// ... inside your Server class
public async initModules() {
    await this.registerModules([
        new SearchModule({
            provider: new CommerceSearchProvider({ 
                config: () => this.configService.get('hybris.api'), 
                mappers: [ProjectCommerceProductMapper] 
            })
        }),
        // ... other modules
    ]);
}

Client-Side Configuration​

1. Create the Search Client​

Create a creator file for the search client (e.g., shop/client/api/creators/search.ts).

import { CommerceSearchAdapter } from '@archibald/commerce/search';
import { SearchClient } from '@archibald/search';
import { api } from 'shop/client/api';

export default new SearchClient({ 
    adapter: CommerceSearchAdapter, 
    api 
});

2. Provide the Client to your App​

Wrap your application with the SearchClientProvider in your main App.tsx.

import { SearchClientProvider } from '@archibald/search';
import SearchClient from 'shop/client/api/creators/search';

function App() {
    return (
        <SearchClientProvider client={SearchClient}>
            {/* Your application components */}
        </SearchClientProvider>
    );
}

Available Adapters​

The @archibald/search package supports an adapter pattern for different search providers:

  • CommerceSearchAdapter: Connects to a SAP Commerce commerce backend.
  • CoveoSearchAdapter: Connects to the Coveo search platform.
  • MockSearchAdapter: A mock adapter for testing.