crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #24 from KieIO/m4-lytran

Browse Source 
M4: Product detail page
This commit is contained in:
lytrankieio123
2021-09-06 12:51:05 +07:00
committed by GitHub
parent 93560afd5f c78ce4a073
commit 8de31ec4d2
54 changed files with 1052 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
pages/404.tsx
View File

@@ -1,25 +1,4 @@
import type { GetStaticPropsContext } from 'next'
import commerce from '@lib/api/commerce'
import { Layout } from '@components/common'
export async function getStaticProps({
preview,
locale,
locales,
}: GetStaticPropsContext) {
const config = { locale, locales }
const { pages } = await commerce.getAllPages({ config, preview })
const { categories, brands } = await commerce.getSiteInfo({ config, preview })
return {
props: {
pages,
categories,
brands,
},
revalidate: 200,
}
}
export default function NotFound() {
return (
<div>

86
pages/[...pages].tsx
View File

@@ -1,86 +0,0 @@
import type {
GetStaticPathsContext,
GetStaticPropsContext,
InferGetStaticPropsType,
} from 'next'
import commerce from '@lib/api/commerce'
import { Text } from '@components/ui'
import { Layout } from '@components/common'
import getSlug from '@lib/get-slug'
import { missingLocaleInPages } from '@lib/usage-warns'
import type { Page } from '@commerce/types/page'
import { useRouter } from 'next/router'
export async function getStaticProps({
preview,
params,
locale,
locales,
}: GetStaticPropsContext<{ pages: string[] }>) {
const config = { locale, locales }
const pagesPromise = commerce.getAllPages({ config, preview })
const siteInfoPromise = commerce.getSiteInfo({ config, preview })
const { pages } = await pagesPromise
const { categories } = await siteInfoPromise
const path = params?.pages.join('/')
const slug = locale ? `${locale}/${path}` : path
const pageItem = pages.find((p: Page) =>
p.url ? getSlug(p.url) === slug : false
)
const data =
pageItem &&
(await commerce.getPage({
variables: { id: pageItem.id! },
config,
preview,
}))
const page = data?.page
if (!page) {
// We throw to make sure this fails at build time as this is never expected to happen
throw new Error(`Page with slug '${slug}' not found`)
}
return {
props: { pages, page, categories },
revalidate: 60 * 60, // Every hour
}
}
export async function getStaticPaths({ locales }: GetStaticPathsContext) {
const config = { locales }
const { pages }: { pages: Page[] } = await commerce.getAllPages({ config })
const [invalidPaths, log] = missingLocaleInPages()
const paths = pages
.map((page) => page.url)
.filter((url) => {
if (!url || !locales) return url
// If there are locales, only include the pages that include one of the available locales
if (locales.includes(getSlug(url).split('/')[0])) return url
invalidPaths.push(url)
})
log()
return {
paths,
fallback: 'blocking',
}
}
export default function Pages({
page,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter()
return router.isFallback ? (
<h1>Loading...</h1> // TODO (BC) Add Skeleton Views
) : (
<div className="max-w-2xl mx-8 sm:mx-auto py-20">
{page?.body && <Text html={page.body} />}
</div>
)
}
Pages.Layout = Layout

50
pages/cart.tsx
View File

@@ -1,50 +0,0 @@
import type { GetStaticPropsContext } from 'next'
import commerce from '@lib/api/commerce'
import { Layout } from '@components/common'
// import useCart from '@framework/cart/use-cart'
// import usePrice from '@framework/product/use-price'
// import { Button, Text } from '@components/ui'
// import { Bag, Cross, Check, MapPin, CreditCard } from '@components/icons'
// import { CartItem } from '@components/cart'
export async function getStaticProps({
preview,
locale,
locales,
}: GetStaticPropsContext) {
const config = { locale, locales }
const pagesPromise = commerce.getAllPages({ config, preview })
const siteInfoPromise = commerce.getSiteInfo({ config, preview })
const { pages } = await pagesPromise
const { categories } = await siteInfoPromise
return {
props: { pages, categories },
}
}
export default function Cart() {
// const error = null
// const success = null
// const { data, isLoading, isEmpty } = useCart()
// const { price: subTotal } = usePrice(
// data && {
// amount: Number(data.subtotalPrice),
// currencyCode: data.currency.code,
// }
// )
// const { price: total } = usePrice(
// data && {
// amount: Number(data.totalPrice),
// currencyCode: data.currency.code,
// }
// )
return (
<div>
This is cart page
</div>
)
}
Cart.Layout = Layout

17
pages/demo.tsx Normal file
View File

@@ -0,0 +1,17 @@
import { Layout, RecipeDetail } from 'src/components/common';
import { ProductInfoDetail, ViewedProducts, ReleventProducts, RecommendedRecipes } from 'src/components/modules/product-detail';
import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data';
export default function Demo() {
return <>
<ProductInfoDetail />
<RecipeDetail ingredients={INGREDIENT_DATA_TEST}/>
<RecommendedRecipes data={RECIPE_DATA_TEST}/>
<ReleventProducts/>
<ViewedProducts/>
</>
}
Demo.Layout = Layout

2
pages/index.tsx
View File

@@ -30,7 +30,7 @@ export default function Home() {
<SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
<SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon>
// todo: uncomment
{/* // todo: uncomment */}
{/* <ModalCreateUserInfo/> */}
</>
)

77
pages/product/[slug].tsx
View File

@@ -1,76 +1,11 @@
import { Layout } from '@components/common'
import commerce from '@lib/api/commerce'
import type {
GetStaticPathsContext,
GetStaticPropsContext,
InferGetStaticPropsType
} from 'next'
import { useRouter } from 'next/router'
export async function getStaticProps({
params,
locale,
locales,
preview,
}: GetStaticPropsContext<{ slug: string }>) {
const config = { locale, locales }
const pagesPromise = commerce.getAllPages({ config, preview })
const siteInfoPromise = commerce.getSiteInfo({ config, preview })
const productPromise = commerce.getProduct({
variables: { slug: params!.slug },
config,
preview,
})
import { Layout } from 'src/components/common'
import { ProductInfoDetail } from 'src/components/modules/product-detail'
const allProductsPromise = commerce.getAllProducts({
variables: { first: 4 },
config,
preview,
})
const { pages } = await pagesPromise
const { categories } = await siteInfoPromise
const { product } = await productPromise
const { products: relatedProducts } = await allProductsPromise
if (!product) {
throw new Error(`Product with slug '${params!.slug}' not found`)
}
return {
props: {
pages,
product,
relatedProducts,
categories,
},
revalidate: 200,
}
}
export async function getStaticPaths({ locales }: GetStaticPathsContext) {
const { products } = await commerce.getAllProductPaths()
return {
paths: locales
? locales.reduce<string[]>((arr, locale) => {
// Add a product path for every locale
products.forEach((product: any) => {
arr.push(`/${locale}/product${product.path}`)
})
return arr
}, [])
: products.map((product: any) => `/product${product.path}`),
fallback: 'blocking',
}
}
export default function Slug({
product,
relatedProducts,
}: InferGetStaticPropsType<typeof getStaticProps>) {
const router = useRouter()
return <div>This is product page</div>
export default function Slug() {
return <>
<ProductInfoDetail/>
</>
}
Slug.Layout = Layout