@faststore/core 3.0.60 → 3.0.61

package/.turbo/turbo-build.log

@@ -1,7 +1,7 @@
 $ yarn partytown & yarn generate && next build
 $ partytown copylib ./public/~partytown
-Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
 $ faststore generate-graphql -c
+Partytown lib copied to: /home/runner/work/faststore/faststore/packages/core/public/~partytown
 success - GraphQL schema, types, and optimizations successfully generated 🎉
 ⚠ No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
 Attention: Next.js now collects completely anonymous telemetry regarding usage.
@@ -38,7 +38,7 @@ Route (app)                                Size     First Load JS
   ├ chunks/472-369461a1f39981d5.js         28.4 kB
   ├ chunks/fd9d1056-43c43818840d7811.js    51.1 kB
   ├ chunks/main-app-e13fa67c2c3ceca5.js    230 B
-  └ chunks/webpack-a45dc84c9a0ef3fd.js     2.43 kB
+  └ chunks/webpack-4f403c9b52a287c6.js     2.43 kB
 
 Route (pages)                              Size     First Load JS
 ┌ ● /                                      1.04 kB         148 kB
@@ -62,7 +62,7 @@ Route (pages)                              Size     First Load JS
   ├ chunks/framework-21e9365486ba23a6.js   45.4 kB
   ├ chunks/main-9c9c62c368c0a47e.js        34.8 kB
   ├ chunks/pages/_app-1930798899758fda.js  11.2 kB
-  ├ chunks/webpack-a45dc84c9a0ef3fd.js     2.43 kB
+  ├ chunks/webpack-4f403c9b52a287c6.js     2.43 kB
   └ css/5d1f64b61ea581f4.css               3.05 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

package/.turbo/turbo-test.log

@@ -1,10 +1,10 @@
 $ jest
-PASS test/utils/multipleTemplates.test.ts (32.235 s)
-PASS test/server/cms/index.test.ts (32.591 s)
-PASS test/server/index.test.ts (34.429 s)
+PASS test/server/cms/index.test.ts (31.47 s)
+PASS test/utils/multipleTemplates.test.ts (31.586 s)
+PASS test/server/index.test.ts (32.977 s)
 
 Test Suites: 3 passed, 3 total
-Tests:       16 passed, 16 total
+Tests:       19 passed, 19 total
 Snapshots:   0 total
-Time:        35.349 s
+Time:        34.047 s
 Ran all test suites.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.60",
+  "version": "3.0.61",
   "license": "MIT",
   "repository": "vtex/faststore",
   "browserslist": "supports es6-module and not dead",
@@ -125,5 +125,5 @@
     "node": "18.19.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "19bd97e7ce1d842d390dbdd1e7e1859c1624b5fb"
+  "gitHead": "9ce5509d24e1a1f6eca08c77544b94db7ef4037b"
 }

package/src/pages/[slug]/p.tsx

@@ -231,7 +231,7 @@ export const getStaticProps: GetStaticProps<
     throw errors[0]
   }
 
-  const cmsPage: PDPContentType = await getPDP(slug, data.product, previewData)
+  const cmsPage: PDPContentType = await getPDP(data.product, previewData)
 
   const { seo } = data.product
   const title = seo.title || storeConfig.seo.title

package/src/server/cms/pdp.ts

