feature: Added product variants feature

libs/domain/product/attributes/src/attributes.component.ts

@@ -1,14 +1,17 @@
 import { ContentMixin, defaultOptions } from '@oryx-frontend/experience';
 import { PRODUCT, ProductContext, ProductMixin } from '@oryx-frontend/product';
 import { featureVersion, hydrate, ssrShim } from '@oryx-frontend/utilities';
 import { LitElement, TemplateResult, html } from 'lit';
 import { ProductAttributesOptions } from './attributes.model';
 import { productAttributeStyles } from './attributes.styles';
 
 @ssrShim('style')
-@defaultOptions({ columnCount: '2' })
+@defaultOptions({
+  columnCount: '2',
+  ...(featureVersion >= '1.5' ? { highlightVariantAttribute: true } : {}),
+})
 @hydrate({ context: featureVersion >= '1.4' ? PRODUCT : ProductContext.SKU })
 export class ProductAttributesComponent extends ProductMixin(
   ContentMixin<ProductAttributesOptions>(LitElement)
 ) {
   static styles = [productAttributeStyles];
@@ -23,13 +26,30 @@
         ${Object.keys(names).map(
           (key) => html`
             <dt>${this.getName(names, key)}</dt>
-            <dd>${values[key]}</dd>
+            <dd ?highlight=${this.isHighlighted(key)}>${values[key]}</dd>
           `
         )}
       </dl>
     `;
   }
 
+  /**
+   * Highlighted attributes will clarify the uniqueness of the value among
+   * the variants.
+   *
+   * Indicates whether the attribute value should be highlighted, based on
+   * a global component configuration and if the attribute is part of the
+   * variant definition.
+   *
+   * @since 1.5
+   */
+  protected isHighlighted(key: string): boolean {
+    const { variantDefinition } = this.$product() ?? {};
+    return (
+      !!this.$options().highlightVariantAttribute && !!variantDefinition?.[key]
+    );
+  }
+
   protected getName(
     names: Record<string, string>,
     key: string

libs/domain/product/attributes/src/attributes.model.ts

@@ -1,3 +1,11 @@
 export interface ProductAttributesOptions {
   columnCount?: string;
+  /**
+   * Highlighted variant attributes will clarify the uniqueness of the value among
+   * the variants. If the attribute is unqieu to the variant, a highlight attribute
+   * is added, so that the stylesheet can mark the attribute value.
+   *
+   * @since 1.5
+   */
+  highlightVariantAttribute?: boolean;
 }

libs/domain/product/attributes/src/attributes.styles.ts

@@ -16,4 +16,13 @@ export const productAttributeStyles = css`
     margin-block: 10px 20px;
     color: var(--oryx-color-neutral-9);
   }
