4
0
forked from crowetic/commerce

Dynamic categories

This commit is contained in:
Luis Alvarez 2020-10-08 18:48:28 -05:00
parent 268ef2f817
commit 0aac955910
4 changed files with 117 additions and 3 deletions

View File

@ -0,0 +1,9 @@
export const categoryTreeItemFragment = /* GraphQL */ `
fragment categoryTreeItem on CategoryTreeItem {
entityId
name
path
description
productCount
}
`

View 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

View File

@ -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
>
}
}

View File

@ -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