shopware · mdanilowicz · Oct 17, 2024 · Oct 17, 2024 · Oct 17, 2024 · Oct 22, 2024
diff --git a/.changeset/funny-hotels-watch.md b/.changeset/funny-hotels-watch.md
@@ -0,0 +1,8 @@
+---
+"@shopware-pwa/composables-next": minor
+---
+
+Added `getCategoryBreadcrumbs` method for fetching backend breadcrumbs in `useBreadcrumbs` composable
+Added `buildDynamicBreadcrumbs` method for building breadcrumbs structure
+Added `pushBreadcrumb` method to push single breadcrumb at the top of the breadcrumbs list
+Added `associations` option to the `search` method in `useProductSearch` composable
diff --git a/.changeset/grumpy-news-visit.md b/.changeset/grumpy-news-visit.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/helpers-next": minor
+---
+
+Added `getCmsBreadcrumbs` helper for building CMS breadcrumbs
diff --git a/.changeset/rude-students-hunt.md b/.changeset/rude-students-hunt.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Added dynamic breadcrumbs
diff --git a/apps/docs/src/getting-started/page-elements/breadcrumbs.md b/apps/docs/src/getting-started/page-elements/breadcrumbs.md
@@ -18,12 +18,13 @@ nav:
 In this chapter you will learn how to
 
 - Build breadcrumbs for static page
