Skip to main content

Product

@archibald/commerce/product implements the @archibald/product contract against the SAP Commerce product OCC API. The client side of this domain is deliberately thin — the generic ProductClient/ProductAdapter from @archibald/product already speak your BFF API, so what commerce adds is the server half plus the typed OCC shapes.

How to use

Client

Use the generic client — no commerce-specific adapter is needed:

// src/{platform}/client/api/creators/product.ts
import { ProductClient, ProductAdapter } from '@archibald/product';

import { api } from 'shop/client/api';

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

The commerce subpath contributes the types your components consume (CommerceProductVariantMatrixItem, CommerceProductClassification, CommerceProductFeature, CommercePriceSchema, …).

Server

Register the ProductModule with the commerce provider; pass project mappers to extend the OCC → storefront mapping:

// src/{platform}/server/module/server.tsx
import { ProductModule } from '@archibald/product';
import { CommerceProductProvider } from '@archibald/commerce/product';

new ProductModule({
provider: new CommerceProductProvider({
config: () => this.configService.get('hybris.api'),
mappers: [ProjectCommerceProductMapper]
})
});

A project mapper extends CommerceProductMapper and maps the fields your Hybris carries beyond standard OCC — this is the intended seam for custom attributes, not a fork of the provider.

API reference

ExportSideWhat it is
CommerceProduct* interfaces, CommercePriceSchema, review interfacesclientTyped OCC product shapes (variants, classifications, features, prices, reviews)
CommerceProductProviderserverProductModule provider fetching product data from OCC v2
CommerceProductMapperserverOCC → storefront mapping; extend and pass via mappers
mapping helpers, product/price mocksserverHelpers for custom mappers and fixtures for tests/mock backends

Configuration

Reads hybris.api from the environment config through the provider's config callback.

Further documentation

  • Product guide — the headless product architecture.
  • Search — product listings and facets come from the search domain, which shares the mapper.