+
+  dd[highlight] {
+    background: var(--oryx-color-primary-4);
+    color: initial;
+    border-radius: 8px;
+    padding: 1px 6px;
+    margin-inline-start: -6px;
+    width: fit-content;
+  }
 `;

libs/domain/product/src/components.ts

@@ -14,3 +14,4 @@ export * from '../media/src/media.def';
 export * from '../price/src/price.def';
 export * from '../relations/relations.def';
 export * from '../title/src/title.def';
+export * from '../variant-selector/variant-selector.def';

libs/domain/product/src/models/product.api.model.ts

@@ -20,12 +20,28 @@ export module ApiProductModel {
     id?: string;
     isDiscontinued?: boolean;
     productAbstractSku?: string;
+
+    /**
+     * Reference to the abstract product(s).
+     */
+    abstractProducts: Abstract[];
+    /**
+     * Reference to the concrete variations. This includes the current SKU.
+     */
+    concreteProducts: Concrete[];
   }
 
   export interface Abstract extends Attributes {
-    attributeMap?: string[][];
+    attributeMap?: {
+      superAttributes?: Record<string, string[]>;
+      attributeVariantMap?: Record<string, Record<string, string>>;
+    };
     merchantReference?: string;
     superAttributes?: string[];
+    /**
+     * Reference to the concrete variations. This includes the current SKU.
+     */
+    concreteProducts: Concrete[];
   }
 
   export interface Image {
@@ -121,7 +137,8 @@ export module ApiProductModel {
     | Include<Includes.ConcreteProductAvailabilities, ProductAvailability>
     | Include<Includes.Labels, ProductLabels>
     | Include<Includes.AbstractProducts, Abstract>
-    | Include<Includes.CategoryNodes, CategoryNodes>;
+    | Include<Includes.CategoryNodes, CategoryNodes>
+    | Include<Includes.ConcreteProducts, Concrete>;
 
   export type Response = JsonApiModel<Concrete, ResponseIncludes[]>;
 }

libs/domain/product/src/models/product.model.ts

@@ -43,6 +43,12 @@ export interface Product {
   availability?: ProductAvailability;
   discontinued?: boolean;
   discontinuedNote?: string;
+  /**
+   * Holds variants of the current product. We only keep track of the SKU, so
+   * that additional product data must be resolved from the product service.
+   */
+  variants?: Record<string, Record<string, string>>;
+  variantDefinition?: Record<string, string[]>;
 }
 
 export interface ProductLabel {

libs/domain/product/src/services/adapter/normalizers/concrete-products/concrete-products.normalizer.ts

@@ -20,20 +20,24 @@ export function concreteProductsNormalizer(
   return combineLatest(
     data
       .filter((abstract) => abstract[concreteProductsKey]?.length)
-      .map((abstract) =>
-        combineLatest([
-          transformer.transform(
-            abstract[concreteProductsKey]?.[0],
-            ProductNormalizer
-          ),
+      .map((abstract) => {
+        const concretes = abstract[concreteProductsKey];
+        const concrete = abstract[concreteProductsKey][0];
+
+        if (concrete.abstractProducts) {
+          concrete.abstractProducts[0][concreteProductsKey] = concretes;
+        }
+
+        return combineLatest([
+          transformer.transform(concrete, ProductNormalizer),
           transformer.transform(abstract[categoryKey], CategoryIdNormalizer),
         ]).pipe(
           map(([product, nodeId]) => ({
             ...product,
             ...nodeId,
           }))
-        )
-      )
+        );
+      })
   );
 }
 

libs/domain/product/src/services/adapter/normalizers/product/model.ts

@@ -10,4 +10,5 @@ export type DeserializedProduct = ApiProductModel.Concrete &
     | CamelCase<ApiProductModel.Includes.Labels>
     | CamelCase<ApiProductModel.Includes.ConcreteProductAvailabilities>
     | CamelCase<ApiProductModel.Includes.AbstractProducts>
+    | CamelCase<ApiProductModel.Includes.ConcreteProducts>
   >;

libs/domain/product/src/services/adapter/normalizers/product/product.normalizer.ts

@@ -25,7 +25,6 @@ export function productAttributeNormalizer(
     attributes,
     attributeNames,
   } = data;
-
   return {
     sku,
     name,
@@ -129,6 +128,41 @@ export function productCategoryNormalizer(
   return transformer.transform(node, CategoryNormalizer);
 }
 
+export function productVariantNormalizer(
+  data: DeserializedProduct
+): Partial<Product> {
+  const { abstractProducts } = data;
+
+  const abstract = abstractProducts?.[0];
+
+  const variantMap = abstract.attributeMap?.attributeVariantMap;
+  const variantDefinition = abstract.attributeMap?.superAttributes;
+
+  if (variantMap) {
+    const variantMapEntries = Object.entries(variantMap);
+
+    const variants = variantMapEntries.reduce((skuMap, [_, mapAttributes]) => {
+      const matchingVariant = abstract.concreteProducts.find(
+        (variant) =>
+          variant.attributes &&
+          Object.keys(mapAttributes).every(
+            (attrKey) => variant.attributes![attrKey] === mapAttributes[attrKey]
+          )
+      );
+
+      if (matchingVariant && matchingVariant.sku) {
+        skuMap[matchingVariant.sku] = mapAttributes;
+      }
+
+      return skuMap;
+    }, {} as Record<string, Record<string, string>>);
+
+    return { variants, variantDefinition };
+  }
+
+  return {};
+}
+
 export const productNormalizer: Provider[] = [
   {
     provide: ProductNormalizer,
@@ -162,6 +196,10 @@ export const productNormalizer: Provider[] = [
     provide: ProductNormalizer,
     useValue: productCategoryNormalizer,
   },
+  {
+    provide: ProductNormalizer,
+    useValue: productVariantNormalizer,
+  },
 ];
 
 declare global {

libs/domain/product/src/services/adapter/product-includes.ts

@@ -8,6 +8,7 @@ export const productIncludes = provideIncludes(PRODUCT, [
   ApiProductModel.Includes.ConcreteProductAvailabilities,
   ApiProductModel.Includes.Labels,
   ApiProductModel.Includes.AbstractProducts,
+  ApiProductModel.Includes.ConcreteProducts,
   {
     include: ApiProductModel.Includes.CategoryNodes,
     fields: [

libs/domain/product/variant-selector/index.ts

@@ -0,0 +1,2 @@
+export * from './variant-selector.component';
+export * from './variant-selector.styles';