Merge pull request #77 from KieIO/feature/m3-product-list

Feature/m3 product list
2025-07-23 04:36:49 +00:00 · 2021-10-07 10:29:06 +07:00
parent b6bac56cd5 ee06aff83a
commit 7ae638dd7f
64 changed files with 1099 additions and 496 deletions
--- a/framework/vendure/api/operations/get-all-facets.ts
+++ b/framework/vendure/api/operations/get-all-facets.ts
@@ -1,10 +1,10 @@
 import { OperationContext } from '@commerce/api/operations'
 import { Facet } from '@commerce/types/facet'
 import { Provider, VendureConfig } from '../'
-import { GetAllFacetsQuery } from '../../schema'
+import { FacetFilterParameter, FacetSortParameter, GetAllFacetsQuery } from '../../schema'
 import { getAllFacetsQuery } from '../../utils/queries/get-all-facets-query'

-export type FacetVariables = { first?: number }
+export type FacetVariables = { first?: number, filter?: FacetFilterParameter, sort?: FacetSortParameter }

 export default function getAllFacetsOperation({
  commerce,
@@ -27,9 +27,10 @@ export default function getAllFacetsOperation({
  } = {}): Promise<{ facets: Facet[] | any[] }> {
    const config = commerce.getConfig(cfg)
    const variables = {
-      input: {
+      options: {
        take: vars.first,
-        groupByFacet: true,
+        filter: vars.filter,
+        sort: vars.sort,
      },
    }
    const { data } = await config.fetch<GetAllFacetsQuery>(query, {
--- a/framework/vendure/api/operations/get-all-products.ts
+++ b/framework/vendure/api/operations/get-all-products.ts
@@ -14,7 +14,7 @@ export default function getAllProductsOperation({
    variables?: ProductVariables
    config?: Partial<VendureConfig>
    preview?: boolean
-  }): Promise<{ products: Product[] }>
+  }): Promise<{ products: Product[], totalItems: number }>

  async function getAllProducts({
    query = getAllProductsQuery,
@@ -25,7 +25,7 @@ export default function getAllProductsOperation({
    variables?: ProductVariables
    config?: Partial<VendureConfig>
    preview?: boolean
-  } = {}): Promise<{ products: Product[] | any[] }> {
+  } = {}): Promise<{ products: Product[] | any[], totalItems: number }> {
    const config = commerce.getConfig(cfg)
    const variables = {
      input: {
@@ -40,6 +40,7 @@ export default function getAllProductsOperation({

    return {
      products: data.search.items.map((item) => normalizeSearchResult(item)),
+      totalItems: data.search.totalItems as number,
    }
  }

--- a/framework/vendure/schema.d.ts
+++ b/framework/vendure/schema.d.ts
@@ -3219,7 +3219,8 @@ export type GetAllProductsQueryVariables = Exact<{

 export type GetAllProductsQuery = { __typename?: 'Query' } & {
  search: { __typename?: 'SearchResponse' } & {
-    items: Array<{ __typename?: 'SearchResult' } & SearchResultFragment>
+    items: Array<{ __typename?: 'SearchResult' } & SearchResultFragment>,
+    'totalItems'
  }
 }

@@ -3228,8 +3229,9 @@ export type GetAllFacetsQuery = { __typename?: 'Query' } & {
    items: Array<
      { __typename?: 'Facet' } & Pick<
        Facet,
-        'id' | 'name' | 'code'
-      > & {
+        'id' | 'name' | 'code' | 'values'
+      > 
+      & {
          parent?: Maybe<{ __typename?: 'Facet' } & Pick<Facet, 'id'>>
          children?: Maybe<
            Array<{ __typename?: 'Facet' } & Pick<Facet, 'id'>>
--- a/framework/vendure/utils/queries/get-all-products-query.ts
+++ b/framework/vendure/utils/queries/get-all-products-query.ts
@@ -3,6 +3,7 @@ import { searchResultFragment } from '../fragments/search-result-fragment'
 export const getAllProductsQuery = /* GraphQL */ `
  query getAllProducts($input: SearchInput!) {
    search(input: $input) {
+      totalItems
      items {
        ...SearchResult
      }
--- a/framework/vendure/utils/queries/get-collections-query.ts
+++ b/framework/vendure/utils/queries/get-collections-query.ts
@@ -24,7 +24,7 @@ export const getCollectionsNameQuery = /* GraphQL */ `
    collections{
      items{
          name
-          link:slug
+          slug
      }
    }
  }
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -62,19 +62,23 @@ export async function getStaticProps({
  const freshFacetId = getFreshFacetId(facets)
  if (freshFacetId) {
    freshProductvariables.facetValueIds = [freshFacetId]
-  }
    const freshProductsPromise = commerce.getAllProducts({
      variables: freshProductvariables,
      config,
      preview,
    })
    promisesWithKey.push({ key: 'freshProducts', promise: freshProductsPromise, keyResult: 'products' })
+  } else {
+    props.freshProducts = []
+  }


  // featured products
  const allFeaturedFacetIds = getAllFacetValueIdsByParentCode(facets, CODE_FACET_FEATURED)
  const allDiscountFacetIds = getAllFacetValueIdsByParentCode(facets, CODE_FACET_DISCOUNT)
  const facetValueIdsForFeaturedProducts = [...allFeaturedFacetIds, ...allDiscountFacetIds]
+  
+  if (facetValueIdsForFeaturedProducts.length > 0) {
    const featuredProductsPromise = commerce.getAllProducts({
      variables: {
        facetValueIds: facetValueIdsForFeaturedProducts
@@ -83,6 +87,9 @@ export async function getStaticProps({
      preview,
    })
    promisesWithKey.push({ key: 'featuredProducts', promise: featuredProductsPromise, keyResult: 'products'  })
+  } else {
+    props.featuredProducts = []
+  }

  // collection
  const collectionsPromise = commerce.getAllCollections({
--- a/pages/products.tsx
+++ b/pages/products.tsx
@@ -1,19 +1,97 @@
+import { ProductCard } from '@commerce/types/product';
+import { Collection, Facet } from '@framework/schema';
+import commerce from '@lib/api/commerce';
+import { GetStaticPropsContext } from 'next';
 import { Layout } from 'src/components/common';
 import { ViewedProducts } from 'src/components/modules/product-detail';
 import ProductListFilter from 'src/components/modules/product-list/ProductListFilter/ProductListFilter';
-import RecipeListBanner from 'src/components/modules/recipes-list/RecipeListBanner/RecipeListBanner';
-import RecipesList from 'src/components/modules/recipes-list/RecipesList/RecipesList';
+import { CODE_FACET_BRAND, CODE_FACET_FEATURED, DEFAULT_PAGE_SIZE } from 'src/utils/constanst.utils';
+import { getAllPromies } from 'src/utils/funtion.utils';
+import { PromiseWithKey, SortOrder } from 'src/utils/types.utils';
 import ProductListBanner from '../src/components/modules/product-list/ProductListBanner/ProductListBanner';

+interface Props {
+  facets: Facet[],
+  collections: Collection[],
+  productsResult: { products: ProductCard[], totalItems: number },

-export default function Products() {
+}
+
+export default function Products({ facets, collections, productsResult }: Props) {
  return (
    <>
      <ProductListBanner />
-      <ProductListFilter/>
+      <ProductListFilter
+        collections={collections}
+        facets={facets}
+        products={productsResult.products}
+        total={productsResult.totalItems} />
      <ViewedProducts />
    </>
  )
 }

+export async function getStaticProps({
+  preview,
+  locale,
+  locales,
+}: GetStaticPropsContext) {
+  const config = { locale, locales }
+  let promisesWithKey = [] as PromiseWithKey[]
+  let props = {} as any
+
+  const facetsPromise = commerce.getAllFacets({
+    variables: {
+      sort: {
+        code: SortOrder.Asc
+      },
+      filter: {
+        code: {
+          in: [CODE_FACET_FEATURED, CODE_FACET_BRAND]
+        }
+      }
+    },
+    config,
+    preview,
+  })
+
+  promisesWithKey.push({ key: 'facets', promise: facetsPromise, keyResult: 'facets' })
+
+  // collection
+  const collectionsPromise = commerce.getAllCollections({
+    variables: {},
+    config,
+    preview,
+  })
+  promisesWithKey.push({ key: 'collections', promise: collectionsPromise, keyResult: 'collections' })
+
+  // products
+  const productsPromise = commerce.getAllProducts({
+    variables: {
+      first: DEFAULT_PAGE_SIZE,
+    },
+    config,
+    preview,
+  })
+  promisesWithKey.push({ key: 'productsResult', promise: productsPromise })
+
+
+  try {
+    const promises = getAllPromies(promisesWithKey)
+    const rs = await Promise.all(promises)
+
+    promisesWithKey.map((item, index) => {
+      props[item.key] = item.keyResult ? rs[index][item.keyResult] : rs[index]
+      return null
+    })
+
+    return {
+      props,
+      revalidate: 60,
+    }
+  } catch (err) {
+
+  }
+}
+
 Products.Layout = Layout
--- a/pages/test.tsx
+++ b/pages/test.tsx
@@ -1,6 +1,6 @@
 import commerce from '@lib/api/commerce';
 import { GetStaticPropsContext } from 'next';
-import { Layout } from 'src/components/common';
+import { Layout, ListProductCardSkeleton } from 'src/components/common';

 interface Props {
  products: any
@@ -8,10 +8,11 @@ interface Props {
 export default function Home({ products }: Props) {
  return (
    <>
-      <p>
-        TOTAL: {products?.length}
-      </p>
-      {JSON.stringify(products[0])}
+      {/* <ListProductCardSkeleton /> */}
+      {/* <ListProductCardSkeleton count={1} /> */}
+      <ListProductCardSkeleton count={10} />
+      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab qui magnam debitis ex laborum laboriosam suscipit! Totam excepturi eum libero.
+      <ListProductCardSkeleton count={10} isWrap/>
    </>
  )
 }
@@ -22,28 +23,9 @@ export async function getServerSideProps({
  locale,
  locales,
 }: GetStaticPropsContext) {
-  const config = { locale, locales }
-  const productsPromise = commerce.getAllProducts({
-    // const productsPromise = commerce.getAllFacets({
-    variables: {
-      first: 70,
-      //  filter: {
-      //   name: {
-      //     contains: 'ca'
-      //   }
-      // }
-    },
-    config,
-    preview,
-    // Saleor provider only
-    ...({ featured: true } as any),
-  })
-
-  const { products } = await productsPromise
-

  return {
-    props: { products },
+    props: {},
  }
 }

--- a/src/components/common/EmptyCommon/EmptyCommon.module.scss
+++ b/src/components/common/EmptyCommon/EmptyCommon.module.scss
@@ -4,13 +4,16 @@
    padding: 1.6rem;
    margin: auto;
    .imgWrap {
-        min-width: 10rem;
+        min-height: 10rem;
        text-align: center;
+        img {
+            min-height: 10rem;
+        }
    }

    .description {
        color: var(--disabled);
        text-align: center;
-        margin-top: .8rem;
+        margin-top: 0.8rem;
    }
 }
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -1,5 +1,6 @@
 import classNames from 'classnames'
 import React, { memo, useEffect, useRef, useState } from 'react'
+import { useProductFilter } from 'src/components/contexts'
 import { useModalCommon } from 'src/components/hooks'
 import ModalAuthenticate from '../ModalAuthenticate/ModalAuthenticate'
 import ModalCreateUserInfo from '../ModalCreateUserInfo/ModalCreateUserInfo'
@@ -9,12 +10,12 @@ import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
 import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile'
 import s from './Header.module.scss'
 interface props {
-    toggleFilter: () => void,
-    visibleFilter: boolean
+    
 }

-const Header = memo(({ toggleFilter, visibleFilter }: props) => {
+const Header = memo(({ }: props) => {
    const headeFullRef = useRef<HTMLDivElement>(null)
+    const { toggleProductFilter: toggleFilter } = useProductFilter()
    const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
    const [isModeAuthenRegister, setIsModeAuthenRegister] = useState<boolean>(false)
    const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
@@ -63,7 +64,6 @@ const Header = memo(({ toggleFilter, visibleFilter }: props) => {
                <div className={s.menu}>
                    <HeaderMenu
                        isFull={isFullHeader}
-                        visibleFilter={visibleFilter}
                        toggleFilter={toggleFilter}
                        openModalLogin={openModalLogin}
                        openModalRegister = {openModalRegister}
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
@@ -50,10 +50,6 @@
                    width: 1.2rem;
                    height: 1.2rem;
                    border-radius: 1.2rem;
-                    @apply hidden;
-                    &.isShow {
-                        @apply block;
-                    }
                }
                @screen md {
                    display: none;
--- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
+++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
@@ -27,7 +27,6 @@ interface Props {
  children?: any
  isFull?: boolean
  isStickyHeader?: boolean
-  visibleFilter?: boolean
  openModalLogin: () => void
  openModalRegister: () => void
  openModalInfo: () => void
@@ -38,7 +37,6 @@ const HeaderMenu = memo(
  ({
    isFull,
    isStickyHeader,
-    visibleFilter,
    openModalLogin,
    openModalRegister,
    openModalInfo,
@@ -90,6 +88,7 @@ const HeaderMenu = memo(
      ],
      [logout]
    )
+    
    return (
      <section
        className={classNames({
@@ -105,12 +104,7 @@ const HeaderMenu = memo(
              {FILTER_PAGE.includes(router.pathname) && (
                <button className={s.iconFilter} onClick={toggleFilter}>
                  <IconFilter />
-                  <div
-                    className={classNames({
-                      [s.dot]: true,
-                      [s.isShow]: visibleFilter,
-                    })}
-                  ></div>
+                  <div className={s.dot}></div>
                </button>
              )}
              <button
--- a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx
+++ b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx
@@ -42,7 +42,7 @@ const HeaderSubMenu = memo(() => {
            <ul className={s.menu}>
                {/* todo: handle active item */}
                <li>
-                    <MenuDropdown options={collections?.items ?? []} align="left">Categories</MenuDropdown>
+                    <MenuDropdown options={collections || []} align="left">Categories</MenuDropdown>
                </li>
                {
                    MENU.map(item => <li key={item.name}
--- a/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx
+++ b/src/components/common/Header/components/HeaderSubMenuMobile/HeaderSubMenuMobile.tsx
@@ -68,4 +68,5 @@ const HeaderSubMenuMobile = memo(({ }: Props) => {
    )
 })

+HeaderSubMenuMobile.displayName = 'HeaderSubMenuMobile'
 export default HeaderSubMenuMobile
--- a/src/components/common/Layout/Layout.tsx
+++ b/src/components/common/Layout/Layout.tsx
@@ -1,7 +1,7 @@
 import { CommerceProvider } from '@framework'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
-import { CartDrawerProvider, MessageProvider } from 'src/components/contexts'
+import { CartDrawerProvider, MessageProvider, ProductFilterProvider } from 'src/components/contexts'
 import LayoutContent from './LayoutContent/LayoutContent'
 interface Props {
  className?: string
@@ -13,9 +13,11 @@ const Layout: FC<Props> = ({ children }) => {
  return (
    <CommerceProvider locale={locale}>
      <CartDrawerProvider>
+        <ProductFilterProvider>
          <MessageProvider>
            <LayoutContent>{children}</LayoutContent>
          </MessageProvider>
+        </ProductFilterProvider>
      </CartDrawerProvider>
    </CommerceProvider>
  )
--- a/src/components/common/Layout/LayoutContent/LayoutContent.module.scss
+++ b/src/components/common/Layout/LayoutContent/LayoutContent.module.scss
@@ -17,7 +17,7 @@
    }
 }
 .filter {
-    @screen xl {
+    @screen md {
        display: none;
    }
 }
--- a/src/components/common/Layout/LayoutContent/LayoutContent.tsx
+++ b/src/components/common/Layout/LayoutContent/LayoutContent.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router'
 import { FC } from 'react'
 import { useMessage } from 'src/components/contexts'
 import { useModalCommon } from 'src/components/hooks'
-import { BRAND, CATEGORY, FEATURED, FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils'
+import { FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils'
 import { CartDrawer, Footer, MessageCommon, ScrollToTop } from '../..'
 import Header from '../../Header/Header'
 import MenuNavigationProductList from '../../MenuNavigationProductList/MenuNavigationProductList'
@@ -14,23 +14,13 @@ interface Props {
 }

 const LayoutContent: FC<Props> = ({ children }) => {
-    const { pathname } = useRouter()
-    const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
    const router = useRouter()
    const {messages, removeMessage} = useMessage()

-    const toggleFilter = () => {
-        if (visibleFilter) {
-            closeFilter()
-        } else {
-            openFilter()
-        }
-    }
-
    return (
        <>
            <div className={s.mainLayout}>
-                <Header toggleFilter={toggleFilter} visibleFilter={visibleFilter} />
+                <Header/>
                {
                    router.pathname === ROUTE.ACCOUNT ?
                        <section className={s.wrapperWithBg}>
@@ -38,10 +28,9 @@ const LayoutContent: FC<Props> = ({ children }) => {
                        </section> :
                        <main>{children}</main>
                }
-                <div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
                <ScrollToTop visibilityHeight={1500} />
                {
-                    FILTER_PAGE.includes(pathname) && (<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>)
+                    FILTER_PAGE.includes(router.pathname) && (<div className={s.filter}><MenuNavigationProductList /> </div>)
                }
                <Footer />
            </div>
--- a/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.module.scss
+++ b/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.module.scss
@@ -0,0 +1,12 @@
+.listProductCardSkeleton {
+    display: flex;
+    overflow: hidden;
+
+    &.wrap {
+        flex-wrap: wrap;
+        overflow: unset;
+        > div {
+            margin-bottom: 1.6rem;
+        }
+    }
+}
--- a/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx
+++ b/src/components/common/ListProductCardSkeleton/ListProductCardSkeleton.tsx
@@ -0,0 +1,21 @@
+import classNames from 'classnames'
+import { ProductCardSkeleton } from '..'
+import s from './ListProductCardSkeleton.module.scss'
+
+type Props = {
+  count?: number
+  isWrap?: boolean
+}
+const ListProductCardSkeleton = ({ count = 5, isWrap }: Props) => {
+
+  return (
+    <div className={classNames(s.listProductCardSkeleton, { [s.wrap]: isWrap })}>
+      {
+        Array.from(Array(count).keys()).map(item => <ProductCardSkeleton key={item} />)
+
+      }
+    </div>
+  )
+}
+
+export default ListProductCardSkeleton
--- a/src/components/common/MenuFilter/MenuFilter.module.scss
+++ b/src/components/common/MenuFilter/MenuFilter.module.scss
@@ -1,7 +1,6 @@
@import "../../../styles/utilities";
-.menuFilterWrapper{
-    @apply spacing-horizontal;

+.menuFilterWrapper{
    .menuFilterHeading{
        @apply sub-headline font-bold;
        color: var(--text-active);
@@ -19,21 +18,5 @@
            width: 100%;
            border-bottom: 1px solid var(--border-line);
        } 
-       
-        li{
-            margin: 1rem 0;
-            padding:0;
-            div{
-             padding: 0.8rem 1.6rem;
-             margin-right: 0.8rem;
-             background-color: var(--gray);
-             border-radius: 0.8rem;
-             cursor: pointer;
-             &.active {
-                color:white;
-                background-color: var(--primary);
-             }
-            }
-        }
    }
 }
--- a/src/components/common/MenuFilter/MenuFilter.tsx
+++ b/src/components/common/MenuFilter/MenuFilter.tsx
@@ -1,44 +1,34 @@
-import classNames from 'classnames'
-import { useEffect, useState } from 'react';
+import s from './MenuFilter.module.scss';
+import MenuFilterItem from './MenuFilterItem/MenuFilterItem';

-import s from './MenuFilter.module.scss'
 interface Props {
    children?: any,
    heading?: string,
-    categories:{name:string,link:string}[],
+    categories: { name: string, slug?: string, code?: string }[],
    type: string,
-    onChangeValue?: (value: Object) => void
+    onChange: (value: string, type: string, isSellect?: boolean) => void
+    isSingleSelect?: boolean
+    singleSelectedValue?: string
 }

-const MenuFilter = ({heading,categories,type,onChangeValue}:Props)=> {
-    const [active, setActive] = useState<string>('');
-
-    function handleClick(link:string){
-        setActive(link);
-
-        if(active === link){
-            setActive('');
+const MenuFilter = ({ heading, categories, type, onChange, singleSelectedValue, isSingleSelect }: Props) => {
+    function handleChange(value: string, isSellect: boolean) {
+        onChange(value, type, isSellect)
    }
-    }
-
-    useEffect(()=>{
-      
-        let href = active?.split("=");
-        const linkValue = href[1];
-
-        onChangeValue && onChangeValue({[type]:linkValue});
-    },[active]) 

    return (
        <section className={s.menuFilterWrapper}>
            <h2 className={s.menuFilterHeading}>{heading}</h2>
            <ul className={s.menuFilterList}>
                {
-                    categories.map(item => <li key={item.name}>
-                        <div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
-                            {item.name}
-                        </div>
-                    </li>)
+                    categories.map(item => <MenuFilterItem
+                        key={item.slug || item.code}
+                        name={item.name}
+                        type={type}
+                        value={item.slug || item.code || ''}
+                        onChange={handleChange}
+                        isActive={isSingleSelect && (item.slug || item.code) === singleSelectedValue}
+                    />)
                }
            </ul>
        </section>
--- a/src/components/common/MenuFilter/MenuFilterItem/MenuFilterItem.module.scss
+++ b/src/components/common/MenuFilter/MenuFilterItem/MenuFilterItem.module.scss
@@ -0,0 +1,15 @@
+.menuFilterItem {
+    margin: 1rem 0;
+    padding: 0;
+    div {
+        padding: 0.8rem 1.6rem;
+        margin-right: 0.8rem;
+        background-color: var(--gray);
+        border-radius: 0.8rem;
+        cursor: pointer;
+        &.active {
+            color: var(--white);
+            background-color: var(--primary);
+        }
+    }
+}
--- a/src/components/common/MenuFilter/MenuFilterItem/MenuFilterItem.tsx
+++ b/src/components/common/MenuFilter/MenuFilterItem/MenuFilterItem.tsx
@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+import { route } from 'next/dist/server/router';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import s from './MenuFilterItem.module.scss';
+
+interface Props {
+    name: string,
+    value: string,
+    type: string,
+    isActive?: boolean
+    onChange: (value: string, isSellect: boolean) => void
+}
+
+const MenuFilterItem = ({ name, value, type, isActive, onChange }: Props) => {
+    const router = useRouter()
+    const [isSelected, setIsSelected] = useState<boolean>()
+
+    useEffect(() => {
+        setIsSelected(isActive)
+    }, [isActive])
+
+    useEffect(() => {
+        const rs = (router.query[type] || []).includes(value)
+        setIsSelected(rs)
+    }, [type, router.query, value])
+
+    function handleClick() {
+        onChange(value, !isSelected)
+        setIsSelected(!isSelected)
+    }
+
+    return (
+        <li className={s.menuFilterItem}>
+            <div onClick={handleClick} className={classNames({ [s.active]: isSelected })}>
+                {name}
+            </div>
+        </li>
+    )
+}
+
+export default MenuFilterItem
--- a/src/components/common/MenuNavigation/MenuNavigation.module.scss
+++ b/src/components/common/MenuNavigation/MenuNavigation.module.scss
@@ -3,7 +3,6 @@
    @apply hidden;
    @screen md {
        @apply block;
-    }
        .menuNavigationHeading{
            @screen md {
                @apply sub-headline font-bold ;
@@ -12,22 +11,5 @@
                margin: 1.6rem 0;
            }
        }
-    .menuNavigationList{
-        @screen md {
-            li{
-                margin: 0.8rem 0;
-                a{
-                 display:block;
-                 width:100%;     
-                 color:var(--text-base);
-                 &:hover {
-                    @apply text-primary;
-                 }
-                 &.active {
-                    @apply text-primary;
-                 }
-                }
-            }
-        }
    }
 }
--- a/src/components/common/MenuNavigation/MenuNavigation.tsx
+++ b/src/components/common/MenuNavigation/MenuNavigation.tsx
@@ -1,30 +1,27 @@
-import classNames from 'classnames'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
 import s from './MenuNavigation.module.scss'
+import MenuNavigationItem from './MenuNavigationItem/MenuNavigationItem'

 interface Props {
    children?: any,
    heading: string,
-    categories:{name:string,link:string}[]
+    queryKey: string,
+    categories: { name: string, slug?: string, code?: string }[]
+    isSingleSelect?: boolean
 }

-const MenuNavigation = ({heading,categories}:Props)=> {
-    const router = useRouter()
-
+const MenuNavigation = ({ heading, queryKey, categories, isSingleSelect }: Props) => {
    return (
        <section className={s.menuNavigationWrapper}>
            <h2 className={s.menuNavigationHeading}>{heading}({categories.length})</h2>
            <ul className={s.menuNavigationList}>
                {
-                    categories.map(item => <li key={item.name}
-                       >
-                        <Link href={item.link}>
-                            <a className={classNames({ [s.active]: router.asPath === item.link})}>
-                                {item.name}
-                            </a>
-                        </Link>
-                    </li>)
+                    categories.map(item => <MenuNavigationItem
+                        key={item.name}
+                        name={item.name}
+                        value={item.slug || item.code || ''}
+                        queryKey={queryKey}
+                        isSingleSelect={isSingleSelect}
+                    />)
                }
            </ul>
        </section>
--- a/src/components/common/MenuNavigation/MenuNavigationItem/MenuNavigationItem.module.scss
+++ b/src/components/common/MenuNavigation/MenuNavigationItem/MenuNavigationItem.module.scss
@@ -0,0 +1,15 @@
+.menuNavigationItem {
+    @screen md {
+        display: block;
+        width: 100%;
+        margin: 0.8rem 0;
+        color: var(--text-base);
+        cursor: pointer;
+        &:hover {
+            @apply text-active;
+        }
+        &.active {
+            @apply text-primary;
+        }
+    }
+}
--- a/src/components/common/MenuNavigation/MenuNavigationItem/MenuNavigationItem.tsx
+++ b/src/components/common/MenuNavigation/MenuNavigationItem/MenuNavigationItem.tsx
@@ -0,0 +1,66 @@
+import classNames from 'classnames'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { QUERY_KEY, QUERY_SPLIT_SEPERATOR, ROUTE } from 'src/utils/constanst.utils'
+import s from './MenuNavigationItem.module.scss'
+
+interface Props {
+    name: string
+    value: string
+    queryKey: string
+    isSingleSelect?: boolean
+
+}
+
+const MenuNavigationItem = ({ name, value, queryKey, isSingleSelect }: Props) => {
+    const router = useRouter()
+    const [isActive, setIsActive] = useState<boolean>()
+
+    useEffect(() => {
+        if (!value) {
+            setIsActive(false)
+        }
+
+        const queryString = router.query[queryKey] as string || ''
+        setIsActive(queryString.split(QUERY_SPLIT_SEPERATOR).includes(value))
+    }, [router.query, queryKey, value])
+
+    const handleClick = () => {
+        const queryString = router.query[queryKey] as string || ''
+        const prevQuery = queryString.split(QUERY_SPLIT_SEPERATOR)
+        
+        let newQuery = ''
+        if (isSingleSelect) {
+            newQuery = isActive ? '' : value
+        } else {
+            if (isActive) {
+                newQuery = prevQuery.filter(item => item !== value).join(QUERY_SPLIT_SEPERATOR)
+            } else {
+                newQuery = [...prevQuery, value].join(QUERY_SPLIT_SEPERATOR)
+            }
+        }
+
+        const query =  {
+            ...router.query,
+            [queryKey]: newQuery
+        }
+
+        if (queryKey === QUERY_KEY.CATEGORY) {
+            query[QUERY_KEY.PAGE] = "0"
+        }
+
+        router.push({
+            pathname: ROUTE.PRODUCTS,
+            query
+        },
+            undefined, { shallow: true }
+        )
+    }
+
+    return (<li className={classNames(s.menuNavigationItem, { [s.active]: isActive })}
+        onClick={handleClick}>
+        {name}
+    </li>)
+}
+
+export default MenuNavigationItem
--- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
+++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
@@ -1,13 +1,5 @@
@import "../../../styles/utilities";
-.menuNavigationProductListDesktop{
-    @screen sm {
-        @apply hidden;
-    }

-    @screen xl {
-        @apply block;
-    }
-}
 .menuNavigationProductListMobile{
    @apply relative transition-all duration-100;
    &.isShow{
@@ -37,7 +29,7 @@
            transform: translateY(0%)
        }
        .content{
-            @apply  absolute w-full h-full;
+            @apply  absolute w-full h-full spacing-horizontal custom-scroll;
            margin-top: 3rem;
            padding-top: 10rem ;
            padding-bottom: 10rem;
@@ -46,6 +38,7 @@
            height: 96%;
            bottom: 0;
            border-radius: 2.4rem 2.4rem 0 0;
+
            .head{
                @apply flex justify-between fixed;
                top:0;
@@ -57,12 +50,11 @@
                background-color: white;
                z-index: 10000;
                h3{
-                    @apply heading-3 font-bold;
-                    color:var(--text-base);
+                    @apply heading-3 font-heading;
                }
            }
            .foot{
-                @apply fixed;
+                @apply fixed text-center;
                bottom: 0;
                left:0;
                width: 100%;
--- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
+++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx
@@ -1,38 +1,118 @@
-import React, { useState } from 'react';
+import { QueryFacetsArgs } from '@framework/schema';
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } from 'react';
 import { ButtonCommon } from 'src/components/common';
+import { useProductFilter } from 'src/components/contexts';
+import { useGetAllCollection } from 'src/components/hooks/collection';
+import { useFacets } from 'src/components/hooks/facets';
+import IconHide from 'src/components/icons/IconHide';
+import { CODE_FACET_BRAND, CODE_FACET_FEATURED, OPTIONS_SORT_PRODUCT, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
+import { LANGUAGE } from 'src/utils/language.utils';
+import { SortOrder } from 'src/utils/types.utils';
+import MenuFilter from '../MenuFilter/MenuFilter';
+import SkeletonParagraph from '../SkeletonCommon/SkeletonParagraph/SkeletonParagraph';
 import s from './MenuNavigationProductList.module.scss';
 import MenuSort from './MenuSort/MenuSort';
-import {LANGUAGE} from 'src/utils/language.utils';
-import classNames from 'classnames'
-import MenuFilter from '../MenuFilter/MenuFilter';
-import MenuNavigation from '../MenuNavigation/MenuNavigation';
-import IconHide from 'src/components/icons/IconHide';

 interface Props {
-    categories:{name:string,link:string}[],
-    brands:{name:string,link:string}[],
-    featured:{name:string,link:string}[],
-    visible: boolean,
-    onClose: () => void
+ 
 }

-const MenuNavigationProductList = ({categories,brands,featured,visible,onClose}:Props)=>{
-    
-    const [dataSort,setDataSort] = useState({});
-    
-    function handleValue(value:Object){
-        setDataSort({...dataSort,...value});
+const FACET_QUERY = {
+    options: {
+        sort: {
+            code: SortOrder.Asc
+        },
+        filter: {
+            code: {
+                in: [CODE_FACET_FEATURED, CODE_FACET_BRAND]
            }
-    function filter(){
-        // console.log(dataSort)
        }
+    }
+} as QueryFacetsArgs
+
+const MenuNavigationProductList = ({}: Props) => {
+    const router = useRouter()
+    const { productFilterVisible: visible, closeProductFilter: onClose } = useProductFilter()
+    const { facets, loading: facetsLoading } = useFacets(FACET_QUERY)
+    const { collections, loading: collectionLoading } = useGetAllCollection()
+    const [brandQuery, setBrandQuery] = useState<string[]>([])
+    const [featuredQuery, setFeaturedQuery] = useState<string[]>([])
+    const [categoryQuery, setCategoryQuery] = useState<string>()
+    const [sortValue, setSortValue] = useState<string>();
+
+    useEffect(() => {
+        const rs = router.query[QUERY_KEY.SORTBY] as string
+        if (rs) {
+            setSortValue(rs)
+        }
+    }, [router.query])
+
+    useEffect(() => {
+        const rs = router.query[QUERY_KEY.CATEGORY] as string
+        if (rs) {
+            setCategoryQuery(rs)
+        }
+    }, [router.query])
+
+    function onSubmit() {
+        let newURL = `${ROUTE.PRODUCTS}?`
+
+        if (categoryQuery) {
+            newURL += `&${QUERY_KEY.CATEGORY}=${categoryQuery}`
+        }
+
+        if (brandQuery.length > 0) {
+            newURL += `&${QUERY_KEY.BRAND}=${brandQuery.join(",")}`
+        }
+
+        if (featuredQuery.length > 0) {
+            newURL += `&${QUERY_KEY.FEATURED}=${featuredQuery.join(",")}`
+        }
+
+        if (sortValue) {
+            newURL += `&${QUERY_KEY.SORTBY}=${sortValue}`
+        }
+        router.push(newURL)
+        onClose()
+    }
+
+    const onSortChange = (value: string) => {
+        setSortValue(value)
+    }
+
+    const onCategoryChange = (value: string, isSelect: boolean) => {
+        if (isSelect) {
+            setCategoryQuery(value)
+        } else {
+            setCategoryQuery('')
+        }
+    }
+
+    const onFilterOptionChange = (value: string, type: string, isSelect: boolean = true) => {
+        if (type === QUERY_KEY.CATEGORY) {
+            onCategoryChange(value, isSelect)
+        } else {
+            let rs = [...featuredQuery]
+            let setDataFunction = setFeaturedQuery
+
+            if (type === CODE_FACET_BRAND) {
+                rs = [...brandQuery]
+                setDataFunction = setBrandQuery
+            }
+
+            if (isSelect) {
+                rs.push(value)
+            } else {
+                rs = rs.filter(item => item !== value)
+            }
+            setDataFunction(rs)
+        }
+    }
+
+
    return (
-        <>
-            <div className={s.menuNavigationProductListDesktop}>
-                <MenuNavigation categories={categories} heading="Categories"/>
-                <MenuNavigation categories={brands} heading="Brands"/>
-                <MenuNavigation categories={featured} heading="Featured"/>
-            </div>
        <div className={classNames({ [s.menuNavigationProductListMobile]: true, [s.isShow]: visible })}>
            <div className={classNames({ [s.menuNavigationProductModal]: true, [s.animation]: visible })}>
                <div className={s.content}>
@@ -40,17 +120,36 @@ const MenuNavigationProductList = ({categories,brands,featured,visible,onClose}:
                        <h3>FILTER</h3>
                        <div onClick={onClose}><IconHide /></div>
                    </div>
-                        <MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/>
-                        <MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/>
-                        <MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/>
-                        <MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/>
+
+                    {collectionLoading && <SkeletonParagraph rows={5} />}
+                    <MenuFilter categories={collections}
+                        heading="Categories"
+                        type={QUERY_KEY.CATEGORY}
+                        onChange={onFilterOptionChange} 
+                        singleSelectedValue={categoryQuery}
+                        isSingleSelect={true}
+                        />
+
+                    {facetsLoading && <>
+                        <SkeletonParagraph rows={5} />
+                        <SkeletonParagraph rows={5} />
+                    </>}
+                    {
+                        facets?.map(item => <MenuFilter
+                            key={item.id}
+                            type={item.code}
+                            categories={item.values}
+                            heading={item.name}
+                            onChange={onFilterOptionChange}
+                        />)
+                    }
+                    <MenuSort heading="SORT BY" onChange={onSortChange} value={sortValue} options={OPTIONS_SORT_PRODUCT} />
                    <div className={s.foot}>
-                            <ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
+                        <ButtonCommon size="large" onClick={onSubmit}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
                    </div>
                </div>
            </div>
        </div>
-        </>
    )
 }

--- a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
+++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
@@ -1,40 +1,12 @@
@import "../../../../styles/utilities";
-.menuSortWrapper{
-    @apply spacing-horizontal;

+.menuSortWrapper{
    .menuSortHeading{
-        @apply sub-headline font-bold ;
-        color: var(--text-active);
-        font-feature-settings: 'salt' on;
+        @apply heading-3 font-heading;
        margin: 0.8rem 0;
    }
    .menuSortList{
        padding-bottom: 1rem;
        box-sizing: border-box;
-        
-        li{
-            div{
-             height: 4.8rem;
-             line-height: 4.8rem;
-             padding: 0 1.6rem;
-             margin-right: 0.8rem;
-             border-radius: 0.8rem;
-             cursor: pointer;
-             &.active {
-                @apply font-bold relative;
-                color:var(--text-active);
-                background-color: var(--gray);
-                &::after{
-                    @apply absolute;
-                    content:"";
-                    background-image: url('/assets/svg/check.svg');
-                    right: 1.6rem;
-                    top: calc(50% - 24px/2);
-                    width: 2.4rem;
-                    height: 2.4rem;
-                }
-             }
-            }
-        }
    }
 }
--- a/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx
+++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx
@@ -1,63 +1,30 @@
 import classNames from 'classnames';
 import { useEffect, useState } from 'react';
-import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
+import { PRODUCT_SORT_OPTION_VALUE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
 import s from './MenuSort.module.scss';
+import MenuSortItem from './MenuSortItem/MenuSortItem';

 interface Props {
    children?: any,
    heading: string,
-    type:string,
-    onChangeValue?: (value: Object) => void
-}
-const SORT = [
-    {
-        name: 'By Name',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=by-name`,
-    },
-    {
-        name: 'Price(High to Low)',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=high-to-low`,
-    },
-    {
-        name: 'Price (Low to High)',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=low-to-high`,
-    },
-    {
-        name: 'On Sale',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=on-sale`,
-    },
-  ];
-
-
-const MenuSort = ({heading,type,onChangeValue}:Props)=> {
-    const [active, setActive] = useState<string>('');
-
-    function handleClick(link:string){
-        setActive(link);
-
-        if(active === link){
-            setActive('');
-        }
+    options: {name: string, value: string}[]
+    value?: string,
+    onChange: (value: string) => void
 }

-    useEffect(()=>{
-      
-        let href = active?.split("=");
-        const linkValue = href[1];
-
-        onChangeValue && onChangeValue({[type]:linkValue});
-    },[active]) 
-  
+const MenuSort = ({ heading, value, onChange, options }: Props) => {
    return (
        <section className={classNames(s.menuSortWrapper)}>
            <h2 className={classNames(s.menuSortHeading)}>{heading}</h2>
            <ul className={s.menuSortList}>
                {
-                    SORT.map(item => <li key={item.name}>
-                        <div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
-                            {item.name}
-                        </div>
-                    </li>)
+                    options.map(item => <MenuSortItem
+                        key={item.value}
+                        name={item.name}
+                        value={item.value}
+                        currentValue={value}
+                        onChange={onChange}
+                    />)
                }
            </ul>
        </section>
--- a/src/components/common/MenuNavigationProductList/MenuSort/MenuSortItem/MenuSortItem.module.scss
+++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSortItem/MenuSortItem.module.scss
@@ -0,0 +1,26 @@
+.menuSortItem {
+    div {
+        height: 4.8rem;
+        line-height: 4.8rem;
+        padding: 0 1.6rem;
+        margin-right: 0.8rem;
+        border-radius: 0.8rem;
+        cursor: pointer;
+        &.active {
+            @apply font-bold relative;
+            color: var(--text-active);
+            background-color: var(--primary-lightest);
+            &::after {
+                @apply absolute;
+                content: "";
+                background-image: url("./check.svg");
+                background-repeat: no-repeat;
+                background-position: center;
+                right: 1.6rem;
+                top: calc(50% - 24px / 2);
+                width: 2.4rem;
+                height: 2.4rem;
+            }
+        }
+    }
+}
--- a/src/components/common/MenuNavigationProductList/MenuSort/MenuSortItem/MenuSortItem.tsx
+++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSortItem/MenuSortItem.tsx
@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import s from './MenuSortItem.module.scss';
+
+interface Props {
+    name: string,
+    value: string,
+    currentValue?: string,
+    onChange: (value: string) => void
+}
+
+const MenuSortItem = ({ onChange, name, value, currentValue }: Props) => {
+    const handleChange = () => {
+        onChange(value)
+    }
+    return (
+        <li className={s.menuSortItem}>
+            <div onClick={handleChange} className={classNames({ [s.active]: value === currentValue })}>
+                {name}
+            </div>
+        </li>
+    )
+}
+
+export default MenuSortItem
--- a/src/components/common/MenuNavigationProductList/MenuSort/MenuSortItem/check.svg
+++ b/src/components/common/MenuNavigationProductList/MenuSort/MenuSortItem/check.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14.7104 1.20986C14.6175 1.11613 14.5069 1.04174 14.385 0.990969C14.2632 0.940201 14.1324 0.914062 14.0004 0.914062C13.8684 0.914062 13.7377 0.940201 13.6159 0.990969C13.494 1.04174 13.3834 1.11613 13.2904 1.20986L5.84044 8.66986L2.71044 5.52986C2.61392 5.43662 2.49998 5.36331 2.37512 5.3141C2.25026 5.2649 2.11694 5.24077 1.98276 5.24309C1.84858 5.24541 1.71617 5.27414 1.59309 5.32763C1.47001 5.38113 1.35868 5.45834 1.26544 5.55486C1.1722 5.65138 1.09889 5.76532 1.04968 5.89018C1.00048 6.01503 0.976347 6.14836 0.978669 6.28254C0.98099 6.41672 1.00972 6.54913 1.06321 6.67221C1.1167 6.79529 1.19392 6.90662 1.29044 6.99986L5.13044 10.8399C5.2234 10.9336 5.334 11.008 5.45586 11.0588C5.57772 11.1095 5.70843 11.1357 5.84044 11.1357C5.97245 11.1357 6.10316 11.1095 6.22502 11.0588C6.34687 11.008 6.45748 10.9336 6.55044 10.8399L14.7104 2.67986C14.8119 2.58622 14.893 2.47257 14.9484 2.34607C15.0038 2.21957 15.0324 2.08296 15.0324 1.94486C15.0324 1.80676 15.0038 1.67015 14.9484 1.54365C14.893 1.41715 14.8119 1.3035 14.7104 1.20986Z" fill="#5b9a74" />
+        </svg>
--- a/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx
+++ b/src/components/common/ModalCreateUserInfo/ModalCreateUserInfo.tsx
@@ -25,7 +25,7 @@ const ModalCreateUserInfo = ({ demoVisible: visible, demoCloseModal: closeModal
                        <Inputcommon placeholder='Street Address' ref={firstInputRef} />
                        <Inputcommon placeholder='City' />
                        <div className={s.line}>
-                            <SelectCommon option={STATE_OPTIONS} type="custom" size="large" placeholder='State'/>
+                            <SelectCommon options={STATE_OPTIONS} type="custom" size="large" placeholder='State'/>
                            <Inputcommon placeholder='Zip code' />
                        </div>
                        <Inputcommon placeholder='Phone (delivery contact)' />
--- a/src/components/common/ProductCardSkeleton/ProductCardSkeleton.module.scss
+++ b/src/components/common/ProductCardSkeleton/ProductCardSkeleton.module.scss
@@ -0,0 +1,15 @@
+.productCardSkeleton {
+    max-width: 22.4rem;
+    min-width: 20rem;
+    margin: 0 0.8rem;
+    > div {
+        width: 100% !important;
+    }
+    .content {
+        margin-top: 1.6rem;
+        > div {
+            margin: 0;
+            width: 100% !important;
+        }
+    }
+}
--- a/src/components/common/ProductCardSkeleton/ProductCardSkeleton.tsx
+++ b/src/components/common/ProductCardSkeleton/ProductCardSkeleton.tsx
@@ -0,0 +1,17 @@
+import SkeletonImage from "../SkeletonCommon/SkeletonImage/SkeletonImage"
+import SkeletonParagraph from "../SkeletonCommon/SkeletonParagraph/SkeletonParagraph"
+import s from './ProductCardSkeleton.module.scss'
+
+const ProductCardSkeleton = ({ }) => {
+
+  return (
+    <div className={s.productCardSkeleton}>
+      <SkeletonImage />
+      <div className={s.content}>
+        <SkeletonParagraph rows={3} />
+      </div>
+    </div>
+  )
+}
+
+export default ProductCardSkeleton
--- a/src/components/common/ProductList/ProductList.module.scss
+++ b/src/components/common/ProductList/ProductList.module.scss
@@ -1,11 +1,28 @@
 .wrapper {
+    margin: 4rem auto;
    .list {
-        // max-width: 109.4rem;
-        @apply flex flex-wrap justify-around;
+        @apply grid grid-cols-2;
+        @screen md {
+            @apply grid-cols-3;
+        }
+        @screen lg {
+            @apply grid-cols-4;
+        }
+        @screen xl {
+            @apply grid-cols-6;
+        }
+        .empty {
+            button {
+                margin-top: 1.6rem;
+                width: 100%;
+            }
+        }
    }
    .pagination {
        padding-top: 4.8rem;
-        // max-width: 109.4rem;
        @apply flex justify-center items-center;
+        &.hide {
+            @apply hidden;
+        }
    }
 }
--- a/src/components/common/ProductList/ProductList.tsx
+++ b/src/components/common/ProductList/ProductList.tsx
@@ -1,27 +1,50 @@
-import React, { useState } from 'react'
+import classNames from 'classnames'
+import { useRouter } from 'next/router'
+import React from 'react'
+import { DEFAULT_PAGE_SIZE, ROUTE } from 'src/utils/constanst.utils'
+import { ButtonCommon, EmptyCommon } from '..'
 import PaginationCommon from '../PaginationCommon/PaginationCommon'
 import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
 import s from "./ProductList.module.scss"
+
 interface ProductListProps {
-    data: ProductCardProps[]
+    data: ProductCardProps[],
+    total?: number,
+    defaultCurrentPage?: number
+    onPageChange?: (page: number) => void
 }

-const ProductList = ({data}: ProductListProps) => {
-    const [currentPage, setCurrentPage] = useState(0)
-    const onPageChange = (page:number) => {
-        setCurrentPage(page)
+const ProductList = ({ data, total = data.length, defaultCurrentPage, onPageChange }: ProductListProps) => {
+    const router = useRouter()
+    const handlePageChange = (page: number) => {
+        onPageChange && onPageChange(page)
    }
+
+    const handleShowAllProduct = () => {
+        router.push({
+            pathname: ROUTE.PRODUCTS,
+        },
+            undefined, { shallow: true }
+        )
+    }
+
    return (
        <div className={s.wrapper}>
            <div className={s.list}>
                {
-                    data.slice(currentPage*20,(currentPage+1)*20).map((product,index)=>{
+                    data.map((product, index) => {
                        return <ProductCard {...product} key={index} />
                    })
                }
+                {
+                    data.length === 0 && <div className={s.empty}>
+                        <EmptyCommon />
+                        <ButtonCommon onClick={handleShowAllProduct}>Show all products</ButtonCommon>
                    </div>
-            <div className={s.pagination}>
-                <PaginationCommon total={data.length} pageSize={20} onChange={onPageChange}/>
+                }
+            </div>
+            <div className={classNames(s.pagination, { [s.hide]: data.length === 0 })}>
+                <PaginationCommon defaultCurrent={defaultCurrentPage} total={total} pageSize={DEFAULT_PAGE_SIZE} onChange={handlePageChange} />
            </div>
        </div>
    )
--- a/src/components/common/SelectCommon/SelectCommon.tsx
+++ b/src/components/common/SelectCommon/SelectCommon.tsx
@@ -1,24 +1,33 @@
-import s from './SelectCommon.module.scss'
 import classNames from 'classnames'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { IconVectorDown } from 'src/components/icons'
+import s from './SelectCommon.module.scss'
 import SelectOption from './SelectOption/SelectOption'

 interface Props {
    placeholder? : string,
+    value?: string,
    size?: 'base' | 'large',
    type?: 'default' | 'custom',
-    option: {name: string, value: string}[],
+    options: {name: string, value: string}[],
    onChange?: (value: string) => void,
 }

-const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, onChange}: Props) => {
-    const [selectedName, setSelectedName] = useState(placeholder)
-    const [selectedValue, setSelectedValue] = useState('')
+const SelectCommon = ({ value, type = 'default', size = 'base', options, placeholder, onChange}: Props) => {
+    const [selectedName, setSelectedName] = useState<string>()
+    const [selectedValue, setSelectedValue] = useState<string>('')

-    const changeSelectedName = (item:string, value: string) => {
+    useEffect(() => {
+        setSelectedValue(value || '')
+
+        const name = options.find(item => item.value === value)?.name
+        setSelectedName(name)
+    }, [value, options])
+
+    const changeSelectedName = (value: string) => {
        setSelectedValue(value)
-        setSelectedName(item)
+        const name = options.find(item => item.value === value)?.name
+        setSelectedName(name)
        onChange && onChange(value)
    }
    return(
@@ -33,7 +42,7 @@ const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, on
                    [s.selectTrigger] : true,
                    
                })}
-                >{selectedName}<IconVectorDown /></div>
+                >{selectedName || placeholder}<IconVectorDown /></div>
                
                <div className={s.hoverWrapper}>
                    <div className={classNames({
@@ -43,8 +52,12 @@ const SelectCommon = ({ type = 'default', size = 'base', option, placeholder, on
                    })}
                    >   
                        {
-                            option.map(item => 
-                                <SelectOption key={item.value} itemName={item.name} value={item.value} onClick={changeSelectedName} size={size} selected={(selectedValue === item.value)} />
+                            options.map(item => 
+                                <SelectOption key={item.value}
+                                    itemName={item.name}
+                                    value={item.value}
+                                    onChange={changeSelectedName}
+                                    size={size} selected={(selectedValue === item.value)} />
                            )
                        }
                    </div>
--- a/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
+++ b/src/components/common/SelectCommon/SelectOption/SelectOption.tsx
@@ -2,16 +2,16 @@ import s from './SelectOption.module.scss'
 import classNames from 'classnames'

 interface Props{
-    onClick: (name: string, value: string) => void,
+    onChange: (value: string) => void,
    itemName: string,
    size: 'base' | 'large',
    value: string,
    selected?: boolean,
 }

-const SelectOption = ({onClick, itemName, size, value, selected} : Props) => {
-    const changeName  = () => {
-        onClick(itemName, value)
+const SelectOption = ({onChange, itemName, size, value, selected} : Props) => {
+    const handleChange = () => {
+        onChange(value)
    }
    return(
        <div className={classNames({
@@ -19,7 +19,7 @@ const SelectOption = ({onClick, itemName, size, value, selected} : Props) => {
            [s[size]] : !!size,
            [s.isChoose] : selected ,
        })}
-            onClick = {changeName}
+            onClick = {handleChange}
        >{itemName}</div>
    )
 }
--- a/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss
+++ b/src/components/common/SkeletonCommon/SkeletonImage/SkeletonImage.module.scss
@@ -1,7 +1,7 @@
@import '../../../../styles/utilities';

 .skeletonImage {
-    @apply relative;
+    @apply relative overflow-hidden;
    background: #DDDBDD;

    &.small {
--- a/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss
+++ b/src/components/common/SkeletonCommon/SkeletonParagraph/SkeletonParagraph.module.scss
@@ -1,6 +1,7 @@
@import '../../../../styles/utilities';

 .skeletonParagraph {
+    @apply overflow-hidden;
    margin: 0 1.6rem;

    .row {
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -51,5 +51,6 @@ export { default as LayoutCheckout} from './LayoutCheckout/LayoutCheckout'
 export { default as InputPasswordFiledInForm} from './InputPasswordFiledInForm/InputPasswordFiledInForm'
 export { default as InputFiledInForm} from './InputFiledInForm/InputFiledInForm'
 export { default as MessageCommon} from './MessageCommon/MessageCommon'
-
+export { default as ProductCardSkeleton} from './ProductCardSkeleton/ProductCardSkeleton'
+export { default as ListProductCardSkeleton} from './ListProductCardSkeleton/ListProductCardSkeleton'

--- a/src/components/contexts/FilterContext.tsx
+++ b/src/components/contexts/FilterContext.tsx
@@ -1,43 +0,0 @@
-import { createContext, ReactNode, useContext, useState } from "react";
-import { filterContextType } from "src/utils/types.utils";
-
-const contextDefaultValues: filterContextType = {
-    visible: false,
-    open: () => {},
-    close: () => {},
-};
-
-const FilterContext = createContext<filterContextType>(contextDefaultValues);
-
-export function useAuth() {
-    return useContext(FilterContext);
-}
-
-type FilterProviderProps = {
-    children: ReactNode;
-};
-
-export function FilterProvider({ children }: FilterProviderProps) {
-    const [visible, setVisible] = useState<boolean>(false);
-
-    const open = () => {
-        setVisible(true);
-    };
-
-    const close = () => {
-        setVisible(false);
-    };
-
-    const value = {
-        visible,
-        open,
-        close,
-    };
-    return (
-        <>
-            <FilterContext.Provider value={value}>
-                {children}
-            </FilterContext.Provider>
-        </>
-    );
-}
--- a/src/components/contexts/ProductFilter/ProductFilterContext.tsx
+++ b/src/components/contexts/ProductFilter/ProductFilterContext.tsx
@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+export type ProductFilterContextType = {
+    productFilterVisible: boolean;
+    toggleProductFilter: (visible?: boolean) => void;
+    openProductFilter: () => void;
+    closeProductFilter: () => void;
+};
+const DEFAULT_VALUE: ProductFilterContextType = {
+    productFilterVisible: false,
+    toggleProductFilter: () => { },
+    openProductFilter: () => { },
+    closeProductFilter: () => { },
+};
+
+export const ProductFilterContext = createContext<ProductFilterContextType>(DEFAULT_VALUE)
+
+export function useProductFilter() {
+    return useContext(ProductFilterContext);
+}
--- a/src/components/contexts/ProductFilter/ProductFilterProvider.tsx
+++ b/src/components/contexts/ProductFilter/ProductFilterProvider.tsx
@@ -0,0 +1,30 @@
+import { ReactNode, useState } from "react";
+import { ProductFilterContext } from "./ProductFilterContext";
+
+type Props = {
+    children: ReactNode;
+};
+
+export function ProductFilterProvider({ children }: Props) {
+    const [visible, setVisible] = useState<boolean>(false);
+
+    const closeProductFilter = () => {
+        setVisible(false);
+    };
+
+    const openProductFilter = () => {
+        setVisible(true);
+    };
+
+    const toggleProductFilter = () => {
+        setVisible(!visible);
+    };
+    
+    return (
+        <>
+            <ProductFilterContext.Provider value={{productFilterVisible: visible, closeProductFilter, openProductFilter, toggleProductFilter}}>
+                {children}
+            </ProductFilterContext.Provider>
+        </>
+    );
+}
--- a/src/components/contexts/index.ts
+++ b/src/components/contexts/index.ts
@@ -3,3 +3,6 @@ export * from './CartDrawer/CartDrawerProvider'

 export * from './Message/MessageContext'
 export * from './Message/MessageProvider'
+
+export * from './ProductFilter/ProductFilterContext'
+export * from './ProductFilter/ProductFilterProvider'
--- a/src/components/hooks/collection/useGetAllCollection.tsx
+++ b/src/components/hooks/collection/useGetAllCollection.tsx
@@ -5,8 +5,8 @@ import useSWR from 'swr';


 const useGetAllCollection =  () => {
-    const { data, ...rest } =  useSWR<GetCollectionsQuery>([getCollectionsNameQuery], gglFetcher)
-    return { collections: data?.collections, ...rest }
+    const { data, isValidating, ...rest } =  useSWR<GetCollectionsQuery>([getCollectionsNameQuery], gglFetcher)
+    return { collections: data?.collections.items || [], loading: isValidating, ...rest }
 }

 export default useGetAllCollection;
--- a/src/components/hooks/facets/useFacets.tsx
+++ b/src/components/hooks/facets/useFacets.tsx
@@ -5,7 +5,7 @@ import useSWR from 'swr'

 const useFacets = (options?: QueryFacetsArgs) => {
  const { data, isValidating, ...rest } = useSWR<GetAllFacetsQuery>([getAllFacetsQuery, options], gglFetcher)
-  return { items: data?.facets.items, totalItems: data?.facets.totalItems, loading: isValidating, ...rest }
+  return { facets: data?.facets.items, totalItems: data?.facets.totalItems, loading: isValidating, ...rest }
 }

 export default useFacets
--- a/src/components/hooks/product/index.ts
+++ b/src/components/hooks/product/index.ts
@@ -0,0 +1,3 @@
+export { default as useSearchProducts } from './useSearchProducts'
+
+
--- a/src/components/hooks/product/useSearchProducts.tsx
+++ b/src/components/hooks/product/useSearchProducts.tsx
@@ -0,0 +1,13 @@
+import { GetAllProductsQuery, QuerySearchArgs } from '@framework/schema'
+import { normalizeSearchResult } from '@framework/utils/normalize'
+import { getAllProductsQuery } from '@framework/utils/queries/get-all-products-query'
+import gglFetcher from 'src/utils/gglFetcher'
+import useSWR from 'swr'
+
+const useSearchProducts = (options?: QuerySearchArgs) => {
+  const { data, isValidating, ...rest } = useSWR<GetAllProductsQuery>([getAllProductsQuery, options], gglFetcher)
+
+  return { products: data?.search.items.map((item) => normalizeSearchResult(item)), totalItems: data?.search.totalItems, loading: isValidating, ...rest }
+}
+
+export default useSearchProducts
--- a/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
+++ b/src/components/modules/account/AccountPage/components/EditInfoModal/EditInfoModal.tsx
@@ -43,7 +43,7 @@ const EditInfoModal = ({ accountInfo, visible = false, closeModal }: EditInfoMod

                <div className="flex">
                    <div className={s.inputState}>
-                        <SelectCommon type="custom" placeholder="State" option={states} />
+                        <SelectCommon type="custom" placeholder="State" options={states} />
                    </div>

                    <div className={s.inputPostalCode}>
--- a/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/ShippingInfoForm/ShippingInfoForm.tsx
@@ -46,7 +46,7 @@ const ShippingInfoForm = ({onConfirm,id}: ShippingInfoFormProps) => {
        />
        <Inputcommon type="text" placeholder="City" ref={cityRef} />
        <div className={s.line}>
-          <SelectCommon option={option} type="custom" size="large">State</SelectCommon>
+          <SelectCommon options={option} type="custom" size="large">State</SelectCommon>
          <Inputcommon type="text" placeholder="Zip Code" ref={codeRef} />
        </div>
        <Inputcommon
--- a/src/components/modules/product-list/ProductListFilter/ProductListFilter.module.scss
+++ b/src/components/modules/product-list/ProductListFilter/ProductListFilter.module.scss
@@ -13,62 +13,52 @@
        @screen md {
            @apply flex;
        }
-        .categories{
-            padding-right: 2.4rem;
-            @apply hidden;
-            @screen md {
-                @apply block;
-            }
-            @screen xl{
-                @apply block;
-                width:25%;
-            }
-        }
        .list{
+            @apply w-full;
+            .top {
+                .left {
+                    @apply flex justify-between items-center;
+                }
+                
+                .iconFilter {
+                    @apply relative;
+                    &:focus {
+                        outline: none;
+                        filter: brightness(1.05);
+                    }
+                    &:focus-visible {
+                        outline: 2px solid var(--text-active);
+                    }
+                    .dot {
+                        @apply absolute;
+                        top: -0.08rem;
+                        right: -0.2rem;
+                        background-color: var(--negative);
+                        width: 1.2rem;
+                        height: 1.2rem;
+                        border-radius: 1.2rem;
+                    }
+                }
                @screen md {
                    @apply flex justify-between flex-wrap w-full;
                    margin: 1rem 0;
-            }
-            @screen xl {
-                width:75%;
-            }
-            .inner{
-                @screen md {
-                    @apply flex flex-col items-center justify-center;
-                }
-                .boxItem {
-                    @screen md {
-                        @apply flex justify-between flex-wrap;
-                        margin: 1rem 0;
-                    }
-                    .item {
-                        @screen md {
-                            width: calc(97% / 2);
-                            margin-top:1rem;
-                        }
-                        @screen lg{
-                            width: calc(97% / 3);
-                            margin-top:1rem;
-                        }
+                    .iconFilter {
+                        @apply hidden;
                    }
                }
            }
            
            .boxSelect{
                @apply w-auto;
-                // padding: 2.5rem 0;
                display: none;
                
-                @screen xl {
+                @screen md {
                    @apply block;
                    width: auto;
                    padding:0;
+                    margin-top: 1rem;
                }
-                .categorySelectCate{
-                    @screen xl {
-                        @apply hidden;
-                    }
-                }
+                
                label {
                    @apply font-bold topline ;
                    color:var(--text-active);
@@ -76,9 +66,6 @@
                        @apply hidden;
                    }
                }
-                .select{
-                    margin-top: 1rem;
-                }
            }
           
        }
--- a/src/components/modules/product-list/ProductListFilter/ProductListFilter.tsx
+++ b/src/components/modules/product-list/ProductListFilter/ProductListFilter.tsx
@@ -1,12 +1,25 @@
-import React from 'react'
-import { HeadingCommon, ProductList, SelectCommon } from 'src/components/common'
+import { ProductCard } from '@commerce/types/product'
+import { Collection, Facet, FacetValue, QuerySearchArgs } from '@framework/schema'
+import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
+import { HeadingCommon, ListProductCardSkeleton, ProductList } from 'src/components/common'
 import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon'
-import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation'
-import { BRAND, CATEGORY, FEATURED} from 'src/utils/constanst.utils'
-import {  PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data'
+import { useProductFilter } from 'src/components/contexts'
+import { useSearchProducts } from 'src/components/hooks/product'
+import { IconFilter } from 'src/components/icons'
+import { DEFAULT_PAGE_SIZE, QUERY_KEY, QUERY_SPLIT_SEPERATOR, ROUTE } from 'src/utils/constanst.utils'
+import { getFacetIdsFromCodes, getPageFromQuery, getProductSortParamFromQuery } from 'src/utils/funtion.utils'
 import s from './ProductListFilter.module.scss'
+import ProductsMenuNavigationTablet from './ProductsMenuNavigationTablet/ProductsMenuNavigationTablet'
+import ProductSort from './ProductSort/ProductSort'

-interface ProductListFilterProps {}
+interface ProductListFilterProps {
+  facets: Facet[]
+  collections: Collection[]
+  products: ProductCard[]
+  total: number
+
+}

 const BREADCRUMB = [
  {
@@ -14,49 +27,98 @@ const BREADCRUMB = [
    link: `#`,
  },
 ]
-const OPTIONSLECT = [
-	{
-		name: 'Most Viewed',
-		value: 'most-viewed',
-	},
-	{
-		name: 'Lastest Products',
-		value: 'lastest-products',
-	},
-	{
-		name: 'Recent Products',
-		value: 'recent-products',
-	},
-]

-const onModalClose = () => {

+const DEFAULT_SEARCH_ARGS = {
+  groupByProduct: true, take: DEFAULT_PAGE_SIZE
 }

-const ProductListFilter = (props: ProductListFilterProps) => {
+const ProductListFilter = ({ facets, collections, products, total }: ProductListFilterProps) => {
+  const router = useRouter()
+  const { openProductFilter } = useProductFilter()
+  const [initialQueryFlag, setInitialQueryFlag] = useState<boolean>(true)
+  const [optionQueryProduct, setOptionQueryProduct] = useState<QuerySearchArgs>({ input: DEFAULT_SEARCH_ARGS })
+  const { products: productSearchResult, totalItems, loading } = useSearchProducts(optionQueryProduct)
+  const [currentPage, setCurrentPage] = useState(0)
+
+  useEffect(() => {
+    const page = getPageFromQuery(router.query[QUERY_KEY.PAGE] as string)
+    setCurrentPage(page)
+  }, [router.query])
+
+  const onPageChange = (page: number) => {
+    setCurrentPage(page)
+
+    router.push({
+      pathname: ROUTE.PRODUCTS,
+      query: {
+        ...router.query,
+        [QUERY_KEY.PAGE]: page
+      }
+    },
+      undefined, { shallow: true }
+    )
+  }
+
+  useEffect(() => {
+    const query = { input: { ...DEFAULT_SEARCH_ARGS } } as QuerySearchArgs
+
+    const page = getPageFromQuery(router.query[QUERY_KEY.PAGE] as string)
+    query.input.skip = page * DEFAULT_PAGE_SIZE
+
+
+    const sortQuery = router.query[QUERY_KEY.SORTBY] as string
+    if (sortQuery) {
+      query.input.sort = getProductSortParamFromQuery(sortQuery)
+    }
+
+    // collections
+    const categoryQuery = router.query[QUERY_KEY.CATEGORY] as string
+    if (categoryQuery) {
+      query.input.collectionSlug = categoryQuery
+    }
+
+    // facets
+    const facetsQuery = [router.query[QUERY_KEY.FEATURED] as string, router.query[QUERY_KEY.BRAND] as string].join(QUERY_SPLIT_SEPERATOR)
+    if (facetsQuery) {
+      const facetsValue = [] as FacetValue[]
+      facets.map((item: Facet) => {
+        facetsValue.push(...item.values)
+        return null
+      })
+
+      query.input.facetValueIds = getFacetIdsFromCodes(facetsValue, facetsQuery.split(QUERY_SPLIT_SEPERATOR))
+    }
+
+    setOptionQueryProduct(query)
+    setInitialQueryFlag(false)
+  }, [router.query, facets])
+
  return (
    <div className={s.warpper}>
      <div className={s.breadcrumb}>
        <BreadcrumbCommon crumbs={BREADCRUMB} />
      </div>
      <div className={s.main}>
-        <div className={s.categories}>
-          <MenuNavigation categories={CATEGORY} heading="Categories" />
-          <MenuNavigation categories={BRAND} heading="Brands" />
-          <MenuNavigation categories={FEATURED} heading="featured" />
-        </div>
-
+        <ProductsMenuNavigationTablet facets={facets} collections={collections} />
        <div className={s.list}>
+          <div className={s.top}>
+            <div className={s.left}>
              <HeadingCommon align="left">SPECIAL RECIPES</HeadingCommon>
+              <button className={s.iconFilter} onClick={openProductFilter}>
+                <IconFilter />
+                <div className={s.dot}></div>
+              </button>
+            </div>

            <div className={s.boxSelect}>
-            <div className={s.categorySelectSort}>
-              <div className={s.select}>
-                <SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
+              <ProductSort />
            </div>
          </div>
-          </div>
-          <ProductList data={PRODUCT_DATA_TEST_PAGE} />
+          {
+            (!initialQueryFlag && loading && !productSearchResult) && <ListProductCardSkeleton count={DEFAULT_PAGE_SIZE} isWrap />
+          }
+          <ProductList data={initialQueryFlag ? products : (productSearchResult || [])} total={totalItems !== undefined ? totalItems : total} onPageChange={onPageChange} defaultCurrentPage={currentPage} />
        </div>
      </div>
    </div>
--- a/src/components/modules/product-list/ProductListFilter/ProductSort/ProductSort.tsx
+++ b/src/components/modules/product-list/ProductListFilter/ProductSort/ProductSort.tsx
@@ -0,0 +1,40 @@
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } from 'react';
+import { SelectCommon } from 'src/components/common';
+import { OPTIONS_SORT_PRODUCT, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
+
+const ProductSort = () => {
+    const router = useRouter()
+    const [sortValue, setSortValue] = useState<string>();
+
+    useEffect(() => {
+        const rs = router.query[QUERY_KEY.SORTBY] as string
+        if (rs) {
+            setSortValue(rs)
+        }
+    }, [router.query])
+
+    const onSortChange = (value: string) => {
+        setSortValue(value)
+        router.push({
+            pathname: ROUTE.PRODUCTS,
+            query: {
+                ...router.query,
+                [QUERY_KEY.SORTBY]: value
+            }
+        },
+            undefined, { shallow: true }
+        )
+    }
+
+    return (
+        <SelectCommon
+            options={OPTIONS_SORT_PRODUCT}
+            placeholder="Sort By"
+            value={sortValue}
+            onChange={onSortChange}
+        />
+    );
+};
+
+export default ProductSort;
--- a/src/components/modules/product-list/ProductListFilter/ProductsMenuNavigationTablet/ProductsMenuNavigationTablet.module.scss
+++ b/src/components/modules/product-list/ProductListFilter/ProductsMenuNavigationTablet/ProductsMenuNavigationTablet.module.scss
@@ -0,0 +1,12 @@
+
+.productsMenuNavigationTablet {
+    @apply hidden;
+    @screen md {
+        @apply block;
+        padding-right: 2.4rem;
+    }
+    @screen xl {
+        @apply block;
+        width: 25%;
+    }
+}
--- a/src/components/modules/product-list/ProductListFilter/ProductsMenuNavigationTablet/ProductsMenuNavigationTablet.tsx
+++ b/src/components/modules/product-list/ProductListFilter/ProductsMenuNavigationTablet/ProductsMenuNavigationTablet.tsx
@@ -0,0 +1,32 @@
+import { Collection, Facet } from '@framework/schema'
+import React from 'react'
+import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation'
+import { QUERY_KEY } from 'src/utils/constanst.utils'
+import s from './ProductsMenuNavigationTablet.module.scss'
+
+interface Props {
+  facets: Facet[]
+  collections: Collection[]
+
+}
+
+const ProductsMenuNavigationTablet = ({ facets, collections }: Props) => {
+  return (
+    <div className={s.productsMenuNavigationTablet}>
+      <MenuNavigation
+        heading="Categories"
+        categories={collections}
+        queryKey={QUERY_KEY.CATEGORY}
+        isSingleSelect={true} />
+      {
+        facets.map(item => <MenuNavigation
+          key={item.id}
+          queryKey={item.code}
+          categories={item.values}
+          heading={item.name} />)
+      }
+    </div>
+  )
+}
+
+export default ProductsMenuNavigationTablet
--- a/src/components/modules/recipes-list/RecipesList/RecipesList.tsx
+++ b/src/components/modules/recipes-list/RecipesList/RecipesList.tsx
@@ -189,13 +189,13 @@ const RecipesList = ({ data =recipe}:Props) => {
                        <div className={s.categorySelectCate}>
                            <label htmlFor="">Categories</label>
                            <div className={s.select}>
-                                <SelectCommon  option={CATEGORYSELECT} placeholder="Categories"/>
+                                <SelectCommon  options={CATEGORYSELECT} placeholder="Categories"/>
                            </div>
                        </div>
                        <div className={s.categorySelectSort}>
                            <label htmlFor="" >Sort By</label>
                            <div className={s.select}>
-                                 <SelectCommon option={OPTIONSLECT} placeholder="Sort By" />
+                                 <SelectCommon options={OPTIONSLECT} placeholder="Sort By" />
                            </div>
                        </div>
                    </div>
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -4,7 +4,7 @@
 :root {
  --primary: #5b9a74;
  --primary-light: #e3f2e9;
-  --primary-lightest: #effaf4;
+  --primary-lightest: #F1F8F4;

  --info-dark: #00317a;
  --info: #3468B7;
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -45,13 +45,23 @@ export const LOCAL_STORAGE_KEY = {
  TOKEN: 'token'
 }

+export const QUERY_SPLIT_SEPERATOR = ','
 export const QUERY_KEY = {
  TAB: 'tab',
  CATEGORY: 'category',
  BRAND: 'brand',
-  FEATURED: 'feature',
+  FEATURED: 'featured',
  SORTBY: 'sortby',
-  RECIPES: 'recipes'
+  RECIPES: 'recipes',
+  PAGE: 'page',
+}
+
+export const PRODUCT_SORT_OPTION_VALUE = {
+  NAME_ASC: 'name_asc',
+  NAME_DESC: 'name_desc',
+  PRICE_ASC: 'price_asc',
+  PRICE_DESC: 'price_desc',
+
 }

 export enum ProductFeature {
@@ -113,10 +123,31 @@ export const BRAND = [

 export const CODE_FACET_FEATURED = 'featured'
 export const CODE_FACET_DISCOUNT = 'discount'
+export const CODE_FACET_BRAND = 'brand'
 export const CODE_FACET_FEATURED_VARIANT = {
  FRESH: 'fresh',
 }

+export const OPTIONS_SORT_PRODUCT = [
+  {
+      name: 'By Name (A-Z)',
+      value: PRODUCT_SORT_OPTION_VALUE.NAME_ASC,
+  },
+  {
+      name: 'By Name (Z-A)',
+      value: PRODUCT_SORT_OPTION_VALUE.NAME_DESC,
+  },
+  {
+      name: 'Price (Low to High)',
+      value: PRODUCT_SORT_OPTION_VALUE.PRICE_ASC,
+  },
+  {
+      name: 'Price (High to Low)',
+      value: PRODUCT_SORT_OPTION_VALUE.PRICE_DESC,
+  },
+];
+
+
 export const FEATURED = [
  {
    name: 'Best Sellers',
--- a/src/utils/funtion.utils.ts
+++ b/src/utils/funtion.utils.ts
@@ -1,12 +1,60 @@
 import { Facet } from "@commerce/types/facet";
-import { FacetValue } from './../../framework/vendure/schema.d';
-import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT } from "./constanst.utils";
-import { PromiseWithKey } from "./types.utils";
+import { FacetValue, SearchResultSortParameter } from './../../framework/vendure/schema.d';
+import { CODE_FACET_DISCOUNT, CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT, PRODUCT_SORT_OPTION_VALUE } from "./constanst.utils";
+import { PromiseWithKey, SortOrder } from "./types.utils";

 export function isMobile() {
  return window.innerWidth < 768
 }

+export function getPageFromQuery(pageQuery: string) {
+  let page = 0
+  try {
+    page = +pageQuery
+    if (isNaN(page)) {
+      page = 0
+    }
+  } catch (err) {
+    page = 0
+  }
+  return page
+}
+
+
+export function getProductSortParamFromQuery(query: string) {
+  let rs = {} as SearchResultSortParameter
+  switch (query) {
+    case PRODUCT_SORT_OPTION_VALUE.NAME_ASC:
+      rs = {
+        name: SortOrder.Asc
+      }
+      break;
+
+    case PRODUCT_SORT_OPTION_VALUE.NAME_DESC:
+      rs = {
+        name: SortOrder.Desc
+      }
+      break;
+
+    case PRODUCT_SORT_OPTION_VALUE.PRICE_ASC:
+      rs = {
+        price: SortOrder.Asc
+      }
+      break;
+
+    case PRODUCT_SORT_OPTION_VALUE.PRICE_DESC:
+      rs = {
+        price: SortOrder.Desc
+      }
+      break;
+
+    default:
+      break;
+  }
+
+  return rs
+}
+
 export function removeItem<T>(arr: Array<T>, value: T): Array<T> {
  const index = arr.indexOf(value);
  if (index > -1) {
@@ -58,6 +106,16 @@ export function getFacetNamesFromIds(facets: FacetValue[], ids?: string[]): stri
  return names.join(", ")
 }

+export function getFacetIdsFromCodes(facets: FacetValue[], codes?: string[]): string[] {
+  if (!codes || codes?.length === 0) {
+    return []
+  }
+
+  const facetItems = facets.filter((item: FacetValue) => codes.includes(item.code))
+  const ids = facetItems.map((item: FacetValue) => item.id)
+  return ids
+}
+
 export function getAllPromies(promies: PromiseWithKey[]) {
  return promies.map(item => item.promise)
 }
--- a/src/utils/types.utils.ts
+++ b/src/utils/types.utils.ts
@@ -46,6 +46,11 @@ export interface CheckOutForm {

 export type MouseAndTouchEvent = MouseEvent | TouchEvent

+export enum SortOrder {
+    Asc = 'ASC',
+    Desc = 'DESC',
+}
+
 export type filterContextType = {
    visible: boolean;
    open: () => void;
				`@@ -0,0 +1,3 @@`
				`export { default as useSearchProducts } from './useSearchProducts'`