Implement unified catalog search with token-based filtering
All checks were successful
Build Docker Image / build (push) Successful in 3m23s

- Add useCatalogSearch composable for managing unified search state
- Add UnifiedSearchBar component with token chips for filters
- Add CatalogHero component for empty/landing state
- Create grid components for each display mode:
  - CatalogGridProducts, CatalogGridSuppliers, CatalogGridHubs
  - CatalogGridHubsForProduct, CatalogGridProductsFromSupplier
  - CatalogGridProductsInHub, CatalogGridOffers
- Add unified catalog page at /catalog with query params
- Remove SubNavigation from catalog section (kept for other sections)
- Update all links to use new unified catalog paths
- Delete old nested catalog pages (offers/suppliers/hubs flows)
- Add i18n translations for catalog section
This commit is contained in:
Ruslan Bakiev
2026-01-22 10:57:30 +07:00
parent 01f0836173
commit 08d7e0ade9
39 changed files with 1278 additions and 2185 deletions

View File

@@ -18,9 +18,9 @@
@switch-team="switchToTeam"
/>
<!-- Sub Navigation (section-specific tabs) - hidden on home page -->
<!-- Sub Navigation (section-specific tabs) - only for non-catalog sections -->
<SubNavigation
v-if="!isHomePage"
v-if="!isHomePage && !isCatalogSection"
:section="currentSection"
/>
</div>
@@ -94,22 +94,32 @@ const isHomePage = computed(() => {
return route.path === '/' || route.path === '/en' || route.path === '/ru'
})
// Catalog section detection (unified search, no SubNav needed)
const isCatalogSection = computed(() => {
return route.path.startsWith('/catalog') ||
route.path.startsWith('/en/catalog') ||
route.path.startsWith('/ru/catalog')
})
// Show search bar only on main page
const showSearch = computed(() => isHomePage.value)
// Collapsible header logic - only for catalog pages (not home page)
const canCollapse = computed(() => !isHomePage.value)
// Collapsible header logic - only for pages with SubNav
const hasSubNav = computed(() => !isHomePage.value && !isCatalogSection.value)
const canCollapse = computed(() => hasSubNav.value)
const isHeaderCollapsed = computed(() => canCollapse.value && isCollapsed.value)
// Header style - transform for smooth slide animation (only on catalog pages)
// Header style - transform for smooth slide animation (only when SubNav present)
const headerStyle = computed(() => {
if (isHomePage.value) return {}
if (!hasSubNav.value) return {}
return { transform: `translateY(${headerOffset.value}px)` }
})
// Main content padding-top to compensate for fixed header
// 64px = MainNav only (home, catalog)
// 118px = MainNav + SubNav (orders, seller, settings)
const mainStyle = computed(() => ({
paddingTop: isHomePage.value ? '64px' : '118px'
paddingTop: (isHomePage.value || isCatalogSection.value) ? '64px' : '118px'
}))
// Provide collapsed state to child components (CatalogPage needs it for map positioning)