feat(helpers): use pretty URLs for product page

packages/composables/src/internalHelpers/defaultApiParams.json

@@ -106,7 +106,8 @@
         "cover",
         "id",
         "translated",
-        "options"
+        "options",
+        "seoUrls"
       ],
       "product_media": ["media"],
       "media": ["thumbnails", "width", "height", "url"],

packages/helpers/__tests__/product/getProductUrl.spec.ts

@@ -1,13 +1,28 @@
 import { getProductUrl } from "@shopware-pwa/helpers";
 
 describe("Shopware helpers - getProductUrl", () => {
-  it("should return product url", () => {
+  it("should return product technical URL", () => {
     const result = getProductUrl({ id: "qwerty" } as any);
     expect(result).toEqual("/detail/qwerty");
   });
 
+  it("should return default URL if seoUrls is undefined", () => {
+    const result = getProductUrl({ id: "qwerty", seoUrls: undefined } as any);
+    expect(result).toEqual("/detail/qwerty");
+  });
+
   it("should return default url for no product", () => {
     const result = getProductUrl(undefined as any);
     expect(result).toEqual("/");
   });
+  it("should return seo URL if available", () => {
+    const result = getProductUrl({
+      seoUrls: [
+        {
+          seoPathInfo: "pretty-url/012345",
+        },
+      ],
+    } as any);
+    expect(result).toEqual("/pretty-url/012345");
+  });
 });

packages/helpers/src/product/getProductThumbnailUrl.ts

@@ -1,5 +1,4 @@
 import { Product } from "@shopware-pwa/commons/interfaces/models/content/product/Product";
-
 /**
  * get the thumbnail image URL with the smallest width
  *

packages/helpers/src/product/getProductUrl.ts

@@ -6,10 +6,6 @@ import { Product } from "@shopware-pwa/commons/interfaces/models/content/product
 export function getProductUrl(product: Product | null): string {
   if (!product) return "/";
   // TODO change after fixing URL resolver
-  // const seoUrl =
-  //   product.seoUrls &&
-  //   product.seoUrls.length &&
-  //   product.seoUrls[0].seoPathInfo;
-  // return seoUrl ? `/${seoUrl}` : `/detail/${product.id}`;
-  return `/detail/${product.id}`;
+  const seoUrl = product.seoUrls?.[0]?.seoPathInfo;
+  return seoUrl ? `/${seoUrl}` : `/detail/${product.id}`;
 }

packages/shopware-6-client/__tests__/services/PageService/getPage.spec.ts

@@ -20,10 +20,14 @@ describe("PageService - getPage", () => {
     });
     const result = await getPage("Sports/Grocery-Garden");
     expect(mockedPost).toBeCalledTimes(1);
-    expect(mockedPost).toBeCalledWith("/store-api/v3/pwa/page", {
-      path: "Sports/Grocery-Garden",
-      limit: 10,
-    });
+    expect(mockedPost).toBeCalledWith(
+      "/store-api/v3/pwa/page",
+      {
+        path: "Sports/Grocery-Garden",
+        limit: 10,
+      },
+      { headers: { "sw-include-seo-urls": true } }
+    );
     expect(result).toHaveProperty("cmsPage");
     expect(result.cmsPage.id).toEqual("b218f861361042f3a58a2a9d1b3575b5");
   });

packages/shopware-6-client/__tests__/services/ProductService/getListingProducts.spec.ts

@@ -21,11 +21,10 @@ describe("ProductService - getCategoryProductsListing", () => {
     const categoryId = "044a190a54ab4f06803909c3ee8063ef";
     const result = await getCategoryProductsListing(categoryId);
     expect(mockedPost).toBeCalledTimes(1);
-    expect(
-      mockedPost
-    ).toBeCalledWith(
+    expect(mockedPost).toBeCalledWith(
       "/store-api/v4/product-listing/044a190a54ab4f06803909c3ee8063ef",
-      { limit: 10 }
+      { limit: 10 },
+      { headers: { "sw-include-seo-urls": true } }
     );
     expect(result).toHaveProperty("elements");
   });
@@ -38,12 +37,12 @@ describe("ProductService - getCategoryProductsListing", () => {
       sort: { field: "name" },
     });
     expect(mockedPost).toBeCalledTimes(1);
-    expect(
-      mockedPost
-    ).toBeCalledWith(
+    expect(mockedPost).toBeCalledWith(
       "/store-api/v4/product-listing/044a190a54ab4f06803909c3ee8063ef",
-      { order: "name-asc", limit: 10 }
+      { order: "name-asc", limit: 10 },
+      { headers: { "sw-include-seo-urls": true } }
     );
+
     expect(result).toHaveProperty("elements");
   });
 });

packages/shopware-6-client/src/services/pageService.ts

@@ -48,13 +48,21 @@ export async function getPage(
   searchCriteria?: SearchCriteria,
   contextInstance: ShopwareApiInstance = defaultInstance
 ): Promise<PageResolverResult<CmsPage>> {
-  const resp = await contextInstance.invoke.post(getPageResolverEndpoint(), {
-    path: path,
-    ...convertSearchCriteria({
-      searchCriteria,
-      config: contextInstance.config,
-    }),
-  });
+  const resp = await contextInstance.invoke.post(
+    getPageResolverEndpoint(),
+    {
+      path: path,
+      ...convertSearchCriteria({
+        searchCriteria,
+        config: contextInstance.config,
+      }),
+    },
+    {
+      headers: {
+        "sw-include-seo-urls": true,
+      },
+    }
+  );
 
   return resp.data;
 }

packages/shopware-6-client/src/services/productService.ts

@@ -69,7 +69,12 @@ export const getCategoryProductsListing = async function (
       searchCriteria,
       apiType: ApiType.store,
       config: contextInstance.config,
-    })
+    }),
+    {
+      headers: {
+        "sw-include-seo-urls": true,
+      },
+    }
   );
   return resp.data;
 };