Skip to main content

Product Integration Setup

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

Server-Side Configuration​

To enable product data fetching on the server, register the ProductModule in your CoreServer implementation (e.g., templates/shop/src/shop/server/module/server.tsx).

Module Registration​

import { ProductModule } from '@archibald/product';
import { CommerceProductProvider } from '@archibald/commerce/product';
import { ProjectCommerceProductMapper } from 'shop/server/classes/project-commerce-product-mapper';

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

Client-Side Configuration​

1. Create the Product Client​

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

import { ProductClient, ProductAdapter } from '@archibald/product';
import { api } from 'shop/client/api';

export default new ProductClient({ adapter: ProductAdapter, api });

2. Provide the Client to your App​

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

import { ProductClientProvider } from '@archibald/product';
import ProductClient from 'shop/client/api/creators/product';

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