schon/storefront/composables/breadcrumbs/useBreadcrumbs.ts

import { useCategoryStore } from '~/stores/category'
import type {ICategory, IProduct} from "~/types";

interface Crumb {
  text: string
  link?: string
}

function findCategoryPath(
  nodes: ICategory[],
  targetSlug: string,
  path: ICategory[] = []
): ICategory[] | null {
  for (const node of nodes) {
    const newPath = [...path, node]
    if (node.slug === targetSlug) {
      return newPath
    }
    if (node.children?.length) {
      const found = findCategoryPath(node.children, targetSlug, newPath)
      if (found) {
        return found
      }
    }
  }
  return null
}

export function useBreadcrumbs() {
  const { t } = useI18n()
  const route = useRoute()
  const pageTitle = useState<string>('pageTitle')
  const categoryStore = useCategoryStore()
  const product = useState<IProduct | null>('currentProduct')

  const breadcrumbs = computed<Crumb[]>(() => {
    const crumbs: Crumb[] = [
      { text: t('breadcrumbs.home'), link: '/' }
    ]

    if (route.path.includes('/catalog') || route.path.includes('/product')) {
      crumbs.push({ text: t('breadcrumbs.catalog'), link: '/catalog' })

      let categorySlug: string | undefined
      if (route.path.includes('/catalog')) {
        categorySlug = route.params.slug as string
      } else if (route.path.includes('/product')) {
        categorySlug = product.value?.category?.slug
      }

      if (categorySlug) {
        const roots = categoryStore.categories.map(e => e.node)
        const path = findCategoryPath(roots, categorySlug)
        path?.forEach(node => {
          crumbs.push({
            text: node.name,
            link: `/catalog/${node.slug}`
          })
        })
      }

      if (route.path.includes('/product') && product.value) {
        crumbs.push({ text: product.value.name })
      }
    }
    else {
      crumbs.push({
        text: pageTitle.value || t(`breadcrumbs.${String(route.name)}`)
      })
    }

    return crumbs
  })

  return { breadcrumbs }
}