forked from crowetic/commerce
Merge master
This commit is contained in:
commit
375e30ed8d
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
|
||||||
|
}
|
||||||
|
`
|
@ -4,6 +4,9 @@ export const responsiveImageFragment = /* GraphQL */ `
|
|||||||
urlMedium: url(width: $imgMediumWidth, height: $imgMediumHeight)
|
urlMedium: url(width: $imgMediumWidth, height: $imgMediumHeight)
|
||||||
urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight)
|
urlLarge: url(width: $imgLargeWidth, height: $imgLargeHeight)
|
||||||
urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
|
urlXL: url(width: $imgXLWidth, height: $imgXLHeight)
|
||||||
|
urlOriginal
|
||||||
|
altText
|
||||||
|
isDefault
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
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
|
80
lib/bigcommerce/schema.d.ts
vendored
80
lib/bigcommerce/schema.d.ts
vendored
@ -121,6 +121,33 @@ export type BrandEdge = {
|
|||||||
cursor: Scalars['String']
|
cursor: Scalars['String']
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Breadcrumb */
|
||||||
|
export type Breadcrumb = {
|
||||||
|
__typename?: 'Breadcrumb'
|
||||||
|
/** Category id. */
|
||||||
|
entityId: Scalars['Int']
|
||||||
|
/** Name of the category. */
|
||||||
|
name: Scalars['String']
|
||||||
|
}
|
||||||
|
|
||||||
|
/** A connection to a list of items. */
|
||||||
|
export type BreadcrumbConnection = {
|
||||||
|
__typename?: 'BreadcrumbConnection'
|
||||||
|
/** Information to aid in pagination. */
|
||||||
|
pageInfo: PageInfo
|
||||||
|
/** A list of edges. */
|
||||||
|
edges?: Maybe<Array<Maybe<BreadcrumbEdge>>>
|
||||||
|
}
|
||||||
|
|
||||||
|
/** An edge in a connection. */
|
||||||
|
export type BreadcrumbEdge = {
|
||||||
|
__typename?: 'BreadcrumbEdge'
|
||||||
|
/** The item at the end of the edge. */
|
||||||
|
node: Breadcrumb
|
||||||
|
/** A cursor for use in pagination. */
|
||||||
|
cursor: Scalars['String']
|
||||||
|
}
|
||||||
|
|
||||||
/** Bulk pricing tier that sets a fixed price for the product or variant. */
|
/** Bulk pricing tier that sets a fixed price for the product or variant. */
|
||||||
export type BulkPricingFixedPriceDiscount = BulkPricingTier & {
|
export type BulkPricingFixedPriceDiscount = BulkPricingTier & {
|
||||||
__typename?: 'BulkPricingFixedPriceDiscount'
|
__typename?: 'BulkPricingFixedPriceDiscount'
|
||||||
@ -197,11 +224,22 @@ export type Category = Node & {
|
|||||||
defaultImage?: Maybe<Image>
|
defaultImage?: Maybe<Image>
|
||||||
/** Category description. */
|
/** Category description. */
|
||||||
description: Scalars['String']
|
description: Scalars['String']
|
||||||
|
/** Category breadcrumbs. */
|
||||||
|
breadcrumbs: BreadcrumbConnection
|
||||||
products: ProductConnection
|
products: ProductConnection
|
||||||
/** Metafield data related to a category. */
|
/** Metafield data related to a category. */
|
||||||
metafields: MetafieldConnection
|
metafields: MetafieldConnection
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Category */
|
||||||
|
export type CategoryBreadcrumbsArgs = {
|
||||||
|
depth: Scalars['Int']
|
||||||
|
before?: Maybe<Scalars['String']>
|
||||||
|
after?: Maybe<Scalars['String']>
|
||||||
|
first?: Maybe<Scalars['Int']>
|
||||||
|
last?: Maybe<Scalars['Int']>
|
||||||
|
}
|
||||||
|
|
||||||
/** Category */
|
/** Category */
|
||||||
export type CategoryProductsArgs = {
|
export type CategoryProductsArgs = {
|
||||||
before?: Maybe<Scalars['String']>
|
before?: Maybe<Scalars['String']>
|
||||||
@ -408,6 +446,8 @@ export type Image = {
|
|||||||
__typename?: 'Image'
|
__typename?: 'Image'
|
||||||
/** Absolute path to image using store CDN. */
|
/** Absolute path to image using store CDN. */
|
||||||
url: Scalars['String']
|
url: Scalars['String']
|
||||||
|
/** Absolute path to original image using store CDN. */
|
||||||
|
urlOriginal: Scalars['String']
|
||||||
/** Text description of an image that can be used for SEO and/or accessibility purposes. */
|
/** Text description of an image that can be used for SEO and/or accessibility purposes. */
|
||||||
altText: Scalars['String']
|
altText: Scalars['String']
|
||||||
/** Indicates whether this is the primary image. */
|
/** Indicates whether this is the primary image. */
|
||||||
@ -1613,12 +1653,22 @@ export enum CurrencyCode {
|
|||||||
Zwr = 'ZWR',
|
Zwr = 'ZWR',
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ResponsiveImageFragment = { __typename?: 'Image' } & {
|
export type CategoryTreeItemFragment = {
|
||||||
urlSmall: Image['url']
|
__typename?: 'CategoryTreeItem'
|
||||||
urlMedium: Image['url']
|
} & Pick<
|
||||||
urlLarge: Image['url']
|
CategoryTreeItem,
|
||||||
urlXL: Image['url']
|
'entityId' | 'name' | 'path' | 'description' | 'productCount'
|
||||||
}
|
>
|
||||||
|
|
||||||
|
export type ResponsiveImageFragment = { __typename?: 'Image' } & Pick<
|
||||||
|
Image,
|
||||||
|
'urlOriginal' | 'altText' | 'isDefault'
|
||||||
|
> & {
|
||||||
|
urlSmall: Image['url']
|
||||||
|
urlMedium: Image['url']
|
||||||
|
urlLarge: Image['url']
|
||||||
|
urlXL: Image['url']
|
||||||
|
}
|
||||||
|
|
||||||
export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
|
export type ProductInfoFragment = { __typename?: 'Product' } & Pick<
|
||||||
Product,
|
Product,
|
||||||
@ -1764,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
|
||||||
|
>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -151,6 +151,51 @@ type BrandEdge {
|
|||||||
cursor: String!
|
cursor: String!
|
||||||
}
|
}
|
||||||
|
|
||||||
|
"""
|
||||||
|
Breadcrumb
|
||||||
|
"""
|
||||||
|
type Breadcrumb {
|
||||||
|
"""
|
||||||
|
Category id.
|
||||||
|
"""
|
||||||
|
entityId: Int!
|
||||||
|
|
||||||
|
"""
|
||||||
|
Name of the category.
|
||||||
|
"""
|
||||||
|
name: String!
|
||||||
|
}
|
||||||
|
|
||||||
|
"""
|
||||||
|
A connection to a list of items.
|
||||||
|
"""
|
||||||
|
type BreadcrumbConnection {
|
||||||
|
"""
|
||||||
|
Information to aid in pagination.
|
||||||
|
"""
|
||||||
|
pageInfo: PageInfo!
|
||||||
|
|
||||||
|
"""
|
||||||
|
A list of edges.
|
||||||
|
"""
|
||||||
|
edges: [BreadcrumbEdge]
|
||||||
|
}
|
||||||
|
|
||||||
|
"""
|
||||||
|
An edge in a connection.
|
||||||
|
"""
|
||||||
|
type BreadcrumbEdge {
|
||||||
|
"""
|
||||||
|
The item at the end of the edge.
|
||||||
|
"""
|
||||||
|
node: Breadcrumb!
|
||||||
|
|
||||||
|
"""
|
||||||
|
A cursor for use in pagination.
|
||||||
|
"""
|
||||||
|
cursor: String!
|
||||||
|
}
|
||||||
|
|
||||||
"""
|
"""
|
||||||
Bulk pricing tier that sets a fixed price for the product or variant.
|
Bulk pricing tier that sets a fixed price for the product or variant.
|
||||||
"""
|
"""
|
||||||
@ -299,6 +344,17 @@ type Category implements Node {
|
|||||||
Category description.
|
Category description.
|
||||||
"""
|
"""
|
||||||
description: String!
|
description: String!
|
||||||
|
|
||||||
|
"""
|
||||||
|
Category breadcrumbs.
|
||||||
|
"""
|
||||||
|
breadcrumbs(
|
||||||
|
depth: Int!
|
||||||
|
before: String
|
||||||
|
after: String
|
||||||
|
first: Int
|
||||||
|
last: Int
|
||||||
|
): BreadcrumbConnection!
|
||||||
products(
|
products(
|
||||||
before: String
|
before: String
|
||||||
after: String
|
after: String
|
||||||
@ -667,6 +723,11 @@ type Image {
|
|||||||
"""
|
"""
|
||||||
url(width: Int!, height: Int): String!
|
url(width: Int!, height: Int): String!
|
||||||
|
|
||||||
|
"""
|
||||||
|
Absolute path to original image using store CDN.
|
||||||
|
"""
|
||||||
|
urlOriginal: String!
|
||||||
|
|
||||||
"""
|
"""
|
||||||
Text description of an image that can be used for SEO and/or accessibility purposes.
|
Text description of an image that can be used for SEO and/or accessibility purposes.
|
||||||
"""
|
"""
|
||||||
|
@ -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 (
|
||||||
<>
|
<>
|
||||||
@ -38,9 +41,18 @@ export default function Home({
|
|||||||
variant="secondary"
|
variant="secondary"
|
||||||
wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
|
wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
|
||||||
/>
|
/>
|
||||||
<div className="py-12 px-4 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