forked from crowetic/commerce
Dynamic categories
This commit is contained in:
parent
268ef2f817
commit
0aac955910
9
lib/bigcommerce/api/fragments/category-tree.ts
Normal file
9
lib/bigcommerce/api/fragments/category-tree.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export const categoryTreeItemFragment = /* GraphQL */ `
|
||||
fragment categoryTreeItem on CategoryTreeItem {
|
||||
entityId
|
||||
name
|
||||
path
|
||||
description
|
||||
productCount
|
||||
}
|
||||
`
|
68
lib/bigcommerce/api/operations/get-site-info.ts
Normal file
68
lib/bigcommerce/api/operations/get-site-info.ts
Normal file
@ -0,0 +1,68 @@
|
||||
import type {
|
||||
GetSiteInfoQuery,
|
||||
GetSiteInfoQueryVariables,
|
||||
} from 'lib/bigcommerce/schema'
|
||||
import type { RecursivePartial, RecursiveRequired } from '../utils/types'
|
||||
import { BigcommerceConfig, getConfig } from '..'
|
||||
import { categoryTreeItemFragment } from '../fragments/category-tree'
|
||||
|
||||
// Get 3 levels of categories
|
||||
export const getSiteInfoQuery = /* GraphQL */ `
|
||||
query getSiteInfo {
|
||||
site {
|
||||
categoryTree {
|
||||
...categoryTreeItem
|
||||
children {
|
||||
...categoryTreeItem
|
||||
children {
|
||||
...categoryTreeItem
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
${categoryTreeItemFragment}
|
||||
`
|
||||
|
||||
export type CategoriesTree = NonNullable<
|
||||
GetSiteInfoQuery['site']['categoryTree']
|
||||
>
|
||||
|
||||
export type GetSiteInfoResult<
|
||||
T extends { categories: any[] } = { categories: CategoriesTree }
|
||||
> = T
|
||||
|
||||
async function getSiteInfo(opts?: {
|
||||
variables?: GetSiteInfoQueryVariables
|
||||
config?: BigcommerceConfig
|
||||
}): Promise<GetSiteInfoResult>
|
||||
|
||||
async function getSiteInfo<T extends { categories: any[] }, V = any>(opts: {
|
||||
query: string
|
||||
variables?: V
|
||||
config?: BigcommerceConfig
|
||||
}): Promise<GetSiteInfoResult<T>>
|
||||
|
||||
async function getSiteInfo({
|
||||
query = getSiteInfoQuery,
|
||||
variables,
|
||||
config,
|
||||
}: {
|
||||
query?: string
|
||||
variables?: GetSiteInfoQueryVariables
|
||||
config?: BigcommerceConfig
|
||||
} = {}): Promise<GetSiteInfoResult> {
|
||||
config = getConfig(config)
|
||||
// RecursivePartial forces the method to check for every prop in the data, which is
|
||||
// required in case there's a custom `query`
|
||||
const data = await config.fetch<RecursivePartial<GetSiteInfoQuery>>(query, {
|
||||
variables,
|
||||
})
|
||||
const categories = data.site?.categoryTree
|
||||
|
||||
return {
|
||||
categories: (categories as RecursiveRequired<typeof categories>) ?? [],
|
||||
}
|
||||
}
|
||||
|
||||
export default getSiteInfo
|
25
lib/bigcommerce/schema.d.ts
vendored
25
lib/bigcommerce/schema.d.ts
vendored
@ -1653,6 +1653,13 @@ export enum CurrencyCode {
|
||||
Zwr = 'ZWR',
|
||||
}
|
||||
|
||||
export type CategoryTreeItemFragment = {
|
||||
__typename?: 'CategoryTreeItem'
|
||||
} & Pick<
|
||||
CategoryTreeItem,
|
||||
'entityId' | 'name' | 'path' | 'description' | 'productCount'
|
||||
>
|
||||
|
||||
export type ResponsiveImageFragment = { __typename?: 'Image' } & Pick<
|
||||
Image,
|
||||
'urlOriginal' | 'altText' | 'isDefault'
|
||||
@ -1807,3 +1814,21 @@ export type GetProductQuery = { __typename?: 'Query' } & {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export type GetSiteInfoQueryVariables = Exact<{ [key: string]: never }>
|
||||
|
||||
export type GetSiteInfoQuery = { __typename?: 'Query' } & {
|
||||
site: { __typename?: 'Site' } & {
|
||||
categoryTree: Array<
|
||||
{ __typename?: 'CategoryTreeItem' } & {
|
||||
children: Array<
|
||||
{ __typename?: 'CategoryTreeItem' } & {
|
||||
children: Array<
|
||||
{ __typename?: 'CategoryTreeItem' } & CategoryTreeItemFragment
|
||||
>
|
||||
} & CategoryTreeItemFragment
|
||||
>
|
||||
} & CategoryTreeItemFragment
|
||||
>
|
||||
}
|
||||
}
|
||||
|
@ -3,17 +3,20 @@ import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
|
||||
import { Layout } from '@components/core'
|
||||
import { Grid, Marquee, Hero } from '@components/ui'
|
||||
import { ProductCard } from '@components/product'
|
||||
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
||||
|
||||
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
||||
const { products } = await getAllProducts()
|
||||
const { categories } = await getSiteInfo()
|
||||
|
||||
return {
|
||||
props: { products },
|
||||
props: { products, categories },
|
||||
}
|
||||
}
|
||||
|
||||
export default function Home({
|
||||
products,
|
||||
categories,
|
||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||
return (
|
||||
<>
|
||||
@ -39,8 +42,17 @@ export default function Home({
|
||||
wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
|
||||
/>
|
||||
<div className="py-12 flex flex-row w-full">
|
||||
<div className="flex-0 pr-3 w-48 break-words">
|
||||
ALL CATEGORIES ACCESSORIES BAGS CLOTHING SHOES ALL DESIGNERS 032c 1017
|
||||
<div className="pr-3 w-48">
|
||||
<ul className="uppercase">
|
||||
<li>
|
||||
<h2 className="font-bold">All Categories</h2>
|
||||
</li>
|
||||
{categories.map((cat) => (
|
||||
<li key={cat.path} className="mt-2">
|
||||
<a href="#">{cat.name}</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<Grid
|
||||
|
Loading…
x
Reference in New Issue
Block a user