@@ -21,7 +21,6 @@ type PDPfromCmsEnvData = {
 export type PDPContentType = ContentData & PDPSettings
 
 export const getPDP = async (
-  slug: string,
   product: ServerProductQueryQuery['product'],
   previewData: Locator
 ) => {
@@ -29,25 +28,19 @@ export const getPDP = async (
     const cmsData = JSON.parse(config.cms.data)
     const allPDPsFromCmsEnvData: PDPfromCmsEnvData[] = cmsData['pdp']
 
-    return await getPDPFromCmsEnvData(
-      `/${slug}/p`,
-      product,
-      allPDPsFromCmsEnvData,
-      {
-        ...(previewData?.contentType === 'pdp' ? previewData : null),
-        contentType: 'pdp',
-      }
-    )
+    return await getPDPFromCmsEnvData(product, allPDPsFromCmsEnvData, {
+      ...(previewData?.contentType === 'pdp' ? previewData : null),
+      contentType: 'pdp',
+    })
   }
 
-  return (await getPDPFromCms(`/${slug}/p`, product, {
+  return (await getPDPFromCms(product, {
     ...(previewData?.contentType === 'pdp' ? previewData : null),
     contentType: 'pdp',
   })) as PDPContentType
 }
 
 const getPDPFromCmsEnvData = async (
-  slug: string,
   product: ServerProductQueryQuery['product'],
   allPDPsFromCMSData: PDPfromCmsEnvData[],
   options: Options
@@ -58,7 +51,7 @@ const getPDPFromCmsEnvData = async (
     throw new MissingContentError(options)
   }
 
-  const template = findBestPDPTemplate(pages, slug, product)
+  const template = findBestPDPTemplate(pages, product)
 
   return getPage<PDPContentType>({
     contentType: 'pdp',
@@ -68,7 +61,6 @@ const getPDPFromCmsEnvData = async (
 }
 
 const getPDPFromCms = async (
-  slug: string,
   product: ServerProductQueryQuery['product'],
   options: Options
 ): Promise<Partial<PDPContentType>> => {
@@ -78,5 +70,5 @@ const getPDPFromCms = async (
     throw new MissingContentError(options)
   }
 
-  return findBestPDPTemplate(pages, slug, product)
+  return findBestPDPTemplate(pages, product)
 }

package/src/utils/multipleTemplates.ts

@@ -135,40 +135,53 @@ export function normalizePDPTemplate(templateValue: string) {
   return formattedValue.toLowerCase()
 }
 
+// Returns an array of slugs without the number at the end ("-{number}/p") at each interaction if it matches, otherwise returns the slug as is.
+const getSlugsWithoutSkuIdFromPDP = (slug: string) => {
+  const slugs = []
+  let currentSlug = slug
+  let match = currentSlug.match(/-\d+\/p$/)
+
+  while (match) {
+    const newSlug = currentSlug.replace(/-\d+\/p$/, '/p')
+    slugs.push(newSlug)
+    currentSlug = newSlug
+    match = currentSlug.match(/-\d+\/p$/)
+  }
+
+  return slugs
+}
+
 /**
  * Find the best PDP template from the CMS based on the slug or in the product category tree.
  * Prioritizing the following order:
  *
- * 1. A PDP template that matches the page slug (e.g. slug = /apple-magic-mouse/p).
- * 2. A PDP template that matches the product subcategory (e.g. /department/category/subcategory).
- * 3. A PDP template that matches the product category (e.g. /department/category).
- * 4. A PDP template that matches the product department (e.g. /department).
- * 5. If no matches are found, use the generic PDP template.
+ * 1. A PDP template that matches the page slug with skuId (e.g. slug = /apple-magic-mouse-12345/p).
+ * 2. A PDP template that matches the page slug (e.g. slug = /apple-magic-mouse/p).
+ * 3. A PDP template that matches the product subcategory (e.g. /department/category/subcategory).
+ * 4. A PDP template that matches the product category (e.g. /department/category).
+ * 5. A PDP template that matches the product department (e.g. /department).
+ * 6. If no matches are found, use the generic PDP template.
  *
  * @param pages
- * @param originalSlug
  * @param product
- * @returns The best PDP template page for the slug
+ * @returns The best PDP template page for the product
  */
 export function findBestPDPTemplate(
   pages: Partial<PDPContentType>[],
-  slug: string,
   product: ServerProductQueryQuery['product']
 ) {
-  // productSlugAndCategoryTree with the prioritized order. [slug, subcategory tree, category tree, department]
-  const productSlugAndCategoryTree = product?.breadcrumbList?.itemListElement
-    ? [...product?.breadcrumbList?.itemListElement]
-        .reverse()
-        .map(({ item }) => item)
-    : []
-  productSlugAndCategoryTree.unshift(slug)
-
-  for (const item of productSlugAndCategoryTree) {
+  const templateValues = getPDPTemplateValues({
+    itemListElement: product.breadcrumbList.itemListElement ?? [],
+  })
+
+  for (const template of templateValues) {
     for (const page of pages) {
       if (!page.settings?.template?.value) continue
 
-      const templateValue = normalizePDPTemplate(page.settings.template.value)
-      if (templateValue === item) {
+      const templateValueFromCms = normalizePDPTemplate(
+        page.settings.template.value
+      )
+      if (templateValueFromCms === template) {
         return page
       }
     }
@@ -176,3 +189,28 @@ export function findBestPDPTemplate(
 
   return pages.find((page) => !page.settings?.template?.value) || pages[0]
 }
+
+export function getPDPTemplateValues({
+  itemListElement = [],
+}: {
+  itemListElement: ServerProductQueryQuery['product']['breadcrumbList']['itemListElement']
+}) {
+  // productSlugAndCategoryTree with the prioritized order. [link-skuId/p, subcategory tree, category tree, department]
+  const productSlugAndCategoryTree = [...itemListElement]
+    .reverse()
+    .map(({ item }) => item)
+
+  // PDP slug comes from FastStore API with the format `${link}-${skuId}/p`, the most specific for multiple page templates,
+  // so it should be the first element
+  const slugWithSkuId = productSlugAndCategoryTree[0]
+
+  // PDP slug without skuId `${link}/p`, should be the second element
+  const slugsWithoutSkuId = getSlugsWithoutSkuIdFromPDP(slugWithSkuId)
+
+  // removes duplicated and undefined
+  return [
+    slugWithSkuId,
+    ...slugsWithoutSkuId,
+    ...productSlugAndCategoryTree.slice(1),
+  ].filter((item, index, arr) => item && arr.indexOf(item) === index)
+}

package/test/utils/multipleTemplates.test.ts

@@ -1,8 +1,27 @@
 import type { Rewrite, RewritesConfig } from '../../src/utils/multipleTemplates'
-import { hasRewritesConfigForSlug } from '../../src/utils/multipleTemplates'
+import {
+  getPDPTemplateValues,
+  hasRewritesConfigForSlug,
+} from '../../src/utils/multipleTemplates'
+
+const productItemListElementMock = [
+  { item: '/department/', name: 'test', position: 1 }, // Department
+  { item: '/department/category/', name: 'test', position: 1 }, // Category tree
+  { item: '/department/category/subcategory/', name: 'test', position: 1 }, // Subcategory tree
+  {
+    item: '/department/category/subcategory/subcategory2/',
+    name: 'test',
+    position: 1,
+  }, // Subcategory tree tree
+  {
+    item: '/department/category/subcategory/subcategory2/subcategory3/',
+    name: 'test',
+    position: 1,
+  }, // Subcategory tree
+]
 
 describe('Multiple page templates', () => {
-  describe('hasRewritesConfigForSlug', () => {
+  describe('PLP hasRewritesConfigForSlug', () => {
     it('should return true when rewrites is an array of objects containing the desired destination and source', () => {
       const rewritesArr: Rewrite[] = [
         { source: '/test/my-office', destination: '/office' },
@@ -63,4 +82,63 @@ describe('Multiple page templates', () => {
       expect(result).toBe(false)
     })
   })
+
+  describe('PDP getPDPTemplateValues', () => {
+    it('should return correct template values when productItemListElement first item has skuId and numbers', () => {
+      const mock = [
+        ...productItemListElementMock,
+        { item: '/slug-product-test-111111-2222/p', name: 'test', position: 1 },
+      ] // PDP slug with skuId and number
+      const result = getPDPTemplateValues({
+        itemListElement: mock,
+      })
+      expect(result).toEqual([
+        '/slug-product-test-111111-2222/p', // PDP slug with skuId
+        '/slug-product-test-111111/p', // PDP slug without skuId
+        '/slug-product-test/p', // PDP slug without number
+        '/department/category/subcategory/subcategory2/subcategory3/', // Subcategory tree
+        '/department/category/subcategory/subcategory2/', //  Subcategory tree
+        '/department/category/subcategory/', // Subcategory
+        '/department/category/', // Category
+        '/department/', // Department
+      ])
+    })
+
+    it('should return correct template values when productItemListElement first item have skuId', () => {
+      const mock = [
+        ...productItemListElementMock,
+        { item: '/slug-product-test-111111/p', name: 'test', position: 1 },
+      ] // PDP slug with skuId
+      const result = getPDPTemplateValues({
+        itemListElement: mock,
+      })
+      expect(result).toEqual([
+        '/slug-product-test-111111/p', // PDP slug with skuId
+        '/slug-product-test/p', // PDP slug without number
+        '/department/category/subcategory/subcategory2/subcategory3/', // Subcategory tree
+        '/department/category/subcategory/subcategory2/', //  Subcategory tree
+        '/department/category/subcategory/', // Subcategory
+        '/department/category/', // Category
+        '/department/', // Department
+      ])
+    })
+
+    it('should return correct template values productItemListElement first item do not have skuId and other number', () => {
+      const mock = [
+        ...productItemListElementMock,
+        { item: '/slug-product-test/p', name: 'test', position: 1 },
+      ] // PDP slug with skuId
+      const result = getPDPTemplateValues({
+        itemListElement: mock,
+      })
+      expect(result).toEqual([
+        '/slug-product-test/p', // PDP slug without skuId
+        '/department/category/subcategory/subcategory2/subcategory3/', // Subcategory tree
+        '/department/category/subcategory/subcategory2/', //  Subcategory tree
+        '/department/category/subcategory/', // Subcategory
+        '/department/category/', // Category
+        '/department/', // Department
+      ])
+    })
+  })
 })