fix to category search

components/agility-modules/ProductSearch.tsx

@@ -1,6 +1,7 @@
-import React, { FC } from 'react'
+import React, { FC, useEffect } from 'react'
 import Search from '@components/search'
 import { ModuleWithInit } from '@agility/nextjs'
+import { useRouter } from 'next/router'
 
 interface ICustomData {
 	categories: any

components/common/Layout/Layout.tsx

@@ -95,13 +95,16 @@ const Layout: FC<Props> = (props) => {
 
 	const {
 		children,
-		pageProps: { agilityProps, categories = [], ...pageProps },
+		pageProps: { agilityProps, ...pageProps },
 	  } = props
 
 
   const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
   const { locale = 'en-US' } = useRouter()
-  const navBarlinks = categories.slice(0, 2).map((c) => ({
+
+  const categories = agilityProps?.globalData?.sitedata?.categoryLinks || []
+
+  const navBarlinks = categories.slice(0, 2).map((c:any) => ({
     label: c.name,
     href: `/search/${c.slug}`,
   }))

components/search.tsx

@@ -42,10 +42,13 @@ export default function Search({ categories, brands }: SearchPropsType) {
 
   const { pathname, category, brand } = useSearchMeta(asPath)
   const activeCategory = categories.find((cat: any) => cat.slug === category)
+
+
   const activeBrand = brands.find(
     (b: any) => getSlug(b.node.path) === `brands/${brand}`
   )?.node
 
+
   const { data } = useSearch({
     search: typeof q === 'string' ? q : '',
     categoryId: activeCategory?.id,

framework/bigcommerce/product/use-search.tsx

@@ -21,9 +21,11 @@ export const handler: SWRHook<SearchProductsHook> = {
     // Use a dummy base as we only care about the relative path
     const url = new URL(options.url!, 'http://a')
 
+	const catID = parseInt(`${categoryId}`)
+
     if (search) url.searchParams.set('search', search)
-    if (Number.isInteger(categoryId))
-      url.searchParams.set('categoryId', String(categoryId))
+    if (Number.isInteger(catID))
+      url.searchParams.set('categoryId', String(catID))
     if (Number.isInteger(brandId))
       url.searchParams.set('brandId', String(brandId))
     if (sort) url.searchParams.set('sort', sort)
@@ -34,6 +36,7 @@ export const handler: SWRHook<SearchProductsHook> = {
     })
   },
   useHook: ({ useData }) => (input = {}) => {
+
     return useData({
       input: [
         ['search', input.search],

framework/local/fetcher.ts

@@ -1,7 +1,7 @@
 import { Fetcher } from '@commerce/utils/types'
 
 export const fetcher: Fetcher = async () => {
-  console.log('FETCHER')
+
   const res = await fetch('./data.json')
   if (res.ok) {
     const { data } = await res.json()

lib/global-data/SiteData.ts

@@ -1,4 +1,5 @@
 import { ComponentWithInit } from "@agility/nextjs"
+import commerce from '@lib/api/commerce'
 
 interface ICustomData {
 	name: any,
@@ -20,6 +21,10 @@ SiteData.getCustomInitialProps = async function ({ agility, languageCode, channe
 	// set up links
 	let links = [];
 
+	let categoryLinks = []
+
+
+
 	try {
 		// try to fetch our site header
 		let header = await api.getContentList({
@@ -60,11 +65,27 @@ SiteData.getCustomInitialProps = async function ({ agility, languageCode, channe
 		throw new Error(`Could not load nested sitemap: ${error}`)
 	}
 
+	try {
+
+		const locale = "en-US"
+		const preview = false
+		const config = { locale, locales: [locale] }
+
+		const siteInfoPromise = commerce.getSiteInfo({ config, preview })
+		const { categories, brands } = await siteInfoPromise
+
+		categoryLinks = categories
+
+	} catch (error) {
+		throw new Error(`Could not load ecommerce categories: ${error}`)
+	}
+
 	// return clean object...
 	return {
 		name: contentItem.fields.name,
 		logo: contentItem.fields.logo,
 		links,
+		categoryLinks
 	};
 };
 

lib/module-data/ProductSearchData.ts

@@ -7,7 +7,7 @@ const getCustomInitialProps = async ({ agility, channelName, languageCode }:any)
 	const locale = "en-US"
 	const preview = false
 	const config = { locale, locales: [locale] }
-  const pagesPromise = commerce.getAllPages({ config, preview })
+
   const siteInfoPromise = commerce.getSiteInfo({ config, preview })
 
   const { categories, brands } = await siteInfoPromise

pages/[...slug].tsx

@@ -20,11 +20,18 @@ export async function getStaticProps({ preview, params, locale, locales, default
 	try {
 		let productCode: string | null = null
 
-		//check if this page is a product...
-		if (params?.slug.length === 2
-			&& params?.slug[0] === "product") {
-			productCode = params.slug[1]
-			params.slug[1] = "product-details"
+
+		if (params?.slug.length === 2) {
+			if (params.slug[0] === "product") {
+				//check if this page is a product...
+				productCode = params.slug[1]
+				params.slug[1] = "product-details"
+			}
+		}
+
+		if ((params?.slug.length || 0) >= 1 && params?.slug[0] === "search") {
+			//if this is a search/category page
+			params.slug = ["search"]
 		}
 
 		//add any global data accessor here