cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Merge branch 'master' of https://github.com/okbel/e-comm-example

Browse Source
This commit is contained in:
Luis Alvarez 2020-10-26 19:02:32 -05:00
commit 3c45f254da
5 changed files with 98 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
components/core/HomeAllProductsGrid/HomeAllProductsGrid.module.css Normal file
View File

@ -0,0 +1,23 @@
.root {
@apply py-12 flex flex-col w-full px-6;
@screen md {
@apply flex-row;
}
}
.asideWrapper {
@apply pr-3 w-full relative;
@screen md {
@apply w-48;
}
}
.aside {
@apply flex flex-row w-full justify-around mb-12;
@screen md {
@apply mb-0 block sticky top-32;
}
}

66
components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx Normal file
View File

@ -0,0 +1,66 @@
import { FC } from 'react'
import Link from 'next/link'
import { getCategoryPath, getDesignerPath } from '@utils/search'
import { Grid } from '@components/ui'
import { ProductCard } from '@components/product'
import s from './HomeAllProductsGrid.module.css'
interface Props {
categories?: any
brands?: any
newestProducts?: any
}
const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
return (
<div className={s.root}>
<div className={s.asideWrapper}>
<div className={s.aside}>
<ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getCategoryPath('')}>
<a>All Categories</a>
</Link>
</li>
{categories.map((cat: any) => (
<li key={cat.path} className="py-1 text-accents-8">
<Link href={getCategoryPath(cat.path)}>
<a>{cat.name}</a>
</Link>
</li>
))}
</ul>
<ul className="">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getDesignerPath('')}>
<a>All Designers</a>
</Link>
</li>
{brands.flatMap(({ node }: any) => (
<li key={node.path} className="py-1 text-accents-8">
<Link href={getDesignerPath(node.path)}>
<a>{node.name}</a>
</Link>
</li>
))}
</ul>
</div>
</div>
<div className="flex-1">
<Grid layout="normal">
{newestProducts.map(({ node }: any) => (
<ProductCard
key={node.path}
product={node}
variant="simple"
imgWidth={480}
imgHeight={480}
/>
))}
</Grid>
</div>
</div>
)
}
export default Head

1
components/core/HomeAllProductsGrid/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './HomeAllProductsGrid'

3
components/product/ProductSlider/ProductSlider.module.css
View File

@ -48,7 +48,8 @@
@apply hidden;
@screen sm {
@apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
@apply block absolute bottom-6 left-1/2;
transform: translateX(-50%);
}
}

55
pages/index.tsx
View File

@ -5,11 +5,10 @@ import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
import rangeMap from '@lib/range-map'
import { getCategoryPath, getDesignerPath } from '@utils/search'
import { Layout } from '@components/core'
import { Grid, Marquee, Hero } from '@components/ui'
import { ProductCard } from '@components/product'
import Link from 'next/link'
import HomeAllProductsGrid from '@components/core/HomeAllProductsGrid'
export async function getStaticProps({
preview,
@ -129,53 +128,11 @@ export default function Home({
/>
))}
</Marquee>
<div className="py-12 flex flex-row w-full px-6">
<div className="pr-3 w-48 relative">
<div className="sticky top-32">
<ul className="mb-10">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getCategoryPath('')}>
<a>All Categories</a>
</Link>
</li>
{categories.map((cat) => (
<li key={cat.path} className="py-1 text-accents-8">
<Link href={getCategoryPath(cat.path)}>
<a>{cat.name}</a>
</Link>
</li>
))}
</ul>
<ul className="">
<li className="py-1 text-base font-bold tracking-wide">
<Link href={getDesignerPath('')}>
<a>All Designers</a>
</Link>
</li>
{brands.flatMap(({ node }) => (
<li key={node.path} className="py-1 text-accents-8">
<Link href={getDesignerPath(node.path)}>
<a>{node.name}</a>
</Link>
</li>
))}
</ul>
</div>
</div>
<div className="flex-1">
<Grid layout="normal">
{newestProducts.map(({ node }) => (
<ProductCard
key={node.path}
product={node}
variant="simple"
imgWidth={480}
imgHeight={480}
/>
))}
</Grid>
</div>
</div>
<HomeAllProductsGrid
categories={categories}
brands={brands}
newestProducts={newestProducts}
/>
</div>
)
}