@faststore/core 3.0.60 → 3.0.62

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.
@@ -24,8 +24,8 @@ Browserslist: caniuse-lite is outdated. Please run:
    Collecting page data ...
    Generating static pages (0/9) ...
 
   Generating static pages (2/9) 
-Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Content documentation at https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview for mapping the page and the corresponding data-fetching function.
 
   Generating static pages (4/9) 
+Warning: Dynamic Content not found for the page: home. Refer to the Dynamic Content documentation at https://developers.vtex.com/docs/guides/faststore/dynamic-content-overview for mapping the page and the corresponding data-fetching function.
 
   Generating static pages (6/9) 
 
 ✓ Generating static pages (9/9) 
    Finalizing page optimization ...

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/utils/multipleTemplates.test.ts (30.35 s)
+PASS test/server/cms/index.test.ts (30.911 s)
+PASS test/server/index.test.ts (32.992 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:        33.999 s
 Ran all test suites.

package/cms/faststore/sections.json

@@ -192,6 +192,11 @@
           "type": "object",
           "required": ["sort"],
           "properties": {
+            "placeholder": {
+              "title": "Placeholder for Search Bar",
+              "type": "string",
+              "default": "Search everything at the store"
+            },
             "sort": {
               "title": "Results default sort value",
               "type": "string",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "3.0.60",
+  "version": "3.0.62",
   "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": "e34151b9c25fb8b6bb545865bd7623cffdf3af10"
 }

package/src/components/navigation/Navbar/Navbar.tsx

@@ -120,7 +120,10 @@ function Navbar({
             </>
           )}
 
-          <SearchInput sort={searchInput?.sort} />
+          <SearchInput
+            placeholder={searchInput?.placeholder}
+            sort={searchInput?.sort}
+          />
 
           <NavbarButtons.Component
             searchExpanded={searchExpanded}

package/src/components/search/SearchInput/SearchInput.tsx

@@ -36,6 +36,7 @@ export type SearchInputProps = {
   onSearchClick?: () => void
   buttonTestId?: string
   containerStyle?: CSSProperties
+  placeholder?: string
   sort?: string
 } & Omit<UISearchInputFieldProps, 'onSubmit'>
 
@@ -57,6 +58,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
       buttonTestId = 'fs-search-button',
       containerStyle,
       sort,
+      placeholder,
       ...otherProps
     },
     ref
@@ -113,7 +115,7 @@ const SearchInput = forwardRef<SearchInputRef, SearchInputProps>(
             onClick: onSearchClick,
             testId: buttonTestId,
           }}
-          placeholder="Search everything at the store"
+          placeholder={placeholder}
           onChange={(e) => setSearchQuery(e.target.value)}
           onSubmit={(term) => {
             const path = formatSearchPath({

package/src/components/sections/Navbar/Navbar.tsx

@@ -21,6 +21,7 @@ export interface NavbarProps {
     }
   }
   searchInput: {
+    placeholder?: string
     sort: string
   }
   signInButton: {

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
+      ])
+    })
+  })
 })