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

🐛 bug: productpage

Browse Source 
:%s
This commit is contained in:
unknown
2021-09-15 16:58:26 +07:00
parent d99abb51e9
commit 7d5d0396a0
15 changed files with 312 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pages/index.tsx
View File

@@ -1,5 +1,5 @@
import { Layout } from 'src/components/common';
import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
import { FeaturedProductsCarousel, HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
export default function Home() {
return (
@@ -9,6 +9,7 @@ export default function Home() {
<HomeCategories />
<HomeCollection />
<HomeVideo />
<FeaturedProductsCarousel/>
<HomeCTA />
<HomeRecipe />
<HomeSubscribe />

169
pages/test.tsx
View File

@@ -1,90 +1,145 @@
import {
CartDrawer,
Layout
} from 'src/components/common';
import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList';
import { CartDrawer, Layout } from 'src/components/common'
import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList'
// import { RecipeListPage } from 'src/components/modules/recipes';
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
import { useModalCommon } from 'src/components/hooks';
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import { useModalCommon } from 'src/components/hooks'
import {
CollectionCarcousel,
HomeCollection,
} from 'src/components/modules/home'
import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'
import { useKeenSlider } from 'keen-slider/react'
import { CSSProperties } from 'react'
const CATEGORY = [
{
name: 'All',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
name: 'All',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
},
{
name: 'Veggie',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
name: 'Veggie',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
},
{
name: 'Seafood',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
name: 'Seafood',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
},
{
name: 'Frozen',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
name: 'Frozen',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
},
{
name: 'Coffee Bean',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
name: 'Coffee Bean',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
},
{
name: 'Sauce',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
name: 'Sauce',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
},
]
const BRAND = [
{
name: 'Maggi',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
name: 'Maggi',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
},
{
name: 'Cholimes',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
name: 'Cholimes',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
},
{
name: 'Chinsu',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
}
];
name: 'Chinsu',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
},
]
const FEATURED = [
{
name: 'Best Sellers',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
},
{
name: 'Sales',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
},
{
name: 'New Item',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
},
{
name: 'Viewed',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
}
];
{
name: 'Best Sellers',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
},
{
name: 'Sales',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
},
{
name: 'New Item',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
},
{
name: 'Viewed',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`,
},
]
export default function Test() {
const { visible: visibleMenuFilter, openModal, closeModal: closeMenuFilter } = useModalCommon({ initialValue: false })
const {
visible: visibleMenuFilter,
openModal,
closeModal: closeMenuFilter,
} = useModalCommon({ initialValue: false })
const toggle = () => {
if (visibleMenuFilter) {
closeMenuFilter()
closeMenuFilter()
} else {
openModal()
openModal()
}
}
}
const style: CSSProperties = {
background: 'gray',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '50px',
color: '#fff',
fontWeight: 500,
height: '300px',
maxHeight: '100vh',
}
const [sliderRef] = useKeenSlider<HTMLDivElement>({ slidesPerView: 2 })
return (
<>
{/* <BlogDetailPage /> */}
{/* <RecipeListPage/> */}
{/*<MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>*/}
<button onClick={toggle}>toggle menu : {visibleMenuFilter.toString()}</button>
<MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleMenuFilter} onClose={closeMenuFilter}/>
{/* <CartDrawer /> */}
{/* <HomeCollection /> */}
{/* <CollectionCarcousel
data={PRODUCT_DATA_TEST}
itemKey="tesst"
category="test"
title="test"
subtitle=""
/> */}
<div ref={sliderRef} className="keen-slider">
{/* {[...Array(10).keys()].map(() => {
return (
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
)
})} */}
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
</div>
</>
)
}