feat(vue-demo): add dynamic breadcrumbs #1369
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
@shopware/api-client
@shopware-pwa/composables-next
@shopware/api-gen
@shopware-pwa/cms-base
@shopware-pwa/helpers-next
@shopware-pwa/nuxt3-module
commit: |
|
@kstala could you test this please 🙌 |
|
|
||
| useBreadcrumbs(breadcrumbs); | ||
| const { buildDynamicBreadcrumbs } = useBreadcrumbs(); | ||
| buildDynamicBreadcrumbs(props.navigationId); |
There was a problem hiding this comment.
it's happening asynchronously, so I have two questions:
- how are you assuring it's loaded on Server Side Render?
- isn't there a blink on client side? What about showing previous breadcrumbs and replace them when new ones are loaded? Does it make sense?
| @@ -48,8 +66,38 @@ export function useBreadcrumbs( | |||
| _breadcrumbs.value = []; | |||
| }; | |||
|
|
|||
| const getCategoryBreadcrumbs = async (categoryId: string) => { | |||
| const response = await apiClient.invoke( | |||
| "readBreadcrumb get /breadcrumb/{id}", | |||
There was a problem hiding this comment.
this endpoint is not only to load category breadcrumbs, I'm not sure about exposing it here, what is the designed flow here looks like?
There was a problem hiding this comment.
This endpoint is only for the category breadcrumbs. For the product entity we will also receive, category breadcrumbs
There was a problem hiding this comment.
the endpoint is for both and takes more parameters
I just find getCategoryBreadcrumbs misleading as I would search for other types of breadcrumbs
There was a problem hiding this comment.
My point is - I would not keep this endpoint in the composable, it does not interfere with the logic and everyone can just use apiClient method for that and pass the data through buildDynamicBreadcrumbs
| return response.data; | ||
| }; | ||
|
|
||
| const buildDynamicBreadcrumbs = async (categoryId: string) => { |
There was a problem hiding this comment.
what about product breadcrumbs?
There was a problem hiding this comment.
it is the same method, for product we are also getting category breadcrumbs
| } catch (error) { | ||
| console.error("Error while fetching breadcrumbs", error); | ||
| } |
There was a problem hiding this comment.
we should not handle errors in composable, it should be thrown to invoking component to handle in the project - analytics/notifications etc. however they need to handle it
| * @param page | ||
| * @returns | ||
| */ | ||
| export function getCmsBreadcrumbs< |
There was a problem hiding this comment.
not sure about this helper - it's not creating breadcrumbs, just displaying entity translated property, when would that be useful for the users?
There was a problem hiding this comment.
We are using it to build CMS page breadcrumbs, where we always have 1 level of breadcrumbs
| @@ -48,8 +66,38 @@ export function useBreadcrumbs( | |||
| _breadcrumbs.value = []; | |||
| }; | |||
|
|
|||
| const getCategoryBreadcrumbs = async (categoryId: string) => { | |||
| const response = await apiClient.invoke( | |||
| "readBreadcrumb get /breadcrumb/{id}", | |||
There was a problem hiding this comment.
the endpoint is for both and takes more parameters
I just find getCategoryBreadcrumbs misleading as I would search for other types of breadcrumbs
| @@ -48,8 +66,38 @@ export function useBreadcrumbs( | |||
| _breadcrumbs.value = []; | |||
| }; | |||
|
|
|||
| const getCategoryBreadcrumbs = async (categoryId: string) => { | |||
| const response = await apiClient.invoke( | |||
| "readBreadcrumb get /breadcrumb/{id}", | |||
There was a problem hiding this comment.
My point is - I would not keep this endpoint in the composable, it does not interfere with the logic and everyone can just use apiClient method for that and pass the data through buildDynamicBreadcrumbs
Description
This pull request adds a new request to fetch category breadcrumbs. The request is included on the category and product pages, while all other static pages build breadcrumbs with "local" data.
Added
getCategoryBreadcrumbsmethod for fetching backend breadcrumbs inuseBreadcrumbscomposableAdded
buildDynamicBreadcrumbsmethod for building breadcrumbs structureAdded
pushBreadcrumbmethod to push single breadcrumb at the top of the breadcrumbs listAdded
associationsoption to thesearchmethod inuseProductSearchcomposablecloses #139
Type of change
ToDo's
Screenshots (if applicable)
Additional context