This commit is contained in:
104
docs/Catalog-UX-Architecture.md
Normal file
104
docs/Catalog-UX-Architecture.md
Normal file
@@ -0,0 +1,104 @@
|
||||
# Catalog UX, Navigation and Loading Strategies - Sprint 16
|
||||
|
||||
## Scope
|
||||
|
||||
Sprint 16 improves catalog UX without introducing marketplace-specific logic.
|
||||
|
||||
Areas covered:
|
||||
- empty category behavior
|
||||
- root navigation consistency
|
||||
- multiple loading strategies
|
||||
- grid selector completion
|
||||
- mobile catalog behavior
|
||||
- future slug routing preparation
|
||||
- reusable catalog states
|
||||
- centralized feature flags
|
||||
- project skills documentation
|
||||
|
||||
## Empty Category Behavior
|
||||
|
||||
Catalog now distinguishes three category outcomes:
|
||||
- subcategories exist: show category browser
|
||||
- products exist: show product list
|
||||
- neither exist: show dedicated catalog empty state
|
||||
|
||||
Empty category state belongs to catalog surface, not product grid.
|
||||
|
||||
## Root Navigation
|
||||
|
||||
`All Categories` always routes to `/catalog` and shows category browser.
|
||||
|
||||
Continue-browsing restoration no longer hijacks this root navigation path.
|
||||
|
||||
## Loading Strategies
|
||||
|
||||
Configured via `catalog.loadingStrategy`:
|
||||
- `pagination`
|
||||
- `loadMore`
|
||||
- `infiniteScroll`
|
||||
|
||||
Single product list component remains source of truth. Strategy changes only affect controls and page-windowing.
|
||||
|
||||
## Grid System
|
||||
|
||||
Supported layouts:
|
||||
- `grid-2`
|
||||
- `grid-3`
|
||||
- `grid-4`
|
||||
- `list`
|
||||
- `compact`
|
||||
|
||||
User preference persists locally. Bootstrap default still seeds first render.
|
||||
|
||||
Legacy layout aliases normalize to new modes for backward compatibility.
|
||||
|
||||
## Mobile Behavior
|
||||
|
||||
Mobile catalog uses:
|
||||
- filter drawer
|
||||
- sort popup sheet
|
||||
- grid popup sheet
|
||||
|
||||
Inline filter density is avoided.
|
||||
|
||||
## Breadcrumb and Slug Preparation
|
||||
|
||||
Current URLs remain ID-based.
|
||||
|
||||
Routing layer now tolerates future slug-like category tokens by resolving them to internal IDs without changing current public contract.
|
||||
|
||||
## Centralized Features
|
||||
|
||||
`bootstrap.features` is new central toggle surface for UI features such as:
|
||||
- wishlist
|
||||
- compare
|
||||
- reviews
|
||||
- comments
|
||||
- questions
|
||||
- recommendations
|
||||
- recentlyViewed
|
||||
- searchHistory
|
||||
- recentlySearched
|
||||
- ratings
|
||||
- share
|
||||
- brands
|
||||
- manufacturers
|
||||
- availability
|
||||
- discounts
|
||||
- badges
|
||||
|
||||
Feature resolver falls back to older config surfaces to preserve behavior.
|
||||
|
||||
## Project Skills
|
||||
|
||||
Added repo skills:
|
||||
- `.agents/skills/marketplace-architecture/SKILL.md`
|
||||
- `.agents/skills/ui-standards/SKILL.md`
|
||||
- `.agents/skills/backend-contract/SKILL.md`
|
||||
|
||||
## Future Work
|
||||
|
||||
- true backend paging for load-more/infinite strategies
|
||||
- offline-aware cached catalog data
|
||||
- explicit slug field on categories
|
||||
- admin editing surface for centralized feature toggles
|
||||
@@ -16,6 +16,7 @@
|
||||
|
||||
## Опциональные свойства
|
||||
- catalog.navigationMode
|
||||
- catalog.loadingStrategy
|
||||
- catalog.showBreadcrumbs
|
||||
- catalog.showCategoryBanner
|
||||
- catalog.showSubcategoryChips
|
||||
@@ -24,12 +25,16 @@
|
||||
- catalog.showAvailability
|
||||
- catalog.suggestionsEnabled
|
||||
- catalog.searchHistoryEnabled
|
||||
- catalog.features (via bootstrap.features)
|
||||
- catalog.facets (future backend-driven)
|
||||
|
||||
## Строгие правила
|
||||
- Каталог не содержит tenant-specific условий в frontend-коде.
|
||||
- Сортировка и фильтры должны быть согласованы между frontend и backend.
|
||||
- Видимость товаров контролируется данными backend, а не frontend-хардкодом.
|
||||
- Пустая категория рендерит отдельный catalog empty-state, а не product grid empty-state.
|
||||
- Корневой переход `All Categories` всегда возвращает category browser `/catalog`.
|
||||
- Loading strategy выбирается конфигурацией без дублирования list logic.
|
||||
|
||||
## Reusable Domain Models
|
||||
- SearchCriteria
|
||||
@@ -43,7 +48,8 @@
|
||||
```json
|
||||
{
|
||||
"catalog": {
|
||||
"layout": "grid",
|
||||
"layout": "grid-4",
|
||||
"loadingStrategy": "pagination",
|
||||
"defaultSort": "relevance",
|
||||
"availableSorts": ["relevance", "latest", "price_asc", "price_desc", "rating", "popular", "discount"],
|
||||
"enabledFilters": ["price", "availability", "rating", "brand", "category", "subcategory", "discount", "new", "color", "size", "attributes"],
|
||||
@@ -54,6 +60,23 @@
|
||||
}
|
||||
```
|
||||
|
||||
## Loading Strategies
|
||||
- `pagination`
|
||||
- `loadMore`
|
||||
- `infiniteScroll`
|
||||
|
||||
## Grid Modes
|
||||
- `grid-2`
|
||||
- `grid-3`
|
||||
- `grid-4`
|
||||
- `list`
|
||||
- `compact`
|
||||
|
||||
Legacy aliases still normalize safely:
|
||||
- `grid`
|
||||
- `large-grid`
|
||||
- `compact-grid`
|
||||
|
||||
## Ответственность Frontend
|
||||
- Отобразить листинг, фильтры, сортировки и пагинацию.
|
||||
- Синхронизировать состояние каталога с URL.
|
||||
|
||||
@@ -3,6 +3,11 @@
|
||||
- Static pages with `showInFooter: true` may be grouped into footer sections using `footerGroup`.
|
||||
- Social links remain footer-config driven and can coexist with CMS page groups.
|
||||
- Navigation stays configuration-driven; no marketplace-specific page names are hardcoded in frontend.
|
||||
|
||||
## Catalog Routing Preparation
|
||||
- Catalog root `/catalog` renders category browser.
|
||||
- Category detail keeps current ID routes while resolving future slug tokens in routing layer.
|
||||
- Breadcrumb root action must always navigate to `/catalog`, not all-products grid.
|
||||
# 11. Система навигации
|
||||
|
||||
## Назначение
|
||||
|
||||
Reference in New Issue
Block a user