diff --git a/components/common/Layout/Layout.tsx b/components/common/Layout/Layout.tsx
index 54749c46b..1e1a22967 100644
--- a/components/common/Layout/Layout.tsx
+++ b/components/common/Layout/Layout.tsx
@@ -8,10 +8,9 @@ import { Navbar, Footer } from '@components/common'
import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
import { Sidebar, Button, Modal, LoadingDots } from '@components/ui'
import CartSidebarView from '@components/cart/CartSidebarView'
-
+import type { Page, Category } from '@commerce/types'
import LoginView from '@components/auth/LoginView'
import { CommerceProvider } from '@framework'
-import type { Page } from '@framework/common/get-all-pages'
const Loading = () => (
@@ -41,13 +40,13 @@ const FeatureBar = dynamic(
interface Props {
pageProps: {
pages?: Page[]
- commerceFeatures: Record
+ categories: Category[]
}
}
const Layout: FC = ({
children,
- pageProps: { commerceFeatures, ...pageProps },
+ pageProps: { categories = [], ...pageProps },
}) => {
const {
displaySidebar,
@@ -58,10 +57,16 @@ const Layout: FC = ({
} = useUI()
const { acceptedCookies, onAcceptCookies } = useAcceptCookies()
const { locale = 'en-US' } = useRouter()
+
+ const navBarlinks = categories.slice(0, 2).map((c) => ({
+ label: c.name,
+ href: `/search/${c.slug}`,
+ }))
+
return (
-
+
{children}
diff --git a/components/common/Navbar/Navbar.tsx b/components/common/Navbar/Navbar.tsx
index fcf9f1e10..aa49993f3 100644
--- a/components/common/Navbar/Navbar.tsx
+++ b/components/common/Navbar/Navbar.tsx
@@ -5,7 +5,15 @@ import { Searchbar, UserNav } from '@components/common'
import NavbarRoot from './NavbarRoot'
import s from './Navbar.module.css'
-const Navbar: FC = () => (
+interface Link {
+ href: string
+ label: string
+}
+interface NavbarProps {
+ links?: Link[]
+}
+
+const Navbar: FC
= ({ links }) => (
diff --git a/framework/bigcommerce/common/get-site-info.ts b/framework/bigcommerce/common/get-site-info.ts
index 80cde8d82..a39608d38 100644
--- a/framework/bigcommerce/common/get-site-info.ts
+++ b/framework/bigcommerce/common/get-site-info.ts
@@ -3,6 +3,8 @@ import type { RecursivePartial, RecursiveRequired } from '../api/utils/types'
import filterEdges from '../api/utils/filter-edges'
import { BigcommerceConfig, getConfig } from '../api'
import { categoryTreeItemFragment } from '../api/fragments/category-tree'
+import { Category } from '@commerce/types'
+import getSlug from '@lib/get-slug'
// Get 3 levels of categories
export const getSiteInfoQuery = /* GraphQL */ `
@@ -56,7 +58,7 @@ export type Brands = BrandEdge[]
export type GetSiteInfoResult<
T extends { categories: any[]; brands: any[] } = {
- categories: CategoriesTree
+ categories: Category[]
brands: Brands
}
> = T
@@ -68,7 +70,7 @@ async function getSiteInfo(opts?: {
}): Promise
async function getSiteInfo<
- T extends { categories: any[]; brands: any[] },
+ T extends { categories: Category[]; brands: any[] },
V = any
>(opts: {
query: string
@@ -94,11 +96,20 @@ async function getSiteInfo({
query,
{ variables }
)
- const categories = data.site?.categoryTree
+
+ let categories = data!.site!.categoryTree?.map(
+ ({ entityId, name, path }: any) => ({
+ id: `${entityId}`,
+ name,
+ slug: getSlug(path),
+ path,
+ })
+ )
+
const brands = data.site?.brands?.edges
return {
- categories: (categories as RecursiveRequired) ?? [],
+ categories: categories ?? [],
brands: filterEdges(brands as RecursiveRequired),
}
}
diff --git a/framework/bigcommerce/product/use-search.tsx b/framework/bigcommerce/product/use-search.tsx
index 0ee135032..ff0ed848c 100644
--- a/framework/bigcommerce/product/use-search.tsx
+++ b/framework/bigcommerce/product/use-search.tsx
@@ -6,7 +6,7 @@ export default useSearch as UseSearch
export type SearchProductsInput = {
search?: string
- categoryId?: number
+ categoryId?: number | string
brandId?: number
sort?: string
}
diff --git a/framework/commerce/types.ts b/framework/commerce/types.ts
index 86361fd9f..62ce4de0a 100644
--- a/framework/commerce/types.ts
+++ b/framework/commerce/types.ts
@@ -151,6 +151,15 @@ export type RemoveCartItemHandlerBody = Partial & {
cartId?: string
}
+export type Category = {
+ id: string
+ name: string
+ slug: string
+ path: string
+}
+
+export type Page = any
+
/**
* Temporal types
*/
diff --git a/framework/shopify/common/get-site-info.ts b/framework/shopify/common/get-site-info.ts
index cbbacf5b6..f9e67b5de 100644
--- a/framework/shopify/common/get-site-info.ts
+++ b/framework/shopify/common/get-site-info.ts
@@ -1,7 +1,7 @@
-import getCategories, { Category } from '../utils/get-categories'
-import getVendors, { Brands } from '../utils/get-vendors'
-
+import { Category } from '@commerce/types'
import { getConfig, ShopifyConfig } from '../api'
+import getCategories from '../utils/get-categories'
+import getVendors, { Brands } from '../utils/get-vendors'
export type GetSiteInfoResult<
T extends { categories: any[]; brands: any[] } = {
diff --git a/framework/shopify/utils/get-categories.ts b/framework/shopify/utils/get-categories.ts
index cce4b2ad7..3884fe193 100644
--- a/framework/shopify/utils/get-categories.ts
+++ b/framework/shopify/utils/get-categories.ts
@@ -1,12 +1,7 @@
import { ShopifyConfig } from '../api'
import { CollectionEdge } from '../schema'
import getSiteCollectionsQuery from './queries/get-all-collections-query'
-
-export type Category = {
- entityId: string
- name: string
- path: string
-}
+import { Category } from '@commerce/types'
const getCategories = async (config: ShopifyConfig): Promise => {
const { data } = await config.fetch(getSiteCollectionsQuery, {
@@ -17,9 +12,10 @@ const getCategories = async (config: ShopifyConfig): Promise => {
return (
data.collections?.edges?.map(
- ({ node: { id: entityId, title: name, handle } }: CollectionEdge) => ({
- entityId,
+ ({ node: { id, title: name, handle } }: CollectionEdge) => ({
+ id,
name,
+ slug: handle,
path: `/${handle}`,
})
) ?? []
diff --git a/framework/swell/common/get-site-info.ts b/framework/swell/common/get-site-info.ts
index e44d9cc06..c7a06c52e 100644
--- a/framework/swell/common/get-site-info.ts
+++ b/framework/swell/common/get-site-info.ts
@@ -1,6 +1,6 @@
-import getCategories, { Category } from '../utils/get-categories'
+import getCategories from '../utils/get-categories'
import getVendors, { Brands } from '../utils/get-vendors'
-
+import { Category } from '@commerce/types'
import { getConfig, SwellConfig } from '../api'
export type GetSiteInfoResult<
diff --git a/framework/swell/utils/get-categories.ts b/framework/swell/utils/get-categories.ts
index 4372dde4e..acf33a5b9 100644
--- a/framework/swell/utils/get-categories.ts
+++ b/framework/swell/utils/get-categories.ts
@@ -1,17 +1,13 @@
import { SwellConfig } from '../api'
-
-export type Category = {
- entityId: string
- name: string
- path: string
-}
+import { Category } from '@commerce/types'
const getCategories = async (config: SwellConfig): Promise => {
const data = await config.fetch('categories', 'get')
return (
- data.results.map(({ id: entityId, name, slug }: any) => ({
- entityId,
+ data.results.map(({ id, name, slug }: any) => ({
+ id,
name,
+ slug,
path: `/${slug}`,
})) ?? []
)
diff --git a/framework/vendure/common/get-site-info.ts b/framework/vendure/common/get-site-info.ts
index 9410c4493..99836c28b 100644
--- a/framework/vendure/common/get-site-info.ts
+++ b/framework/vendure/common/get-site-info.ts
@@ -2,13 +2,7 @@ import { getConfig, VendureConfig } from '../api'
import { GetCollectionsQuery } from '../schema'
import { arrayToTree } from '../lib/array-to-tree'
import { getCollectionsQuery } from '../lib/queries/get-collections-query'
-
-export type Category = {
- entityId: string
- name: string
- path: string
- productCount: number
-}
+import { Category } from '@commerce/types'
export type GetSiteInfoResult<
T extends { categories: any[]; brands: any[] } = {
diff --git a/lib/defaults.ts b/lib/defaults.ts
deleted file mode 100644
index e74227732..000000000
--- a/lib/defaults.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// Fallback to CMS Data
-
-export const defaultPageProps = {
- header: {
- links: [
- {
- link: {
- title: 'New Arrivals',
- url: '/',
- },
- },
- ],
- },
-}
diff --git a/pages/[...pages].tsx b/pages/[...pages].tsx
index 3f39845b5..eae7dca39 100644
--- a/pages/[...pages].tsx
+++ b/pages/[...pages].tsx
@@ -10,7 +10,7 @@ import { missingLocaleInPages } from '@lib/usage-warns'
import { getConfig } from '@framework/api'
import getPage from '@framework/common/get-page'
import getAllPages from '@framework/common/get-all-pages'
-import { defaultPageProps } from '@lib/defaults'
+import getSiteInfo from '@framework/common/get-site-info'
export async function getStaticProps({
preview,
@@ -19,9 +19,9 @@ export async function getStaticProps({
}: GetStaticPropsContext<{ pages: string[] }>) {
const config = getConfig({ locale })
const { pages } = await getAllPages({ preview, config })
+ const { categories } = await getSiteInfo({ config, preview })
const path = params?.pages.join('/')
const slug = locale ? `${locale}/${path}` : path
-
const pageItem = pages.find((p) => (p.url ? getSlug(p.url) === slug : false))
const data =
pageItem &&
@@ -34,7 +34,7 @@ export async function getStaticProps({
}
return {
- props: { ...defaultPageProps, pages, page },
+ props: { pages, page, categories },
revalidate: 60 * 60, // Every hour
}
}
diff --git a/pages/cart.tsx b/pages/cart.tsx
index cd5bedacc..c8deb1a02 100644
--- a/pages/cart.tsx
+++ b/pages/cart.tsx
@@ -7,15 +7,17 @@ import { Layout } from '@components/common'
import { Button, Text } from '@components/ui'
import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
import { CartItem } from '@components/cart'
+import getSiteInfo from '@framework/common/get-site-info'
export async function getStaticProps({
preview,
locale,
}: GetStaticPropsContext) {
const config = getConfig({ locale })
+ const { categories } = await getSiteInfo({ config, preview })
const { pages } = await getAllPages({ config, preview })
return {
- props: { pages },
+ props: { pages, categories },
}
}
diff --git a/pages/index.tsx b/pages/index.tsx
index e0182da08..4f65a93c8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,9 +1,8 @@
import { Layout } from '@components/common'
-import { Grid, Marquee, Hero } from '@components/ui'
import { ProductCard } from '@components/product'
+import { Grid, Marquee, Hero } from '@components/ui'
// import HomeAllProductsGrid from '@components/common/HomeAllProductsGrid'
import type { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
-
import { getConfig } from '@framework/api'
import getAllProducts from '@framework/product/get-all-products'
import getSiteInfo from '@framework/common/get-site-info'
@@ -14,6 +13,8 @@ export async function getStaticProps({
locale,
}: GetStaticPropsContext) {
const config = getConfig({ locale })
+ const { pages } = await getAllPages({ config, preview })
+ const { categories } = await getSiteInfo({ config, preview })
const { products } = await getAllProducts({
variables: { first: 12 },
@@ -21,15 +22,12 @@ export async function getStaticProps({
preview,
})
- // const { categories, brands } = await getSiteInfo({ config, preview })
- // const { pages } = await getAllPages({ config, preview })
-
return {
props: {
products,
- categories: [],
+ categories,
brands: [],
- pages: [],
+ pages,
},
revalidate: 14400,
}
@@ -37,8 +35,6 @@ export async function getStaticProps({
export default function Home({
products,
- brands,
- categories,
}: InferGetStaticPropsType) {
return (
<>
diff --git a/pages/orders.tsx b/pages/orders.tsx
index db4ab55b2..ee93f3f7f 100644
--- a/pages/orders.tsx
+++ b/pages/orders.tsx
@@ -1,18 +1,21 @@
import type { GetStaticPropsContext } from 'next'
import { Bag } from '@components/icons'
+import { getConfig } from '@framework/api'
import { Layout } from '@components/common'
import { Container, Text } from '@components/ui'
-import { getConfig } from '@framework/api'
import getAllPages from '@framework/common/get-all-pages'
+import getSiteInfo from '@framework/common/get-site-info'
export async function getStaticProps({
preview,
locale,
}: GetStaticPropsContext) {
const config = getConfig({ locale })
+ const { categories } = await getSiteInfo({ config, preview })
const { pages } = await getAllPages({ config, preview })
+
return {
- props: { pages },
+ props: { pages, categories },
}
}
diff --git a/pages/product/[slug].tsx b/pages/product/[slug].tsx
index 61420a8d9..ac55dc4be 100644
--- a/pages/product/[slug].tsx
+++ b/pages/product/[slug].tsx
@@ -11,6 +11,7 @@ import { getConfig } from '@framework/api'
import getProduct from '@framework/product/get-product'
import getAllPages from '@framework/common/get-all-pages'
import getAllProductPaths from '@framework/product/get-all-product-paths'
+import getSiteInfo from '@framework/common/get-site-info'
export async function getStaticProps({
params,
@@ -24,6 +25,7 @@ export async function getStaticProps({
config,
preview,
})
+ const { categories } = await getSiteInfo({ config, preview })
if (!product) {
throw new Error(`Product with slug '${params!.slug}' not found`)
@@ -33,6 +35,7 @@ export async function getStaticProps({
props: {
pages,
product,
+ categories,
},
revalidate: 200,
}
diff --git a/pages/profile.tsx b/pages/profile.tsx
index ec845c879..b1e8e6628 100644
--- a/pages/profile.tsx
+++ b/pages/profile.tsx
@@ -4,15 +4,17 @@ import getAllPages from '@framework/common/get-all-pages'
import useCustomer from '@framework/customer/use-customer'
import { Layout } from '@components/common'
import { Container, Text } from '@components/ui'
+import getSiteInfo from '@framework/common/get-site-info'
export async function getStaticProps({
preview,
locale,
}: GetStaticPropsContext) {
const config = getConfig({ locale })
+ const { categories } = await getSiteInfo({ config, preview })
const { pages } = await getAllPages({ config, preview })
return {
- props: { pages },
+ props: { pages, categories },
}
}
diff --git a/pages/search.tsx b/pages/search.tsx
index 78f784572..9a0330127 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -13,12 +13,9 @@ import useSearch from '@framework/product/use-search'
import getAllPages from '@framework/common/get-all-pages'
import getSiteInfo from '@framework/common/get-site-info'
+import getSlug from '@lib/get-slug'
import rangeMap from '@lib/range-map'
-// TODO(bc) Remove this. This should come from the API
-import getSlug from '@lib/get-slug'
-
-// TODO (bc) : Remove or standarize this.
const SORT = Object.entries({
'latest-desc': 'Latest arrivals',
'trending-desc': 'Trending',
@@ -75,7 +72,7 @@ export default function Search({
const { data } = useSearch({
search: typeof q === 'string' ? q : '',
- categoryId: activeCategory?.entityId,
+ categoryId: activeCategory?.id,
brandId: (activeBrand as any)?.entityId,
sort: typeof sort === 'string' ? sort : '',
})
@@ -164,8 +161,7 @@ export default function Search({
className={cn(
'block text-sm leading-5 text-gray-700 hover:bg-gray-100 lg:hover:bg-transparent hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900',
{
- underline:
- activeCategory?.entityId === cat.entityId,
+ underline: activeCategory?.id === cat.id,
}
)}
>
diff --git a/pages/wishlist.tsx b/pages/wishlist.tsx
index 0dddaf23d..0e6732ae2 100644
--- a/pages/wishlist.tsx
+++ b/pages/wishlist.tsx
@@ -1,13 +1,13 @@
import type { GetStaticPropsContext } from 'next'
import { Heart } from '@components/icons'
+import { getConfig } from '@framework/api'
import { Layout } from '@components/common'
import { Text, Container } from '@components/ui'
-import { defaultPageProps } from '@lib/defaults'
-import { getConfig } from '@framework/api'
import { useCustomer } from '@framework/customer'
import { WishlistCard } from '@components/wishlist'
import useWishlist from '@framework/wishlist/use-wishlist'
import getAllPages from '@framework/common/get-all-pages'
+import getSiteInfo from '@framework/common/get-site-info'
export async function getStaticProps({
preview,
@@ -21,11 +21,12 @@ export async function getStaticProps({
}
const config = getConfig({ locale })
+ const { categories } = await getSiteInfo({ config, preview })
const { pages } = await getAllPages({ config, preview })
return {
props: {
pages,
- ...defaultPageProps,
+ categories,
},
}
}