-- How breadcrumbs are built for CMS pages
+- Build dynamic breadcrumbs for category/product page
 
 ### Quick reference
 
 - [useBreadcrumbs](/packages/composables.html#usebreadcrumbs) is a composable used for a breadcrumbs management with sharable state
 - [getCategoryBreadcrumbs](/packages/helpers.html#getcategorybreadcrumbs) is a helper used for converting `Category` to the `Breadcrumb` object
+- [getCmsBreadcrumbs](/packages/helpers.html#getcmsbreadcrumbs) is a helper used for building breadcrumbs for `Landing Pages`
 
 ## Building breadcrumbs for a static page
 
@@ -36,12 +37,16 @@ useBreadcrumbs([
 ]);
 ```
 
-## Building breadcrumbs for CMS pages
+## Building breadcrumbs for a category/product page
 
-:::warning
-Currently Shopware 6 API returns breadcrumbs without links.
-It means that breadcrumbs for a product and category page, are just a plain text.
-:::
+```ts
+// props.navigationId is a page id
+
+const { buildDynamicBreadcrumbs } = useBreadcrumbs();
+buildDynamicBreadcrumbs(props.navigationId);
+```
+
+## Building breadcrumbs for CMS pages - without additional request
 
 Each CMS page contains the `Category` with `breadcrumb` array, which contains a list of names, like:
 

diff --git a/examples/api-client-tutorial/.vscode/extensions.json b/examples/api-client-tutorial/.vscode/extensions.json
@@ -1,4 +1,8 @@
 {
-  "recommendations": ["astro-build.astro-vscode", "StackBlitz.tutorialkit", "unifiedjs.vscode-mdx"],
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "StackBlitz.tutorialkit",
+    "unifiedjs.vscode-mdx"
+  ],
   "unwantedRecommendations": []
 }
diff --git a/...t-tutorial/src/content/tutorial/2-implementation/1-basics/2-instance/_solution/index.html b/...t-tutorial/src/content/tutorial/2-implementation/1-basics/2-instance/_solution/index.html
@@ -9,7 +9,9 @@
   <body>
     <div class="center">
       <h1 class="center">Live example</h1>
-      <pre id="result"><button id="loadContext">Load context via API Client</button></pre>
+      <pre
+        id="result"
+      ><button id="loadContext">Load context via API Client</button></pre>
     </div>
     <script type="module" src="/main.ts"></script>
   </body>

diff --git a/...nt-tutorial/src/content/tutorial/2-implementation/1-basics/3-example/_solution/index.html b/...nt-tutorial/src/content/tutorial/2-implementation/1-basics/3-example/_solution/index.html
@@ -9,7 +9,9 @@
   <body>
     <div class="center">
       <h1 class="center">Live example</h1>
-      <pre id="result"><button id="loadContext">Click to load context via API Client</button></pre>
+      <pre
+        id="result"
+      ><button id="loadContext">Click to load context via API Client</button></pre>
     </div>
     <script type="module" src="/main.ts"></script>
   </body>

diff --git a/...utorial/src/content/tutorial/2-implementation/2-sync/2-configuration/_solution/index.html b/...utorial/src/content/tutorial/2-implementation/2-sync/2-configuration/_solution/index.html
@@ -9,7 +9,9 @@
   <body>
     <div class="center">
       <h1 class="center">Live example</h1>
-      <pre id="result"><button id="loadContext">Load context via API Client</button></pre>
+      <pre
+        id="result"
+      ><button id="loadContext">Load context via API Client</button></pre>
     </div>
     <script type="module" src="/main.ts"></script>
   </body>

diff --git a/...al/2-implementation/3-customize/3-partial-overriding/_files/api-types/storeApiSchema.json b/...al/2-implementation/3-customize/3-partial-overriding/_files/api-types/storeApiSchema.json
@@ -21009,4 +21009,4 @@
       }
     }
   ]
-}
+}
diff --git a/...2-implementation/3-customize/3-partial-overriding/_solution/api-types/storeApiSchema.json b/...2-implementation/3-customize/3-partial-overriding/_solution/api-types/storeApiSchema.json
@@ -21009,4 +21009,4 @@
       }
     }
   ]
-}
+}
diff --git a/examples/api-client-tutorial/tsconfig.json b/examples/api-client-tutorial/tsconfig.json
@@ -7,12 +7,8 @@
     "baseUrl": "./",
     "jsxImportSource": "solid-js",
     "paths": {
-      "@*": [
-        "src/*"
-      ]
-    },
+      "@*": ["src/*"]
+    }
   },
-  "exclude": [
-    "dist"
-  ]
-}
+  "exclude": ["dist"]
+}
diff --git a/packages/composables/src/useBreadcrumbs/useBreadcrumbs.test.ts b/packages/composables/src/useBreadcrumbs/useBreadcrumbs.test.ts
@@ -1,8 +1,15 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, beforeEach, vi } from "vitest";
 import { useBreadcrumbs } from "./useBreadcrumbs";
 import { useSetup } from "../_test";
+import type { operations } from "#shopware";
 
 describe("useBreadcrumbs", () => {
+  const consoleErrorSpy = vi.spyOn(console, "error");
+
+  beforeEach(() => {
+    consoleErrorSpy.mockImplementation(() => {});
+  });
+
   it("should add breadcrumbs", async () => {
     const { vm } = useSetup(() =>
       useBreadcrumbs([
@@ -29,4 +36,58 @@ describe("useBreadcrumbs", () => {
     vm.clearBreadcrumbs();
     expect(vm.breadcrumbs.length).toBe(0);
   });
+
+  it("should invoke getCategoryBreadcrumbs", async () => {
+    const { vm, injections } = useSetup(() =>
+      useBreadcrumbs([
+        {
+          name: "Test",
+          path: "/",
+        },
+      ]),
+    );
+    injections.apiClient.invoke.mockResolvedValue({ data: {} });
+    vm.getCategoryBreadcrumbs("123");
+
+    expect(injections.apiClient.invoke).toHaveBeenCalledWith(
+      expect.stringContaining("readBreadcrumb"),
+      expect.objectContaining({
+        pathParams: {
+          id: "123",
+        },
+      }),
+    );
+  });
+
+  it("should invoke buildDynamicBreadcrumbs", async () => {
+    const { vm, injections } = useSetup(() => useBreadcrumbs());
+    injections.apiClient.invoke.mockResolvedValue({
+      data: {
+        breadcrumbs: [
+          {
+            path: "test",
+          },
+        ],
+      },
+    });
+    await vm.buildDynamicBreadcrumbs({
+      breadcrumbs: [{ path: "test" }],
+    } as unknown as operations["readBreadcrumb get /breadcrumb/{id}"]["response"]);
+
+    expect(vm.breadcrumbs[0].path).toBe("/test");
+  });
+
+  it("should push breadcrumb", async () => {
+    const { vm } = useSetup(() => useBreadcrumbs());
+    vm.pushBreadcrumb({
+      name: "Test",
+      path: "/",
+    });
+    expect(vm.breadcrumbs.length).toBe(1);
+    vm.pushBreadcrumb({
+      name: "Test",
+      path: "/",
+    });
+    expect(vm.breadcrumbs.length).toBe(2);
+  });
 });
diff --git a/packages/composables/src/useBreadcrumbs/useBreadcrumbs.ts b/packages/composables/src/useBreadcrumbs/useBreadcrumbs.ts
@@ -1,14 +1,17 @@
 import { computed } from "vue";
 import type { ComputedRef } from "vue";
-import { useContext } from "#imports";
+import { useContext, useShopwareContext } from "#imports";
+import type { operations, Schemas } from "#shopware";
 
 /**
  * @internal
  */
-export type Breadcrumb = {
-  name: string;
-  path?: string;
-};
+export type Breadcrumb =
+  | {
+      name: string;
+      path?: string;
+    }
+  | Schemas["Breadcrumb"];
 
 /**
  * @public
@@ -22,20 +25,43 @@ export type UseBreadcrumbsReturn = {
    * List of breadcrumbs
    */
   breadcrumbs: ComputedRef<Breadcrumb[]>;
+  /**
+   * Get category breadcrumbs from the API
+   *
+   * @param {string} categoryId
+   * @returns
+   */
+  getCategoryBreadcrumbs: (
+    categoryId: string,
+  ) => Promise<operations["readBreadcrumb get /breadcrumb/{id}"]["response"]>;
+  /**
+   * Build breadcrumbs dynamically for a category by fetching them from the API
+   *
+   * @param {operations["readBreadcrumb get /breadcrumb/{id}"]["response"]} breadcrumbs
+   */
+  buildDynamicBreadcrumbs(
+    breadcrumbs: operations["readBreadcrumb get /breadcrumb/{id}"]["response"],
+  ): Promise<void>;
+  /**
+   * Add a breadcrumb to the breadcrumbs list
+   *
+   * @param {Breadcrumb} breadcrumb
+   */
+  pushBreadcrumb(breadcrumb: Breadcrumb): void;
 };
 
 /**
  * Composable for breadcrumbs management.
- * Read the [guide](https://frontends.shopware.com//getting-started/page-elements/breadcrumbs.html#building-breadcrumbs-for-cms-pages).
- *
- * It's recommended to use [getCategoryBreadcrumbs](https://frontends.shopware.com/packages/helpers.html#getcategorybreadcrumbs) for category breadcrumbs.
+ * Read the [guide](https://frontends.shopware.com/getting-started/page-elements/breadcrumbs.html#building-breadcrumbs-for-cms-pages).
  *
  * @public
  * @category CMS (Shopping Experiences)
  */
 export function useBreadcrumbs(
   newBreadcrumbs?: Breadcrumb[],
 ): UseBreadcrumbsReturn {
+  const { apiClient } = useShopwareContext();
+
   // Store for breadcrumbs
   const _breadcrumbs = useContext<Breadcrumb[]>("swBreadcrumb", {
     replace: newBreadcrumbs,
@@ -48,8 +74,40 @@ export function useBreadcrumbs(
     _breadcrumbs.value = [];
   };
 
+  const getCategoryBreadcrumbs = async (categoryId: string) => {
+    const response = await apiClient.invoke(
+      "readBreadcrumb get /breadcrumb/{id}",
+      {
+        pathParams: {
+          id: categoryId,
+        },
+      },
+    );
+    return response.data;
+  };
+
+  const pushBreadcrumb = (breadcrumb: Breadcrumb) => {
+    if (_breadcrumbs.value) _breadcrumbs.value.push(breadcrumb);
+    else _breadcrumbs.value = [breadcrumb];
+  };
+
+  const buildDynamicBreadcrumbs = async (
+    breadcrumbs: operations["readBreadcrumb get /breadcrumb/{id}"]["response"],
+  ) => {
+    _breadcrumbs.value = breadcrumbs.breadcrumbs.map((breadcrumb) => {
+      // Adjust path to be compatible with the router
+      return {
+        ...breadcrumb,
+        path: `/${breadcrumb.path}`,
+      };
+    });
+  };
+
   return {
     clearBreadcrumbs,
     breadcrumbs: computed(() => _breadcrumbs.value),
+    getCategoryBreadcrumbs,
+    buildDynamicBreadcrumbs,
+    pushBreadcrumb,
   };
 }
diff --git a/packages/composables/src/useProductSearch/useProductSearch.ts b/packages/composables/src/useProductSearch/useProductSearch.ts
@@ -6,6 +6,7 @@ import { defu } from "defu";
 type UseProductSearchReturnOptions = {
   withCmsAssociations?: boolean;
   criteria?: Partial<Schemas["Criteria"]>;
+  associations?: Partial<Schemas["Association"]>;
 };
 
 export type UseProductSearchReturn = {
@@ -36,6 +37,7 @@ export function useProductSearch(): UseProductSearchReturn {
     const associations = defu(
       options?.withCmsAssociations ? cmsAssociations : {},
       options?.criteria,
+      { associations: options?.associations ?? {} },
     );
     const result = await apiClient.invoke(
       "readProductDetail post /product/{productId}",

diff --git a/packages/helpers/src/cms/getCmsBreadcrumbs.test.ts b/packages/helpers/src/cms/getCmsBreadcrumbs.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { getCmsBreadcrumbs } from "./getCmsBreadcrumbs";
+
+describe("getCmsBreadcrumbs", () => {
+  it("should return translated name", () => {
+    expect(
+      getCmsBreadcrumbs({
+        translated: {
+          name: "translated name",
+        },
+      }),
+    ).toEqual([{ name: "translated name" }]);
+  });
+});
diff --git a/packages/helpers/src/cms/getCmsBreadcrumbs.ts b/packages/helpers/src/cms/getCmsBreadcrumbs.ts
@@ -0,0 +1,19 @@
+/**
+ * Build the breadcrumbs for the CMS page
+ *
+ * @param page
+ * @returns
+ */
+export function getCmsBreadcrumbs<
+  T extends {
+    translated: {
+      name: string;
+    };
+  },
+>(page: T): { name: string }[] {
+  return [
+    {
+      name: page.translated.name,
+    },
+  ];
+}
diff --git a/packages/helpers/src/cms/index.ts b/packages/helpers/src/cms/index.ts
@@ -26,6 +26,7 @@ export * from "./buildUrlPrefix";
 export * from "./layoutClasses";
 export * from "./isMaintenanceMode";
 export * from "./getCmsTranslate";
+export * from "./getCmsBreadcrumbs";
 
 /**
  * Returns the main page object depending of the type of the CMS page.

diff --git a/packages/helpers/src/index.test.ts b/packages/helpers/src/index.test.ts
@@ -14,6 +14,7 @@ describe("helpers - test global API", () => {
         "getCategoryImageUrl": [Function],
         "getCategoryRoute": [Function],
         "getCategoryUrl": [Function],
+        "getCmsBreadcrumbs": [Function],
         "getCmsEntityObject": [Function],
         "getCmsLayoutConfiguration": [Function],
         "getCmsTranslate": [Function],