marketplaces/docs/Product-Details-Report.md

Product Details Report

Scope

Sprint 6 implemented the product details route and UI using the frozen architecture and the existing Product Domain. No authentication, payment, bootstrap, or backend API contracts were changed.

The route and UI consume ProductFacade only. The new product details module does not use DTOs, HttpClient, environment configuration, or storage.

Implemented Route

• /product/:id

Legacy /item/:id now redirects to /product/:id for compatibility.

Implemented Module

Product Details Container

• src/app/features/website/product/containers/product-details-container.component.ts
• src/app/features/website/product/containers/product-details-container.component.html
• src/app/features/website/product/containers/product-details-container.component.scss

Responsibilities implemented:

• Reads the route id.
• Loads the product through ProductFacade only.
• Handles loading, error, and missing-product states.
• Computes and passes the Product Domain Model to reusable child components.
• Loads related products from the same category through ProductFacade.
• Supports variant selection and computed price/stock updates.

Reusable Components

Product Gallery

• src/app/features/website/product/components/product-gallery/product-gallery.component.ts
• src/app/features/website/product/components/product-gallery/product-gallery.component.html
• src/app/features/website/product/components/product-gallery/product-gallery.component.scss

Features:

• Main image
• Thumbnail list
• Video-aware media rendering
• Future multi-image support through the existing media array shape

Product Information

• src/app/features/website/product/components/product-information/product-information.component.ts
• src/app/features/website/product/components/product-information/product-information.component.html
• src/app/features/website/product/components/product-information/product-information.component.scss

Features:

• Title
• Price
• Discount
• Badges
• Stock
• Add-to-cart output

Variant Selector

• src/app/features/website/product/components/variant-selector/variant-selector.component.ts
• src/app/features/website/product/components/variant-selector/variant-selector.component.html
• src/app/features/website/product/components/variant-selector/variant-selector.component.scss

Features:

• Color selection
• Size selection
• Fallback display for single-variant products

Delivery Information

• src/app/features/website/product/components/delivery-information/delivery-information.component.ts
• src/app/features/website/product/components/delivery-information/delivery-information.component.html
• src/app/features/website/product/components/delivery-information/delivery-information.component.scss

Features:

• Digital delivery state
• Delivery option list
• Currency display

Product Description

• src/app/features/website/product/components/product-description/product-description.component.ts
• src/app/features/website/product/components/product-description/product-description.component.html
• src/app/features/website/product/components/product-description/product-description.component.scss

Features:

• Simple description
• Structured specification fields
• Plain description fallback

Related Products

• src/app/features/website/product/components/related-products/related-products.component.ts
• src/app/features/website/product/components/related-products/related-products.component.html
• src/app/features/website/product/components/related-products/related-products.component.scss

Features:

• Uses existing ProductFacade results
• Excludes the current product
• Reuses the shared product card

Product Domain Usage

All product details UI code uses Product Domain models and ProductFacade. Backend DTOs remain isolated to the domain/provider layer.

The container derives all view state locally from the product model:

• selected color
• selected size
• effective price
• effective currency
• effective remaining stock
• gallery selection
• related products

Navigation Updates

Updated links to use the new route surface:

• product card navigation
• carousel item links
• cart item links
• category item links
• catalog module product navigation

Validation

Completed checks:

• Product loads through ProductFacade.
• Variant changes update displayed price.
• Stock changes correctly when variant selection changes.
• Gallery works with primary and thumbnail media.
• Related products work through the same-category product query.
• Components are reusable and input/output-only.
• No DTO usage in the new product details module.
• No HttpClient in the new product details UI.
• No storage or environment usage in the new product details UI.
• Build passes.

Build validation:

npm run build

Stop Point

Product Details Module implementation is complete for Sprint 6. Stop here for approval before starting any further module work.

Sprint 11 - Product Experience 2.0

Sprint 11 extends Product Details UX with reusable modules and config-driven behavior. Architecture, Widget Manifest, Section Engine, bootstrap loading, authentication, and payment logic remain unchanged.

New Reusable Modules

• Product Actions module
  • Add to Cart, Buy Now, Wishlist, Compare, Share, Notify Me
  • productPage.actions controls visibility of each action
• Product Gallery upgrade
  • Media renderer by type (image, video, pdf, manual, warranty)
  • Thumbnail strip + active media
  • Mobile swipe support
  • Zoom/fullscreen extension events (zoomRequested, fullscreenRequested)
• Product Specifications upgrade
  • Grouped attributes via specificationGroups
  • Translated labels via labels map
  • Backward-compatible fallback to descriptionFields and attributes
• Variant Selector upgrade
  • Dynamic option groups via variantOptions
  • No hardcoded variant keys required
  • Backward-compatible color/size fallback
• Reviews upgrade
  • Existing pagination preserved
  • Optional load-more mode added via config
  • Review form adds explicit validation and success state
• Questions & Answers upgrade
  • Existing list/answers/accepted-answer behavior preserved
  • Submission can be toggled off while component remains future-ready
• Related Products upgrade
  • Supports multiple backend-provided collections
  • Falls back to previous single related collection behavior

Config Additions (backward-compatible)

productPage supports new optional keys:

{
	"reviews": {
		"mode": "pages"
	},
	"questions": {
		"allowSubmission": true
	},
	"actions": {
		"enabled": true,
		"addToCart": true,
		"buyNow": true,
		"wishlist": true,
		"compare": true,
		"share": true,
		"notifyMe": true
	}
}

Product JSON Extension Example

{
	"itemID": 7812,
	"name": "Laptop Pro 14",
	"media": [
		{ "type": "image", "url": "https://cdn.example.com/items/7812/main.jpg" },
		{ "type": "video", "url": "https://cdn.example.com/items/7812/demo.mp4" },
		{ "type": "pdf", "url": "https://cdn.example.com/items/7812/spec.pdf" },
		{ "type": "manual", "url": "https://cdn.example.com/items/7812/manual.pdf" },
		{ "type": "warranty", "url": "https://cdn.example.com/items/7812/warranty.pdf" }
	],
	"specificationGroups": [
		{
			"key": "display",
			"label": "Display",
			"labels": { "en": "Display", "ru": "Экран", "hy": "Էկրան" },
			"attributes": [
				{ "key": "size", "value": "14", "unit": "inch", "labels": { "en": "Size", "ru": "Диагональ", "hy": "Չափ" } },
				{ "key": "resolution", "value": "2880x1800", "labels": { "en": "Resolution", "ru": "Разрешение", "hy": "Լուծաչափ" } }
			]
		}
	],
	"variantOptions": [
		{
			"key": "storage",
			"label": "Storage",
			"options": [
				{ "value": "256GB" },
				{ "value": "512GB" }
			]
		}
	],
	"relatedCollections": [
		{
			"id": "frequently-bought-together",
			"title": "Frequently bought together",
			"titles": { "ru": "Покупают вместе", "hy": "Հաճախ գնում են միասին" },
			"products": [9021, 9022, 9023]
		},
		{
			"id": "similar-products",
			"title": "Similar products",
			"products": [9030, 9031]
		}
	]
}

Extension Points

• Gallery overlays can subscribe to zoomRequested and fullscreenRequested without changing gallery internals.
• Variant logic can add new option groups from backend by extending variantOptions only.
• Specifications can add locale labels without frontend refactor.
• Related collections can add campaign-specific blocks without changing section engine.
• Action visibility and review mode can be tuned from config without component rewrites.