✨ feat: featured products

:%s
2025-07-23 04:36:49 +00:00 · 2021-10-04 19:36:47 +07:00
parent 6ad8f75c67
commit 47107e2702
9 changed files with 174 additions and 159 deletions
--- a/framework/commerce/types/product.ts
+++ b/framework/commerce/types/product.ts
@@ -1,4 +1,4 @@
-import { CurrencyCode } from './../../vendure/schema.d';
+import { CurrencyCode, FacetValue } from './../../vendure/schema.d';
 import { FacetValueFilterInput, LogicalOperator, SearchResultSortParameter } from "@framework/schema"

 export type ProductImage = {
@@ -54,9 +54,11 @@ export type ProductCard = {
  imageSrc: string
  price: number
  currencyCode: CurrencyCode
-  oldPrice?: number,
+  oldPrice?: number
  discount?: number
  weight?: number
+  facetValueIds?: string[],
+  collectionIds?: string[],
  // TODO: collection
  category?: string,
  isNotSell?: boolean
--- a/framework/vendure/schema.d.ts
+++ b/framework/vendure/schema.d.ts
@@ -1,3 +1,4 @@
+import { FacetValue } from './schema.d';
 export type Maybe<T> = T | null
 export type Exact<T extends { [key: string]: unknown }> = {
  [K in keyof T]: T[K]
@@ -3038,7 +3039,7 @@ export type SearchResultFragment = { __typename?: 'SearchResult' } & Pick<
  SearchResult,
  'productId' | 'sku' | 'productName' | 'description' | 'slug' | 'sku' | 'currencyCode'
  | 'productAsset' | 'price' | 'priceWithTax' | 'currencyCode' 
-  | 'collectionIds' 
+  | 'collectionIds' | 'facetValueIds' | 'collectionIds'
 > & {
    productAsset?: Maybe<
      { __typename?: 'SearchResultAsset' } & Pick<
--- a/framework/vendure/utils/fragments/search-result-fragment.ts
+++ b/framework/vendure/utils/fragments/search-result-fragment.ts
@@ -19,6 +19,8 @@ export const searchResultFragment = /* GraphQL */ `
        min
        max
      }
-    }
+    },
+    facetValueIds,
+    collectionIds,
  }
 `
--- a/framework/vendure/utils/normalize.ts
+++ b/framework/vendure/utils/normalize.ts
@@ -1,16 +1,17 @@
-import { Product, ProductCard } from '@commerce/types/product'
 import { Cart } from '@commerce/types/cart'
+import { ProductCard } from '@commerce/types/product'
 import { CartFragment, SearchResultFragment } from '../schema'

 export function normalizeSearchResult(item: SearchResultFragment): ProductCard {
  return {
-
    id: item.productId,
    name: item.productName,
    slug: item.slug,
    imageSrc: item.productAsset?.preview ? item.productAsset?.preview + '?w=800&mode=crop' : '',
    price: (item.priceWithTax as any).min / 100,
    currencyCode: item.currencyCode,
+    facetValueIds: item.facetValueIds,
+    collectionIds: item.collectionIds,
    
    // TODO:
    // oldPrice: item.price
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,7 +5,7 @@ import { GetStaticPropsContext } from 'next';
 import { Layout } from 'src/components/common';
 import { FeaturedProductsCarousel, FreshProducts, HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
 import HomeSpice from 'src/components/modules/home/HomeSpice/HomeSpice';
-import { getAllFeaturedFacetId, getFreshProductFacetId } from 'src/utils/funtion.utils';
+import { getAllFeaturedFacetId, getFreshFacetId } from 'src/utils/funtion.utils';

 interface Props {
  freshProducts: ProductCard[],
@@ -18,11 +18,11 @@ export default function Home({ freshProducts, featuredProducts }: Props) {
      <HomeBanner />
      <HomeFeature />
      <HomeCategories />
-      <FreshProducts data={freshProducts}/>
+      <FreshProducts data={freshProducts} />
      <HomeCollection />
      <HomeVideo />
      <HomeSpice />
-      <FeaturedProductsCarousel />
+      <FeaturedProductsCarousel data={featuredProducts} />
      <HomeCTA />
      <HomeRecipe />
      <HomeSubscribe />
@@ -48,7 +48,7 @@ export async function getStaticProps({


  const freshProductvariables: ProductVariables = {}
-  const freshFacetId = getFreshProductFacetId(facets)
+  const freshFacetId = getFreshFacetId(facets)

  if (freshFacetId) {
    freshProductvariables.facetValueIds = [freshFacetId]
@@ -60,6 +60,7 @@ export async function getStaticProps({
  })

  const allFeaturedFacetId = getAllFeaturedFacetId(facets)
+  console.log("featured** ", allFeaturedFacetId)
  const featuredProductsPromise = commerce.getAllProducts({
    variables: {
      facetValueIds: allFeaturedFacetId
@@ -68,12 +69,15 @@ export async function getStaticProps({
    preview,
  })

-
  try {
-    const rs = await Promise.all([freshProductsPromise, featuredProductsPromise])
+    const rs = await Promise.all([
+      freshProductsPromise,
+      featuredProductsPromise,
+    ])

    return {
      props: {
+        facets,
        freshProducts: freshFacetId ? rs[0].products : [],
        featuredProducts: rs[1].products
      },
--- a/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
+++ b/src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
@@ -1,39 +1,53 @@
+import { ProductCard } from '@commerce/types/product'
+import Link from 'next/link'
 import React from 'react'
-import { FeaturedProductProps } from 'src/utils/types.utils'
-import s from './FeaturedProductCard.module.scss'
-import { LANGUAGE } from '../../../utils/language.utils'
-import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
-import ButtonCommon from '../ButtonCommon/ButtonCommon'
+import { ROUTE } from 'src/utils/constanst.utils'
 import { ImgWithLink } from '..'
-export interface FeaturedProductCardProps extends FeaturedProductProps {
+import { LANGUAGE } from '../../../utils/language.utils'
+import ButtonCommon from '../ButtonCommon/ButtonCommon'
+import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
+import s from './FeaturedProductCard.module.scss'
+export interface FeaturedProductCardProps extends ProductCard {
  buttonText?: string
+  featuredFacetId?: string,
 }

 const FeaturedProductCard = ({
  imageSrc,
-  title,
-  subTitle,
+  name,
+  slug,
  price,
-  originPrice,
+  currencyCode,
  buttonText = LANGUAGE.BUTTON_LABEL.BUY_NOW,
 }: FeaturedProductCardProps) => {
  return (
    <div className={s.featuredProductCardWarpper}>
      <div className={s.left}>
-        <ImgWithLink src={imageSrc} alt={title}/>
+        <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
+          <a>
+            <ImgWithLink src={imageSrc} alt={name} />
+          </a>
+        </Link>
      </div>
      <div className={s.right}>
        <div className={s.rightTop}>
-          <div className={s.title}>{title}</div>
-          <div className={s.subTitle}>{subTitle}</div>
+          <Link href={`${ROUTE.PRODUCT_DETAIL}/${slug}`}>
+            <a>
+              <div className={s.title}>{name}</div>
+            </a>
+          </Link>
+
+          {/* TODO: */}
+          {/* <div className={s.subTitle}>{subTitle}</div> */}
          <div className={s.priceWrapper}>
-            <div className={s.price}>{price} </div>
-            <div className={s.originPrice}>{originPrice} </div>
+            <div className={s.price}>{price} {currencyCode}</div>
+            {/* TODO: */}
+            {/* <div className={s.originPrice}>{originPrice} </div> */}
          </div>
        </div>
        <div className={s.buttonWarpper}>
          <div className={s.icon}>
-            <ButtonIconBuy size='default'/>
+            <ButtonIconBuy size='default' />
          </div>
          <div className={s.button}>
            <ButtonCommon>{buttonText}</ButtonCommon>
--- a/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx
+++ b/src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx
@@ -1,31 +1,15 @@
+import { ProductCard } from '@commerce/types/product'
 import React from 'react'
 import { ResponsiveType } from 'react-multi-carousel'
 import { CarouselCommon, FeaturedProductCard,HeadingCommon} from 'src/components/common'
 import { FeaturedProductCardProps } from 'src/components/common/FeaturedProductCard/FeaturedProductCard'
 import s from "./FeaturedProductsCarousel.module.scss"
 interface FeaturedProductsCarouselProps {
-  title?: string
+  title?: string,
+  data: ProductCard[]
 }

-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 RESPONSIVE: ResponsiveType = {
    hugeScreen: {
      breakpoint: { max: 9999, min: 1500 },
@@ -78,13 +62,13 @@ const dataDemo:FeaturedProductCardProps[] = [{
    },
  }

-const FeaturedProductsCarousel = ({title="Featured Products"}: FeaturedProductsCarouselProps) => {
+const FeaturedProductsCarousel = ({title="Featured Products", data}: FeaturedProductsCarouselProps) => {
    return (
        <div className={s.warpper}>
           <div className={s.heading}>
            <HeadingCommon>{title}</HeadingCommon>
          </div>
-            <CarouselCommon<FeaturedProductCardProps> data={dataDemo} Component={FeaturedProductCard} itemKey="featured-products" responsive={RESPONSIVE}/>
+            <CarouselCommon<FeaturedProductCardProps> data={data} Component={FeaturedProductCard} itemKey="featured-products" responsive={RESPONSIVE}/>
        </div>
    )
 }
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -4,41 +4,41 @@ export const BLUR_DATA_IMG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEA
 export const DEFAULT_IMG = DefaultImg

 export const SOCIAL_LINKS = {
-    FB: 'FB',
-    TWITTER: 'TWITTER',
-    YOUTUBE: 'YOUTUBE',
-    IG: 'IG',
+  FB: 'FB',
+  TWITTER: 'TWITTER',
+  YOUTUBE: 'YOUTUBE',
+  IG: 'IG',
 }

 export const ROUTE = {
-    HOME: '/',
-    ABOUT: '/about',
-    ACCOUNT: '/account',
+  HOME: '/',
+  ABOUT: '/about',
+  ACCOUNT: '/account',

-    PRODUCTS: '/products',
-    PRODUCT_DETAIL: '/product',
+  PRODUCTS: '/products',
+  PRODUCT_DETAIL: '/product',

-    BLOGS: '/blogs',
-    BLOG_DETAIL: '/blog',
+  BLOGS: '/blogs',
+  BLOG_DETAIL: '/blog',

-    RECIPES: '/recipes',
-    RECIPE_DETAIL: '/recipe',
+  RECIPES: '/recipes',
+  RECIPE_DETAIL: '/recipe',

-    NOTIFICATION: '/notifications',
-    BUSSINESS: '/bussiness',
-    CONTACT: '/contact',
-    CHECKOUT: '/checkout',
-    FAQ: '/faq',
-    CUSTOMER_SERVICE: '/customer-service',
-    TERM_CONDITION: '/term-condition',
-    PRIVACY_POLICY: '/privacy-policy',
-    FORGOT_PASSWORD: '/forgot-password'
+  NOTIFICATION: '/notifications',
+  BUSSINESS: '/bussiness',
+  CONTACT: '/contact',
+  CHECKOUT: '/checkout',
+  FAQ: '/faq',
+  CUSTOMER_SERVICE: '/customer-service',
+  TERM_CONDITION: '/term-condition',
+  PRIVACY_POLICY: '/privacy-policy',
+  FORGOT_PASSWORD: '/forgot-password'
 }

 export const ACCOUNT_TAB = {
-    CUSTOMER_INFO: '',
-    ORDER: 'orders',
-    FAVOURITE: 'wishlist',
+  CUSTOMER_INFO: '',
+  ORDER: 'orders',
+  FAVOURITE: 'wishlist',
 }

 export const LOCAL_STORAGE_KEY = {
@@ -46,101 +46,99 @@ export const LOCAL_STORAGE_KEY = {
 }

 export const QUERY_KEY = {
-    TAB: 'tab',
-    CATEGORY: 'category',
-    BRAND: 'brand',
-    FEATURED: 'feature',
-    SORTBY:'sortby',
-    RECIPES:'recipes'
+  TAB: 'tab',
+  CATEGORY: 'category',
+  BRAND: 'brand',
+  FEATURED: 'feature',
+  SORTBY: 'sortby',
+  RECIPES: 'recipes'
 }

 export enum ProductFeature {
-    BestSellers = 'Best Sellers',
-    Sales = 'Sales',
-    NewItem = 'New Item',
-    Viewed = 'Viewed',
+  BestSellers = 'Best Sellers',
+  Sales = 'Sales',
+  NewItem = 'New Item',
+  Viewed = 'Viewed',
 }

 export const KEY = {
-    ENTER: 'Enter',
+  ENTER: 'Enter',
 }

 export const OPTION_ALL = 'all';
-export const DEFAULT_PAGE_SIZE=20;
+export const DEFAULT_PAGE_SIZE = 20;


 export const CATEGORY = [
-    {
-      name: 'All',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=${OPTION_ALL}`,
-    },
-    {
-      name: 'Veggie',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=veggie`,
-    },
-    {
-      name: 'Seafood',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=seafood`,
-    },
-    {
-      name: 'Frozen',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=frozen`,
-    },
-    {
-      name: 'Coffee Bean',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=coffee_bean`,
-    },
-    {
-      name: 'Sauce',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=sauce`,
-    },
-  ]
+  {
+    name: 'All',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=${OPTION_ALL}`,
+  },
+  {
+    name: 'Veggie',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=veggie`,
+  },
+  {
+    name: 'Seafood',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=seafood`,
+  },
+  {
+    name: 'Frozen',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=frozen`,
+  },
+  {
+    name: 'Coffee Bean',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=coffee_bean`,
+  },
+  {
+    name: 'Sauce',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.CATEGORY}=sauce`,
+  },
+]

-  export  const BRAND = [
-    {
-      name: 'Maggi',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=maggi`,
-    },
-    {
-      name: 'Chomilex',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=chomilex`,
-    },
-    {
-      name: 'Chinsu',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=chinsu`,
-    },
-  ]
+export const BRAND = [
+  {
+    name: 'Maggi',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=maggi`,
+  },
+  {
+    name: 'Chomilex',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=chomilex`,
+  },
+  {
+    name: 'Chinsu',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=chinsu`,
+  },
+]

-export const FACET = {
-  FEATURE: {
-    PARENT_NAME: 'Featured',
-    FRESH: 'Fresh',
-    BEST_SELLERS: 'Best seller'
-  }
+export const CODE_FACET_FEATURED = 'featured'
+export const CODE_FACET_FEATURED_VARIANT = {
+  FRESH: 'fresh',
+  BEST_SELLERS: 'best-sellers'
 }

 export const FEATURED = [
-    {
-      name: 'Best Sellers',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=best_sellers`,
-    },
-    {
-      name: 'Sales',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=sales`,
-    },
-    {
-      name: 'New Item',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=new_item`,
-    },
-    {
-      name: 'Viewed',
-      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=viewed`,
-    },
-  ]
+  {
+    name: 'Best Sellers',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=best_sellers`,
+  },
+  {
+    name: 'Sales',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=sales`,
+  },
+  {
+    name: 'New Item',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=new_item`,
+  },
+  {
+    name: 'Viewed',
+    link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.FEATURED}=viewed`,
+  },
+]

-export const DEFAULT_BLOG_PAGE_SIZE=6;
+export const DEFAULT_BLOG_PAGE_SIZE = 6;

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

 export const STATE_OPTIONS = [
  {
--- a/src/utils/funtion.utils.ts
+++ b/src/utils/funtion.utils.ts
@@ -1,6 +1,6 @@
-import { FacetValue } from './../../framework/vendure/schema.d';
 import { Facet } from "@commerce/types/facet";
-import { FACET } from "./constanst.utils";
+import { FacetValue } from './../../framework/vendure/schema.d';
+import { CODE_FACET_FEATURED, CODE_FACET_FEATURED_VARIANT } from "./constanst.utils";

 export function isMobile() {
  return window.innerWidth < 768
@@ -14,15 +14,24 @@ export function removeItem<T>(arr: Array<T>, value: T): Array<T> {
  return [...arr];
 }

-export function getFreshProductFacetId(facets: Facet[]) {
-  const featuredFacet = facets.find((item: Facet) => item.name === FACET.FEATURE.PARENT_NAME)
-  const freshFacetValue = featuredFacet?.values.find((item: FacetValue) => item.name === FACET.FEATURE.FRESH)
+function findFacetByCode(code: string, facets?: Facet) {
+  return facets?.values.find((item: FacetValue) => item.code === code)
+}
+
+export function getFeaturedFacetId(facets: Facet[]) {
+  const featuredFacet = facets.find((item: Facet) => item.code === CODE_FACET_FEATURED)
+  return featuredFacet?.id
+}
+
+export function getFreshFacetId(facets: Facet[]) {
+  const featuredFacet = facets.find((item: Facet) => item.code === CODE_FACET_FEATURED)
+  const freshFacetValue = findFacetByCode(CODE_FACET_FEATURED_VARIANT.FRESH, featuredFacet)

  return freshFacetValue?.id
 }

 export function getAllFeaturedFacetId(facets: Facet[]) {
-  const featuredFacet = facets.find((item: Facet) => item.name === FACET.FEATURE.PARENT_NAME)
+  const featuredFacet = facets.find((item: Facet) => item.code === CODE_FACET_FEATURED)
  const rs = featuredFacet?.values.map((item: FacetValue) => item.id)

  return rs