Skip to main content

Architecture: Product

This section describes the data flow and architectural components of the Product module, with a focus on how SAP Commerce data is transformed.

High-Level Architecture​

The Product module uses a multi-layered approach to ensure that your frontend remains decoupled from the complex data structures of the SAP Commerce OCC API.

Key Components​

1. The Mapper (Transformation Layer)​

The Mapper is the most critical component for maintainability. SAP Commerce (Hybris) often returns deeply nested objects for prices, images, and stock. The CommerceProductMapper "flattens" and cleans this data into a consistent Product interface.

  • Shadowing: You can override specific mapping logic by shadowing the ProjectCommerceProductMapper in your project.

2. Handling Variants and Attributes​

SAP Commerce products are often part of a Variant Hierarchy (e.g., a "Style" parent with "Size/Color" children).

  • Selection Logic: Archibald handles the logic of identifying which variant is "active" based on the URL or user selection.
  • Classification Attributes: Technical specifications and features are mapped from the OCC classifications array into a more accessible attributes map.

3. Image Handling​

SAP Commerce provides a list of media objects with different formats (e.g., thumbnail, product, zoom). The Archibald mapper identifies the correct image URL for the requested resolution and ensures it is available to the Image component.

Connection with Other Areas​

  • Universal Client: The ProductClient is isomorphic and handles caching and state management for product data. It ensures that the same data is available to both web and mobile platforms.
  • Pluggable Providers: The ProductModule on the server allows you to register different providers (e.g., SAP Commerce, Mock, or a custom CMS-based product source) without changing the frontend hooks.