🐛 bug: productpage

:%s
2025-07-22 20:26:49 +00:00 · 2021-09-15 16:58:26 +07:00
parent d99abb51e9
commit 7d5d0396a0
15 changed files with 312 additions and 103 deletions
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -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 />
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,11 +1,15 @@
-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',
@@ -33,7 +37,6 @@ const CATEGORY = [
  },
 ]
 const BRAND = [
-
  {
    name: 'Maggi',
    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
@@ -45,11 +48,10 @@ const BRAND = [
  {
    name: 'Chinsu',
    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
-  }
-];
+  },
+]

 const FEATURED = [
-
  {
    name: 'Best Sellers',
    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
@@ -65,26 +67,79 @@ const FEATURED = [
  {
    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()
    } else {
      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 /> */}
+      {/* <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>
            
-      {/* <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  /> */}
+      </div>
    </>
  )
 }
--- a/src/components/common/CarouselCommon/CarouselCommon.tsx
+++ b/src/components/common/CarouselCommon/CarouselCommon.tsx
@@ -18,14 +18,14 @@ export interface CarouselCommonProps<T> {
 }

 const CarouselCommon = <T,>({
-  data,
+  data=[],
  Component,
  itemKey,
  keenClassname,
  isPadding = false,
  isArrow = true,
  isDot = false,
-  option: { slideChanged,slidesPerView, ...sliderOption },
+  option: { slideChanged,slidesPerView=1, ...sliderOption },
 }: CarouselCommonProps<T>) => {
  const [currentSlide, setCurrentSlide] = React.useState(0)
  const [dotArr, setDotArr] = React.useState<number[]>([])
@@ -68,7 +68,7 @@ const CarouselCommon = <T,>({
          [s.isPadding]: isPadding,
        })}
      >
-        {data?.map((props, index) => (
+        {data.map((props, index) => (
          <div className="keen-slider__slide" key={`${itemKey}-${index}`}>
            <Component {...props} />
          </div>
--- a/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
+++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
@@ -1,60 +1,130 @@
@import '../../../styles/utilities';
 .featuredProductCardWarpper{
-    width: 59.8rem;
-    height: 28.8rem;
+    // min-width: 30.2rem;
+    height: 14.4rem;
    padding: 2.4rem;
    @apply bg-primary-light inline-flex justify-start items-center custom-border-radius ;
+    @screen md {
+        // min-width: 598px;
+        height: 28.8rem;
+        padding: 1.6rem 3.2rem 1.6rem 1.6rem;
+    }
+    @screen 2xl {
+        // min-width: 598px;
+        height: 28.8rem;
+        padding: 2.4rem 4rem 2.4rem 2.4rem;
+    }
    .left{
-        width: 24rem;
-        height: 24rem;
+        max-width: 10rem;
+        max-height: 10rem;
+        @screen md {
+            max-width: 24rem;
+            max-height: 24rem;
+        }
    }
    .right{
-        padding-left: 2.4rem;
-        min-width: 27rem;
-        max-width: 28.6rem;
-        min-height: 16.8rem;
+        margin-left: 1.2rem;
+        // min-width: 27rem;
+        max-width: 16.6rem;
+        ma-height: 10rem;
        @apply flex justify-between flex-col;
+        @screen md {
+            margin-left: 2.4rem;
+            max-width: 27.0rem;
+            min-height: 16.8rem;
+        }
        .rightTop{
+            min-height: 6rem;
+            @screen md {
                min-height: 9.6rem;
+            }
            @apply flex justify-between flex-col;
            .title{
                @apply font-bold;
-                font-size: 2rem;
-                line-height: 2.8rem;
+                font-size: 1.2rem;
+                line-height: 1.6rem;
                letter-spacing: -0.01em;
                color: var(--text-active);
+                @screen md {
+                    font-size: 2rem;
+                    line-height: 2.8rem;
+                }
            }
            .subTitle{
                color: var(--text-base);
+                font-size: 1.2rem;
+                line-height: 1.6rem;
+                @screen md {
                    font-size: 1.6rem;
                    line-height: 2.4rem;
                }
+            }
            .priceWrapper{
                @apply flex justify-start;
                .price{
                    @apply font-bold;
-                    font-size: 2rem;
-                    line-height: 2.8rem;
+                    font-size: 1.2rem;
+                    line-height: 1.6rem;
                    letter-spacing: -0.01em;
                    color: var(--text-active);
+                    @screen md {
+                        font-size: 2rem;
+                        line-height: 2.8rem;
+                    }
                }
                .originPrice{
                    margin-left: 0.8rem;
-                    font-size: 2rem;
-                    line-height: 2.8rem;
+                    font-size: 1.2rem;
+                    line-height: 1.6rem;
                    color: var(--text-label);
                    text-decoration-line: line-through;
+                    @screen md {
+                        font-size: 2rem;
+                        line-height: 2.8rem;
+                    }
                }
            }
        }
        .buttonWarpper{
            @apply flex;
            .icon{
-                width: 5.6rem;
+                max-width: 3.2rem;
+                max-height: 3.2rem;
+                @screen sm-only{
+                    button{
+                        padding: 1rem;
+                        svg{
+                            width: 1.1rem;
+                            height: 1.1rem;
+                        }
+                    }
+                }
+                @screen md {
+                    max-width: 5.6rem;
+                    max-height: 5.6rem;
+                }
            }
            .button{
                margin-left: 0.8rem;
-                width: 20.6rem;
+                min-width: 12.5rem;
+                max-height: 3.2rem;
+                button{
+                    width: 100%;
+                    height: 100%;
+                }
+                @screen sm-only {
+                    button{
+                        padding:0.9rem;
+                    }
+                }
+                @screen md {
+                    min-width: 20.6rem;
+                    button{
+                        height: initial;
+                    }
+                    max-height: 5.6rem;
+
+                }
            }
        }
    }
--- a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
+++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
@@ -4,7 +4,7 @@ import s from './FeaturedProductCard.module.scss'
 import { LANGUAGE } from '../../../utils/language.utils'
 import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
 import ButtonCommon from '../ButtonCommon/ButtonCommon'
-interface FeaturedProductCardProps extends FeaturedProductProps {
+export interface FeaturedProductCardProps extends FeaturedProductProps {
  buttonText?: string
 }

--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -4,7 +4,7 @@ import { memo, useMemo } from 'react'
 import InputSearch from 'src/components/common/InputSearch/InputSearch'
 import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
 import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/components/icons'
-import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
+import { ACCOUNT_TAB, FILTER_PAGE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import Logo from '../../../Logo/Logo'
 import s from './HeaderMenu.module.scss'
 import { useRouter } from 'next/router'
@@ -17,7 +17,7 @@ interface Props {
    toggleCart:() => void,
 }

-const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS]
+

 const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
    const router = useRouter()
@@ -86,16 +86,6 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
                        <IconBuy />
                    </button>
                </li>
-                
-                {
-                            FILTER_PAGE.includes(router.pathname) && (
-                                <li className={s.iconFilterDesk}>
-                                    <button className={s.iconFilter} onClick={toggleFilter}>
-                                        <IconFilter/>
-                                    </button>
-                                </li>
-                            )
-                        }
            </ul>
        </section>
    )
--- a/src/components/common/Layout/Layout.tsx
+++ b/src/components/common/Layout/Layout.tsx
@@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
 import { useModalCommon } from 'src/components/hooks'
-import { BRAND, CATEGORY, FEATURED } from 'src/utils/constanst.utils'
+import { BRAND, CATEGORY, FEATURED, FILTER_PAGE } from 'src/utils/constanst.utils'
 import { CustomShapeSvg } from '..'
 import Footer from '../Footer/Footer'
 import Header from '../Header/Header'
@@ -16,7 +16,7 @@ interface Props {

 // note: demo code
 const Layout: FC<Props> = ({ children }) => {
-    const { locale = 'en-US' } = useRouter()
+    const { locale = 'en-US', pathname } = useRouter()
    const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
    
    const toggleFilter = () => {
@@ -33,7 +33,9 @@ const Layout: FC<Props> = ({ children }) => {
                    <main >{children}</main>
                    
                    <CustomShapeSvg/>
-					<div className={s.filter}><MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>
+                    {
+                        FILTER_PAGE.includes(pathname) && (<div className={s.filter}><MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>)
+                    }
                    <Footer />
                </div>
        </CommerceProvider>
--- a/src/components/common/ProductCard/ProductCard.module.scss
+++ b/src/components/common/ProductCard/ProductCard.module.scss
@@ -3,6 +3,9 @@
    min-height: 31.8rem;
    padding: 1.2rem 1.2rem 0 1.2rem;
    margin: auto;
+    @screen md {
+        margin: 0;
+    }
    margin-bottom: 1px;
    @apply flex flex-col justify-between;
    &.notSell {
--- a/src/components/icons/IconMinus.tsx
+++ b/src/components/icons/IconMinus.tsx
@@ -2,13 +2,13 @@ const IconMinus = ({ ...props }) => {
  return (
    <svg
      width="12"
-      height="12"
-      viewBox="0 0 12 12"
+      height="2"
+      viewBox="0 0 12 2"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
+        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
        fill="#141414"
      />
    </svg>
--- a/src/components/icons/IconPlus.tsx
+++ b/src/components/icons/IconPlus.tsx
@@ -2,13 +2,13 @@ const IconPlus = ({ ...props }) => {
  return (
    <svg
      width="12"
-      height="2"
-      viewBox="0 0 12 2"
+      height="12"
+      viewBox="0 0 12 12"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
-        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
+        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
        fill="#141414"
      />
    </svg>
--- a/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.module.scss
+++ b/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.module.scss
@@ -0,0 +1,16 @@
+@import '../../../../styles/utilities';
+.warpper {
+  @apply spacing-horizontal;
+  @screen xl {
+    :global(.customArrow) {
+      @screen lg {
+        &:global(.leftArrow) {
+          left: calc(-6.4rem - 2rem);
+        }
+        &:global(.rightArrow) {
+          right: calc(-6.4rem - 2rem);
+        }
+      }
+    }
+  }
+}
--- a/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx
+++ b/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx
@@ -0,0 +1,69 @@
+import { TOptionsEvents } from 'keen-slider'
+import React from 'react'
+import { CarouselCommon, FeaturedProductCard } from 'src/components/common'
+import { FeaturedProductCardProps } from 'src/components/common/FeaturedProductCard/FeaturedProductCard'
+import s from "./FeaturedProductsCarousel.module.scss"
+interface FeaturedProductsCarouselProps {
+    
+}
+
+const dataDemo:FeaturedProductCardProps[] = [{
+    title: "Sale 25% Coffee Bean",
+    subTitle: "50 first Orders within a day",
+    originPrice: "$20.00",
+    price: "$14.00",
+    imageSrc: "https://user-images.githubusercontent.com/76099413/133043628-db7813f9-1bb7-4ee1-b028-dc4295563494.png"
+},{
+    title: "Sale 20% Fruits",
+    subTitle: "50 first Orders within a day",
+    originPrice: "$20.00",
+    price: "$14.00",
+    imageSrc: "https://user-images.githubusercontent.com/76099413/133043630-07a353b9-573d-4c1d-b1de-2c932e3f14f7.png"
+},{
+    title: "Sale 25% Coffee Bean",
+    subTitle: "50 first Orders within a day",
+    originPrice: "$20.00",
+    price: "$14.00",
+    imageSrc: "https://user-images.githubusercontent.com/76099413/133043633-954c105b-c703-4e5c-8f5f-7943ad633ff0.png"
+}]
+
+const OPTION_DEFAULT: TOptionsEvents = {
+    slidesPerView: 1,
+    mode: 'free',
+    breakpoints: {
+      '(min-width: 300px)': {
+        slidesPerView: 1.5,
+      },
+      '(min-width: 400px)': {
+        slidesPerView: 2,
+      },
+      '(min-width: 640px)': {
+        slidesPerView: 1.25,
+      },
+      '(min-width: 768px)': {
+        slidesPerView: 1.075,
+      },
+      '(min-width: 968px)': {
+        slidesPerView: 1.175,
+      },
+      '(min-width: 1024px)': {
+        slidesPerView: 1.375,
+      },'(min-width: 1148px)': {
+        slidesPerView: 1.5,
+      },'(min-width: 1280px)': {
+        slidesPerView: 1.75,
+      },'(min-width: 1440px)': {
+        slidesPerView: 2.075,
+      },
+    },
+  }
+
+const FeaturedProductsCarousel = ({}: FeaturedProductsCarouselProps) => {
+    return (
+        <div className={s.warpper}>
+            <CarouselCommon<FeaturedProductCardProps> data={dataDemo} Component={FeaturedProductCard} itemKey="featured-products" option={OPTION_DEFAULT}/>
+        </div>
+    )
+}
+
+export default FeaturedProductsCarousel
--- a/src/components/modules/home/index.ts
+++ b/src/components/modules/home/index.ts
@@ -6,4 +6,5 @@ export { default as HomeSubscribe } from './HomeSubscribe/HomeSubscribe'
 export { default as HomeVideo } from './HomeVideo/HomeVideo'
 export { default as HomeCollection } from './HomeCollection/HomeCollection'
 export { default as HomeRecipe } from './HomeRecipe/HomeRecipe'
+export { default as FeaturedProductsCarousel } from './FeaturedProductsCarousel/FeaturedProductsCarousel'
 export { default as HomeFeature } from './HomeFeature/HomeFeature'
--- a/src/components/modules/product-list/ProductListFilter/ProductListFilter.module.scss
+++ b/src/components/modules/product-list/ProductListFilter/ProductListFilter.module.scss
@@ -14,9 +14,10 @@
            @apply flex;
        }
        .categories{
+            padding-right: 2.4rem;
            @apply hidden;
            @screen md {
-                @apply hidden;
+                @apply block;
            }
            @screen xl{
                @apply block;
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -117,3 +117,4 @@ export const FEATURED = [
  ]
  
 export const DEFAULT_BLOG_PAGE_SIZE=6;
+export const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS]