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',
|
Zwr = 'ZWR',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export type CategoryTreeItemFragment = {
|
||||||
|
__typename?: 'CategoryTreeItem'
|
||||||
|
} & Pick<
|
||||||
|
CategoryTreeItem,
|
||||||
|
'entityId' | 'name' | 'path' | 'description' | 'productCount'
|
||||||
|
>
|
||||||
|
|
||||||
export type ResponsiveImageFragment = { __typename?: 'Image' } & Pick<
|
export type ResponsiveImageFragment = { __typename?: 'Image' } & Pick<
|
||||||
Image,
|
Image,
|
||||||
'urlOriginal' | 'altText' | 'isDefault'
|
'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 { Layout } from '@components/core'
|
||||||
import { Grid, Marquee, Hero } from '@components/ui'
|
import { Grid, Marquee, Hero } from '@components/ui'
|
||||||
import { ProductCard } from '@components/product'
|
import { ProductCard } from '@components/product'
|
||||||
|
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
||||||
|
|
||||||
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
||||||
const { products } = await getAllProducts()
|
const { products } = await getAllProducts()
|
||||||
|
const { categories } = await getSiteInfo()
|
||||||
|
|
||||||
return {
|
return {
|
||||||
props: { products },
|
props: { products, categories },
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Home({
|
export default function Home({
|
||||||
products,
|
products,
|
||||||
|
categories,
|
||||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -39,8 +42,17 @@ export default function Home({
|
|||||||
wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
|
wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
|
||||||
/>
|
/>
|
||||||
<div className="py-12 flex flex-row w-full">
|
<div className="py-12 flex flex-row w-full">
|
||||||
<div className="flex-0 pr-3 w-48 break-words">
|
<div className="pr-3 w-48">
|
||||||
ALL CATEGORIES ACCESSORIES BAGS CLOTHING SHOES ALL DESIGNERS 032c 1017
|
<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>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<Grid
|
<Grid
|
||||||
|
Loading…
x
Reference in New Issue
Block a user