From 00227d8bf00024bde1e040182d43458957382499 Mon Sep 17 00:00:00 2001 From: Joel Varty Date: Tue, 22 Jun 2021 17:12:31 -0400 Subject: [PATCH] fix to category search --- components/agility-modules/ProductSearch.tsx | 3 ++- components/common/Layout/Layout.tsx | 7 +++++-- components/search.tsx | 3 +++ framework/bigcommerce/product/use-search.tsx | 7 +++++-- framework/local/fetcher.ts | 2 +- lib/global-data/SiteData.ts | 21 +++++++++++++++++++ lib/module-data/ProductSearchData.ts | 2 +- pages/[...slug].tsx | 17 ++++++++++----- pages/{search => searchXXX}/[category].tsx | 0 .../designers/[name].tsx | 0 .../designers/[name]/[category].tsx | 0 11 files changed, 50 insertions(+), 12 deletions(-) rename pages/{search => searchXXX}/[category].tsx (100%) rename pages/{search => searchXXX}/designers/[name].tsx (100%) rename pages/{search => searchXXX}/designers/[name]/[category].tsx (100%) diff --git a/components/agility-modules/ProductSearch.tsx b/components/agility-modules/ProductSearch.tsx index b6bb5ef0d..6f094c66c 100644 --- a/components/agility-modules/ProductSearch.tsx +++ b/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 diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx index e8bbf46de..c7c35d767 100644 --- a/components/common/Layout/Layout.tsx +++ b/components/common/Layout/Layout.tsx @@ -95,13 +95,16 @@ const Layout: FC = (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}`, })) diff --git a/components/search.tsx b/components/search.tsx index 10fd5df68..b7c83cb36 100644 --- a/components/search.tsx +++ b/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, diff --git a/framework/bigcommerce/product/use-search.tsx b/framework/bigcommerce/product/use-search.tsx index bea01753b..4aeb47fbf 100644 --- a/framework/bigcommerce/product/use-search.tsx +++ b/framework/bigcommerce/product/use-search.tsx @@ -21,9 +21,11 @@ export const handler: SWRHook = { // 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 = { }) }, useHook: ({ useData }) => (input = {}) => { + return useData({ input: [ ['search', input.search], diff --git a/framework/local/fetcher.ts b/framework/local/fetcher.ts index 69943d1df..298e45ade 100644 --- a/framework/local/fetcher.ts +++ b/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() diff --git a/lib/global-data/SiteData.ts b/lib/global-data/SiteData.ts index 6e767388b..b499e822c 100644 --- a/lib/global-data/SiteData.ts +++ b/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 }; }; diff --git a/lib/module-data/ProductSearchData.ts b/lib/module-data/ProductSearchData.ts index a87c1933a..208234fd5 100644 --- a/lib/module-data/ProductSearchData.ts +++ b/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 diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx index 7573fc186..77bbbfa97 100644 --- a/pages/[...slug].tsx +++ b/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 diff --git a/pages/search/[category].tsx b/pages/searchXXX/[category].tsx similarity index 100% rename from pages/search/[category].tsx rename to pages/searchXXX/[category].tsx diff --git a/pages/search/designers/[name].tsx b/pages/searchXXX/designers/[name].tsx similarity index 100% rename from pages/search/designers/[name].tsx rename to pages/searchXXX/designers/[name].tsx diff --git a/pages/search/designers/[name]/[category].tsx b/pages/searchXXX/designers/[name]/[category].tsx similarity index 100% rename from pages/search/designers/[name]/[category].tsx rename to pages/searchXXX/designers/[name]/[category].tsx