mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 04:14:18 +00:00
🎨 styles: product detail page
:%s
This commit is contained in:
lytrankieio123
parent
8712ae717d
commit
31d0ec1331
@ -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
|
||||
@ -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
|
||||
@ -8,7 +8,6 @@
|
||||
}
|
||||
.img {
|
||||
width: fit-content;
|
||||
margin: auto;
|
||||
margin-top: 0;
|
||||
|
||||
@screen sm-only {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
@import "../../../../../styles/utilities";
|
||||
|
||||
.recipeIngredient {
|
||||
margin: 6rem auto;
|
||||
padding: 6rem 0;
|
||||
@screen md {
|
||||
margin: 5.6rem auto;
|
||||
padding: 5.6rem 0;
|
||||
}
|
||||
.top {
|
||||
@apply flex justify-between items-center spacing-horizontal;
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
|
||||
.productInfoDetail {
|
||||
@apply spacing-horizontal;
|
||||
margin: 0 auto 4rem;
|
||||
padding-bottom: 4rem;
|
||||
@screen md {
|
||||
@apply flex;
|
||||
padding-bottom: 5.6rem;
|
||||
}
|
||||
}
|
||||
@ -29,13 +29,14 @@ const ProductInfo = ({ }: Props) => {
|
||||
<div className={s.actions}>
|
||||
<QuanittyInput />
|
||||
<div className={s.bottom}>
|
||||
<ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon>
|
||||
<ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.PREORDER}</ButtonCommon>
|
||||
{/* <ButtonCommon size='large'>{LANGUAGE.BUTTON_LABEL.BUY_NOW}</ButtonCommon>
|
||||
|
||||
<ButtonCommon size='large' type='light'>
|
||||
<span className={s.buttonWithIcon}>
|
||||
<IconBuy /><span className={s.label}>{LANGUAGE.BUTTON_LABEL.ADD_TO_CARD}</span>
|
||||
</span>
|
||||
</ButtonCommon>
|
||||
</ButtonCommon> */}
|
||||
</div>
|
||||
</div>
|
||||
</section >
|
||||
|
||||
@ -2,7 +2,8 @@ export const LANGUAGE = {
|
||||
BUTTON_LABEL: {
|
||||
BUY_NOW: 'Buy now',
|
||||
SHOP_NOW: 'Shop now',
|
||||
ADD_TO_CARD: 'Add to Cart'
|
||||
ADD_TO_CARD: 'Add to Cart',
|
||||
PREORDER: 'Pre-Order Now',
|
||||
},
|
||||
PLACE_HOLDER: {
|
||||
SEARCH: 'Search',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user