aed0a47388
Unify product details modules behind config-driven contracts so teams can extend UX without changing runtime architecture or bootstrap flow. Keep backward compatibility with existing product payloads by treating new media/specification/variant/related structures as optional extensions. Improve conversion and content discoverability with reusable actions, typed media rendering, grouped specifications, dynamic variants, and multi-collection related products.
273 lines
8.5 KiB
Markdown
273 lines
8.5 KiB
Markdown
# 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:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```json
|
|
{
|
|
"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
|
|
|
|
```json
|
|
{
|
|
"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.
|