WooGraphQLチュートリアルCh 3: 店舗ページ + Next.jsでのナビゲーション

ヘッドアップ: このチュートリアルでは、以前のWooGraphQLリリースをカバーし、最新のものはありません。書き換え版が進行中です。公開したらここからリンクします。

https://www.youtube.com/embed/nhlexP-KtSo

コンテンツの表

ヘッドレス電子商取引アプリケーションの作成に関するチュートリアルシリーズの第3部へようこそ! この章は、WooGraphQL + Next 13. を使用してショップのリストページを作成するステップバイステップのウォークスルーです。電子商取引プラットフォームのナビゲーションシステムとショップページを実装する焦点です。

WooGraphQL の店舗一覧ページ

フィルタリング機能の実装や各コンポーネントの更新により、店舗ページを少しずつ作成し、完成します。遅延なくスタート!

Part 1: ルートレイアウトの編集

最初に、ルートレイアウトを変更して、トップナビゲーションを含めます。

1。 新着情報 /app/layout.tsx: : :

// アプリ/レイアウト.tsx
import {
  OrderEnum,
  TermObjectsConnectionOrderbyEnum,
  fetchCategories,
} from '@/graphql';

import { TopNav, NavItem } from '@/server/TopNav';
import { Toaster } from '@/ui/toaster';

import './globals.css';

export const metadata = {
  title: process.env.SITE_NAME,
  description: process.env.SITE_DESCRIPTION,
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const categories = await fetchCategories(
    5,
    1,
    {
    orderby: TermObjectsConnectionOrderbyEnum.COUNT,
    order: OrderEnum.DESC
    }
  ) || [];
  const menu: NavItem[] = [
    ...categories.map((category) => ({
        label: category.name as string,
        href: `/${category.slug}`,
    })),
  ];

  return (
    <html lang="en">
      <body>
        <TopNav menu={menu}/>
        <main className="w-full">
          {children}
        </main>
        <Toaster/>
      </body>
    </html>
  );
}

新しいレイアウトは、 TopNav WooGraphQLサーバーから。これは、GraphQL エンドポイントから取得された製品カテゴリでナビゲーションメニューをポップアップします。また、利用者の通知やフィードバックのためにTasterをインポートします。

2。 作成する server/TopNav/index.ts: : :

// サーバ/TopNav/index.ts
export * from './TopNav';

このファイルは、バレルファイルとして機能しています。 ./TopNav 一度に、コードの他の場所でインポートを簡素化します。これは、関連するテストやローカルユーティリティファイルを分離するための一般的な練習です。このパターンを期待して、すべてのコンポーネントに使用されます。 /server. 先に進むと、コンポーネントのバレルファイルを例外として表示しません。

3。 作成する server/TopNav/TopNav.tsx: : :

// サーバ/TopNav/TopNav.tsx
import { NavLink } from '@/ui/NavLink';
import { UserNav } from '@/client/UserNav';

export interface NavItem {
    label: string;
    href: string;
    cta?: boolean;
}

export interface TopNavProps {
    menu: NavItem[];
}

export function TopNav({ menu }: TopNavProps) {
  return (
    <nav className="w-full bg-white min-h-24 py-4 px-4">
      <ul className="max-w-screen-lg m-auto w-full flex flex-row gap-x-4 justify-end items-center">
        <h1>{process.env.SITE_NAME}</h1>
        {menu.map((item, i) => (
          <li key={i} className="group">
            <NavLink href={item.href}>
              {item.label}
            </NavLink>
          </li>
        ))}
      </ul>
    </nav>
  );
}

このファイルが定義されます。 TopNav コンポーネント、カテゴリ(もしあれば)とサイトブランディングのリストを含む全幅のナビゲーションバー。私達の場合 layout.tsx 一番人気のカテゴリは5つあります。

パート2:ショップページとショップページサーバーコンポーネントを作成する

そこで、商品がリストできる店舗ページを作成します。

1。 リファクタ app/page.tsx: : :

// アプリ/ページ.tsx
import {
  fetchProducts,
  fetchCategories,
  fetchColors,
} from '@/graphql';
import { Shop } from '@/server/Shop';

export default async function ShopPage() {
  const products = await fetchProducts(20, 0);
  const categories = await fetchCategories(20, 0, { hideEmpty: true }) || [];
  const colors = await fetchColors(20, 0, { hideEmpty: true }) || [];

  if (!products) return (
    <h1>Page not found</h1>
  );

  return (
    <Shop
      products={products}
      categories={categories}
      colors={colors}
/>
  );
}

グラフQLのエンドポイントから製品、カテゴリ、色を新たに実装し、それらを表示します。 Shop コンポーネント。このコンポーネントは、フル製品リスト、カテゴリ、およびカラーフィルタのレンダリングを担当しています。

2。 Shopコンポーネントを作成する /server/Shop/Shop.tsx: : :

// サーバー/ショップ/ショップ/ショップ
import { Product, ProductCategory, PaColor } from '@/graphql';
import { ShopCategories } from "@/client/ShopCategories";
import { PaColorPicker } from '@/client/PaColorPicker';
import { SearchBar } from '@/client/SearchBar';
import { ProductListing } from '@/client/ProductListing';
import { ShopSidebar } from '@/server/ShopSidebar';

export interface ShopProps {
    products: Product[];
    categories?: ProductCategory[];
    colors: PaColor[];
}

export function Shop(props: ShopProps) {
  const {
    products,
    categories,
    colors,
  } = props;

  return (
    <div className="w-full flex max-w-screen-lg mx-auto">
      <ShopSidebar>
        {categories && (
        <>
          <p className="font-serif text-lg font-bold mb-2">Categories</p>
          <ShopCategories categories={categories}/>
        </>
        )}
        <p className="font-serif text-lg font-bold mb-2">Colors</p>
        <PaColorPicker colors={colors}/>
      </ShopSidebar>
      <div className="w-full px-4 lg:w-3/4">
        <p className="font-serif text-lg font-bold mb-2">Search</p>
        <SearchBar/>
        <p className="font-serif text-lg font-bold mb-2">Results</p>
        <ProductListing products={products}/>
      </div>
    </div>
  );
}

ショップコンポーネントは、カテゴリとカラーフィルタと検索バーと製品リストのメインエリアでサイドバーを表示します。複数の子コンポーネントを利用し、次のコンポーネントを作成します。

3。 ShopSidebarコンポーネントを作成します。

// サーバー/ショップサイドバー/ショップサイドバー
import { PropsWithChildren } from 'react';

import {
  Sheet,
  SheetContent,
  SheetTrigger,
  SheetFooter,
  SheetClose,
} from '@/ui/sheet';
import { Button } from '@/ui/button';

export function ShopSidebar({ children }: PropsWithChildren) {
  return (
    <>
      <Sheet>
        <SheetTrigger asChild className="lg:hidden w-16 fixed inset-x-0 mx-auto bottom-10 z-30">
          <Button type="button">
            Open
          </Button>
        </SheetTrigger>
        <SheetContent>
          {children}
          <SheetFooter>
            <SheetClose asChild className="mt-4">
              <Button className="w-full flex items-center gap-x-2" type="button">
                Close
              </Button>
            </SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
      <div className="hidden lg:block w-1/4 px-4">
        {children}
      </div>
    </>
  );
}

ザ・オブ・ザ・ ShopSidebar コンポーネントは、シートスタイルのサイドナビゲーションをモバイルビューに提供しています。 shadcn/ui コンポーネント。ボタンに崩壊し、クリックしたときに拡大し、その子供(カテゴリとカラーフィルタ)を明らかにします。より大きな画面では、サイドバーは常に表示されます。

パート3:ショップページクライアントコンポーネントを作成する

1。 クライアントコンポーネントのバレルファイルを作成する /client/ShopCategories/index.ts: : :

// クライアント/ショップカテゴリ/インデックス.tsx
'use client';
export * from './ShopCategories';

サーバコンポーネントのバレルファイルと同様、例外 'use client'; ファイルの上部にある。

2。 作成する ShopCategories コンポーネント:

// クライアント/ショップカテゴリ/ショップカテゴリ.tsx
import Link from 'next/link';

import { cn } from '@/utils/ui';
import { ProductCategory } from '@/graphql';

import { Badge } from '@/ui/badge';
import { NavLink } from '@/ui/NavLink';

export interface ShopCategoriesProps {
  categories: ProductCategory[];
}

export function ShopCategories({ categories }: ShopCategoriesProps) {
  return (
    <ul className="mb-4 max-h-[40vh] lg:max-h-[25vh] overflow-y-scroll scrollbar-thin scrollbar-corner-rounded scrollbar-thumb-ring">
      {categories.map((category) => {
        return (
          <li className="group py-2" key={category.id}>
            <NavLink href="#">
              {category.name}
            </NavLink>
          </li>
        );
      })}
    </ul>
  );
}

ザ・オブ・ザ・ ShopCategories コンポーネントは、フェッチされた製品カテゴリを取り、スクロール可能なリストにそれらをリストします。各カテゴリはクリック可能ですが、リンクは機能しません。

3。 作成する PaColorPicker コンポーネント: : :

// クライアント/PaColorPicker/PaColorPicker.tsx
import { cn } from '@/utils/ui';
import { PaColor } from '@/graphql';

import { NavLink } from '@/ui/NavLink';

interface ColorSwatchProps {
  color: string;
  circle?: boolean;
  small?: boolean;
}

function ColorSwatch({ color, circle, small }: ColorSwatchProps) {
  return (
    <div
      className={cn(
          circle ? 'rounded-full' : 'rounded',
          small ? 'w-4 h-4' : 'w-6 h-6',
      )}
      style={{ backgroundColor: color }}
/>
  );
}

export interface PaColorPickerProps {
  colors: PaColor[];
}

export function PaColorPicker({ colors }: PaColorPickerProps) {
  return (
    <ul className="mb-4 max-h-[40vh] lg:max-h-[25vh] overflow-y-scroll scrollbar-thin scrollbar-corner-rounded scrollbar-thumb-ring">
      {colors.map((color) => {
        return (
          <li className="group py-4" key={color.id}>
            <NavLink href="#" className="px-0 flex gap-2">
              <ColorSwatch color={color.slug as string}/>
              {color.name}
            </NavLink>
          </li>
        );
      })}
    </ul>
  );
}

ザ・オブ・ザ・ PaColorPicker コンポーネントは、GraphQL エンドポイントから取得された色データを使用してカラーフィルタのリストを表示します。各色は、 ColorSwatch 色の名前。カテゴリーと同様に、カラーフィルタはクリック可能ですが、リンクは機能しません。

4。 作成する ProductListing コンポーネント:

// クライアント/製品一覧/製品一覧/製品一覧/tsx
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';

import { cn } from '@/utils/ui';
import { Product, SimpleProduct } from '@/graphql';
import { useIsMobile } from '@/hooks/mobile';
import { Image } from '@/ui/Image';
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/ui/card";

export interface ProductListingProps {
  products: Product[];
}

const pageSize = 12;

export function ProductListing({ products }: ProductListingProps) {
  const { push } = useRouter();
  const isMobile = useIsMobile();
  const maxPages = 5;
  const pageCount = Math.floor((products).length / pageSize);
  const hasNext = page < pageCount;
  const hasPrev = page> 1;

  const displayProducts = products.slice((page - 1) * pageSize, page * pageSize);

  return (
    <>
      <p className="font-semibold mb-4">Showing {displayProducts.length} of {(filteredProducts || products).length} items</p>
      <div className="flex flex-wrap justify-center md:justify-start gap-4">
        {displayProducts.map((product) => {
          const sourceUrl = product.image?.sourceUrl;
          const altText = product.image?.altText || '';
          return (
            <Link href={`/product/${product.slug}`} key={product.id}>
              <Card className="w-44 md:w-36">
                <CardHeader className="p-4">
                  <CardTitle className="font-serif whitespace-nowrap">{product.name}</CardTitle>
                  {sourceUrl && (
                    <Image
                        width={176}
                        height={176}
                        className="w-full"
                        src={sourceUrl}
                        alt={altText}
                        ratio={1 / 1}
                        fill={false}
/>
                  )}
                </CardHeader>
                <CardContent className="p-4">
                  <p className="text-sm truncate">{product.shortDescription}</p>
                </CardContent>
                <CardFooter className="p-4">
                  <p className="font-serif font-bold">{(product as SimpleProduct).price}</p>
                </CardFooter>
              </Card>
            </Link>
          );
        })}
      </div>
      <div className="flex justify-center my-4 gap-x-2 text-sms">
        <Link
            href="#"
            role="button"
            className={cn(
                hasPrev ? 'text-primary-foreground' : 'text-gray-400 opacity-50 pointer-events-none',
                'self-center rounded-md text-sm font-medium transition-colors',
                'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
                'bg-primary shadow hover:bg-primary/90 h-9 px-4 py-2',
            )}
            aria-label="Previous page"
            shallow
>
            Previous
        </Link>
        <div className="flex flex-wrap justify-center gap-2">
          {Array.from({ length: Math.min(pageCount, maxPages) }).map((_, index) => {
            const pageNumber = page> Math.floor(maxPages / 2)
            ? (page - Math.floor(maxPages / 2)) + index
            : index + 1;
            return (
              <Link
                key={index}
                href="#"
                role="button"
                className={cn(
                  page !== pageNumber ? 'text-primary-foreground' : 'text-gray-400 opacity-50 pointer-events-none',
                  'rounded-md text-sm font-medium transition-colors',
                  'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
                  'bg-primary shadow hover:bg-primary/90 h-9 px-4 py-2',
                )}
                aria-label={`Page ${pageNumber}`}
                shallow
>
                  {pageNumber}
              </Link>
            )
          })}
        </div>
        <Link
          href="#"
          role="button"
          className={cn(
            hasNext ? 'text-primary-foreground' : 'text-gray-400 opacity-50 pointer-events-none',
            'self-center rounded-md text-sm font-medium transition-colors',
            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
            'bg-primary shadow hover:bg-primary/90 h-9 px-4 py-2',
          )}
          aria-label="Next page"
          shallow
>
          Next
        </Link>
      </div>
    </>
  );
}

ザ・オブ・ザ・ ProductListing 作成したコンポーネントは、特定の製品をクリックして製品の詳細を表示することができます。ザ・オブ・ザ・ pageSize 定数では、ページごとに表示される製品数とページネーションセクションによって、ユーザーはさまざまなページを閲覧できます。

製品リストは、ページサイズで商品総数を分割することによって計算される現在のページ番号に基づいてスライスされます。各製品は、画像、名前、および短い説明でカードに表示されます。カードをクリックすると、詳細な製品ビューが表示されます。

5。 作成する SearchBar コンポーネント:

// クライアント/SearchBar/SearchBar.tsx
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';

import { Input } from "@/ui/input";

export function SearchBar() {
  const { push } = useRouter();
  const [searchInput, setSearchInput] = useState(search);
  const [debouncedSearchInput, setDebouncedSearchInput] = useState(searchInput);

  useEffect(() => {
    setSearchInput(search);
  }, [search]);

  useEffect(() => {
    const timeout = setTimeout(() => {
    setDebouncedSearchInput(searchInput);
    }, 500);
    return () => clearTimeout(timeout);
  }, [searchInput]);

  return (
    <Input
      className="mb-4"
      value={searchInput}
      onChange={(event) => setSearchInput(event.target.value)}
/>
  );
}

ザ・オブ・ザ・ SearchBar コンポーネントは、ユーザーが製品を検索することができます。ユーザの入力はローカルの状態で管理され、ユーザが入力を変更してから500ミリ秒が経過するまでの検索機能が実行されるのを防ぐためのデバウンス効果が使用されます。不要な検索や早期検索のリクエストを防ぐことができます。

アプリケーションを実行すると、ショップページが読み込まれるものではなく、フィルターのどれも機能します。私たちのカテゴリ、色、ページリンクが実際のURLを提供しているため、また、我々は何かをやっています SearchBar 入力。パート4では、 ShopProvider コンポーネントは、URL に基づいて製品をフィルタリングし、フィルタリングコンポーネントを結果とツールで提供し、さらなるやり取りのための URL を構築します。お問い合わせ

Part 4: 店舗ページにフィルタ機能を追加

1。 作成する ShopProvider コンポーネント:

// クライアント/ShopProvider/ShopProvider.tsx
import {
  useEffect,
  useContext,
  useReducer,
  createContext,
  PropsWithChildren,
  useCallback,
} from 'react';
import {
  usePathname,
  useSearchParams,
} from 'next/navigation';

import {
  Product,
  ProductCategory,
  PaColor,
  SimpleProduct,
  VariableProduct,
  ProductTypesEnum,
} from '@/graphql';

export type ProductWithPrice = SimpleProduct & { rawPrice: string }
  | VariableProduct & { rawPrice: string };

type URLParts = {
  search?: string;
  categories?: string[];
  colors?: string[];
  price?: [number, number|null];
  page?: number;
};
export interface ShopContext {
  currentUrl: string;
  buildUrl: (params: URLParts) => string;
  page: number;
  search: string;
  selectedCategories: string[];
  selectedColors: string[];
  priceRange: [number, number|null];
  setPriceRange: (priceRange: [number|null, number|null]) => void;
  globalMin: number;
  globalMax: number;
  products: Product[]|null;
  allProducts: Product[]|null;
}

export type ShopAction =
  | { type: 'UPDATE_STATE', payload: Partial<ShopContext> }

const initialState: ShopContext = {
  currentUrl: '',
  buildUrl: () => '',
  page: 1,
  search: '',
  selectedCategories: [],
  selectedColors: [],
  priceRange: [0, null],
  setPriceRange: () => {},
  globalMin: 0,
  globalMax: 100,
  products: null,
  allProducts: null,
};

const shopContext = createContext<ShopContext>(initialState);

export function useShopContext() {
  return useContext(shopContext);
}

const reducer = (state: ShopContext, action: ShopAction): ShopContext => {
  switch (action.type) {
    case 'UPDATE_STATE': 
      return { ...state, ...action.payload };
    default:
      return state;
  }
}

function filterProducts(products: Product[], state: ShopContext) {
  let filteredProducts = products;
  if (Object.is(state, initialState)) {
    return filteredProducts;
  }

  // カテゴリから探す
  if (state.selectedCategories.length) {
    filteredProducts = filteredProducts.filter((product) => {
      return product.productCategories?.nodes?.some((category: ProductCategory) => {
        return state.selectedCategories.includes(category.slug as string);
      });
    });
  }

  // 色から探す
  if (state.selectedColors.length) {
    filteredProducts = filteredProducts.filter((product) => {
      return product.allPaColor?.nodes?.some((color: PaColor) => {
        return state.selectedColors.includes(color.slug as string);
      });
    });
  }

  // 名前、説明、および短い説明で検索します。
  if (state.search) {
    filteredProducts = filteredProducts.filter((product) => {
      return product.name?.toLowerCase().includes(state.search.toLowerCase())
        || product.description?.toLowerCase().includes(state.search.toLowerCase())
        || product.shortDescription?.toLowerCase().includes(state.search.toLowerCase());
    });
  }

  // 価格範囲でフィルタリングする前に、グローバル min と max の価格を計算します。
  const prices = filteredProducts.map((product) => {
    const stringPrice = (product as ProductWithPrice).rawPrice;
    if (stringPrice && product.type === ProductTypesEnum.VARIABLE) {
      let rawPrices = stringPrice.split(',').map((price) => Number(price));
      rawPrices.sort();
      return rawPrices;
    }
    if (stringPrice && product.type === ProductTypesEnum.SIMPLE) {
      return Number(stringPrice);
    }
    return 0;
  });

  prices.sort((priceA, priceB) => {
    if (Array.isArray(priceA) && Array.isArray(priceB)) {
      return priceA[0] - priceB[0];
    }
    if (Array.isArray(priceA)) {
      return priceA[0] - (priceB as number);
    }
    if (Array.isArray(priceB)) {
      return (priceA as number) - priceB[0];
    }
    return (priceA as number) - (priceB as number);
  });

  const firstPrice = prices.length && prices[0];
  const lastPrice = prices.length && prices.slice(-1)[0];
  const globalMin = (Array.isArray(firstPrice) ? firstPrice[0] : firstPrice) || 0;
  const globalMax = Array.isArray(lastPrice) ? lastPrice[0] : lastPrice;

  if (state.priceRange[0] || state.priceRange[1]) {
    filteredProducts = filteredProducts.filter((product) => {
      const price = (product as ProductWithPrice).rawPrice;
      if (price && product.type === ProductTypesEnum.VARIABLE) {
        const prices = price.split(',');
        const min = prices[0];
        const max = prices.slice(-1)[0];
        return (min && Number(min)>= state.priceRange[0])
          || (state.priceRange[1] && max && Number(max) <= state.priceRange[1]);
      } else if (price && product.type === ProductTypesEnum.SIMPLE) {
        return (price && Number(price)>= state.priceRange[0])
          && (state.priceRange[1] && price && Number(price) <= state.priceRange[1]);
      }
      return false;
    });
  }

  return {
    allProducts: products,
    products: filteredProducts,
    globalMin,
    globalMax
  };
}

const { Provider } = shopContext;


export interface ShopProviderProps {
  allProducts: Product[];
}

export function ShopProvider({ allProducts, children }: PropsWithChildren<ShopProviderProps>) {
  const [state, dispatch] = useReducer(reducer, initialState);
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const currentParams = searchParams.toString();
  

  useEffect(() => {
    dispatch({ type: 'UPDATE_STATE', payload: {
      search: searchParams.get('search') || '',
      selectedCategories: searchParams.get('categories')?.trim().split('|') || [],
      selectedColors: searchParams.get('colors')?.trim().split('|') || [],
      priceRange: searchParams.get('price')
        ?.trim()
        .split('-')
        .map((p) => Number(p) || 0)
        .reverse() as [number, number|null] || [0, null],
      page: Number(searchParams.get('page')) || 1,
    }});
  }, [currentParams]);

  const buildUrl = useCallback((params: URLParts) => {
    const urlParts = {
      search: searchParams.get('search'),
      categories: searchParams.get('categories')?.trim().split('|') || [],
      colors: searchParams.get('colors')?.trim().split('|') || [],
      price: searchParams.get('price')
        ?.trim()
        .split('-')
        .map((p) => Number(p) || 0)
        .reverse() as [number, number|null],
      page: Number(searchParams.get('page')),
      ...params,
    };

    const url = new URL(`${process.env.FRONTEND_URL}${pathname}`);

    if (urlParts.search) {
      url.searchParams.set('search', urlParts.search);
    }
    if (urlParts.categories.length) {
      url.searchParams.set('categories', urlParts.categories.join('|'));
    }
    if (urlParts.colors.length) {
      url.searchParams.set('colors', urlParts.colors.join('|'));
    }
    const price = urlParts.price;
    if (price && ((0 !== price[0] && state.globalMin !== price[0]) 
      || price[1] && state.globalMax !== price[1])) {
      url.searchParams.set('price', price.filter(p => !!p).join('-'));
    }
    if (urlParts.page && urlParts.page !== 1) {
      url.searchParams.set('page', urlParts.page.toString());
    }

    return `${url.pathname}${url.search}`;
  }, [searchParams, pathname]);

  const store = {
    ...state,
    currentUrl: `${pathname}${searchParams.toString()}`,
    buildUrl,
    ...filterProducts(allProducts, state),
  };

  return (
    <Provider value={store}>
      {children}
    </Provider>
  );
}

ザ・オブ・ザ・ ShopProvider コンポーネントはステートを管理し、検索用語、製品カテゴリ、色、価格範囲などの検索パラメータに基づいて製品をフィルタリングするためのロジックを提供します。コア部品の説明は次のとおりです。

タイプ及び初期状態: ザ・ ShopContext type は、管理された状態の形状を定義します。 ShopProvider コンポーネント。 initialState その状態の初期値を定義します。
減力剤: 減力剤関数は、現在の状態とアクションを取り、新しい状態を返します。現在、アクションタイプは「UPDATE STATE」のみで、アクションのペイロードで現在の状態をマージするだけです。
コンテンツ: React のコンテキスト API を使用してコンテキストとプロバイダコンポーネントを作成します。コンテクストは、コンポーネントツリーを横断するステートとヘルパー関数を手動でパスすることなく共有することができます。
フィルター製品: この関数は、製品のリストにフィルタ(検索用語、カテゴリ、色、価格範囲)を適用します。また、現在の製品リストのグローバル最小値と最大価格を計算します。
useEffect のホック: このホックは、URLクエリパラメータで状態を同期させます。クエリパラメータが変更されるたびに、クエリパラメータから派生する新しいステートで ‘UPDATE STATE’ アクションをディスパッチします。
buildUrl 関数: この関数は、現在のフィルタ用の新しいURLを作成します。 URL パーツのオブジェクトを取り、現在の検索パラメータにマージし、新しい URL をビルドします。現在のフィルタの状態をナビゲートするために、このURLを使用できます。
プロバイダー: ザ・ Provider コンポーネントは子供を包み込み、コンテキストへのアクセスを提供します。現在の状態とヘルパー関数をコンテキストに渡します。

2。 追加する ShopProvider ショップページへ:

// アプリ/ページ.tsx
...

export default async function ShopPage() {
  ...

  return (
    <ShopProvider allProducts={products}>
      <Shop
        products={products}
        categories={categories}
        colors={colors}
/>
    </ShopProvider>
  );
}

これを使って ShopProvider ショップページに追加しました。すべての製品は、ショップ全体が状態にアクセスしていることを確認するために、このプロバイダに渡されます。

3。 利用するフィルターコンポーネントの更新 ShopProvider: : :

// クライアント/ショップカテゴリ/ショップカテゴリ.tsx
import Link from 'next/link';
...

import { useShopContext } from '@/client/ShopProvider';
import { Badge } from '@/ui/badge';
...

export function ShopCategories({ categories }: ShopCategoriesProps) {
  const { selectedCategories, buildUrl } = useShopContext();
  return (
    <>
      <div className="flex gap-2 flex-wrap mb-4">
        {selectedCategories.map((slug) => {
          const category = categories.find((c) => c.slug === slug);
          if (!category) {
            return null;
          }

          const href = buildUrl({
            categories: selectedCategories.filter((s) => s !== slug),
            page: 1,
          });
          return (
            <Link
              key={category.id}
              href={href}
              shallow
              prefetch={false}
>
              <Badge
                variant="outline"
                className={cn(
                  'hover:bg-red-500 hover:text-white cursor-pointer',
                  'transition-colors duration-250 ease-in-out'
                )}
>
                {category.name}
              </Badge>
            </Link>
          );
        })}
      </div>
      <ul className="mb-4 max-h-[40vh] lg:max-h-[25vh] overflow-y-scroll scrollbar-thin scrollbar-corner-rounded scrollbar-thumb-ring">
        {categories.map((category) => {
          if (selectedCategories.includes(category.slug as string)) {
            return null;
          }
          const href = buildUrl({
            categories: [...selectedCategories, category.slug as string],
            page: 1,
          });
          return (
            <li className="group py-2" key={category.id}>
              <NavLink href={href} prefetch={false} shallow>
                {category.name}
              </NavLink>
            </li>
          );
        })}
      </ul>
    </>
  );
}

// クライアント/PaColorPicker/PaColorPicker.tsx
import Link from 'next/link';
...

import { useShopContext } from '@/client/ShopProvider';
...

import { Badge } from '@/ui/badge';
...

export function PaColorPicker({ colors }: PaColorPickerProps) {
  const { buildUrl, selectedColors, allProducts } = useShopContext();

  const displayedColors = allProducts
    ? colors.filter((color) => {
      const productsWithColor = allProducts.filter((product) => {
        if (!product.allPaColor || product.allPaColor.nodes.length === 0) {
          return false;
        }

        return product.allPaColor.nodes.some((node: PaColor) => {
          return node.slug === color.slug;
        });
      });

      return productsWithColor.length> 0;
    })
    : colors;

  return (
    <>
      <div className="flex gap-2 flex-wrap mb-4">
        {selectedColors.map((slug) => {
          const color = displayedColors.find((c) => c.slug === slug);
          if (!color) {
              return null;
          }

          const href = buildUrl({
            colors: selectedColors.filter((s) => s !== slug),
          });
          return (
            <Link
              key={color.id}
              href={href}
              shallow
              prefetch={false}
>
              <Badge
                variant="outline"
                className={cn(
                  'hover:bg-red-500 hover:text-white cursor-pointer',
                  'transition-colors duration-250 ease-in-out',
                  'flex gap-1 border-0'
                )}
>
                <ColorSwatch color={color.slug as string} circle small/>
                {color.name}
              </Badge>
            </Link>
          );
        })}
      </div>
      <ul className="mb-4 max-h-[40vh] lg:max-h-[25vh] overflow-y-scroll scrollbar-thin scrollbar-corner-rounded scrollbar-thumb-ring">
        {displayedColors.map((color) => {
          if (selectedColors.includes(color.slug as string)) {
            return null;
          }

          const href = buildUrl({
            colors: [...selectedColors, color.slug as string],
          });
          return (
            <li className="group py-4" key={color.id}>
              <NavLink href={href} className="px-0 flex gap-2">
                <ColorSwatch color={color.slug as string}/>
                {color.name}
              </NavLink>
            </li>
          );
        })}
      </ul>
    </>
  );
}

/ client/ProductListing/ProductListing.tsx
...

import { useShopContext } from "@/client/ShopProvider";
...

export function ProductListing({ products }: ProductListingProps) {
  ...
  const { products: filteredProducts, buildUrl, page } = useShopContext();
  const pageCount = Math.floor((filteredProducts || products).length / pageSize);
  const hasNext = page < pageCount;
  const hasPrev = page> 1;

  const displayProducts = filteredProducts?.slice((page - 1) * pageSize, page * pageSize)
  || products.slice((page - 1) * pageSize, page * pageSize);

  useEffect(() => {
    if (page> pageCount) {
      const url = buildUrl({ page: pageCount });
      push(url, { shallow: true });
    }
  }, [pageCount]);

  return (
    <>
      <p className="font-semibold mb-4">Showing {displayProducts.length} of {(filteredProducts || products).length} items</p>
      ...
      <div className="flex justify-center my-4 gap-x-2 text-sms">
        <Link
          href={buildUrl({ page: Math.max(page - 1, 1) })}
          role="button"
          className={cn(
              hasPrev ? 'text-primary-foreground' : 'text-gray-400 opacity-50 pointer-events-none',
              'self-center rounded-md text-sm font-medium transition-colors',
              'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
              'bg-primary shadow hover:bg-primary/90 h-9 px-4 py-2',
          )}
          aria-label="Previous page"
          shallow
>
          Previous
        </Link>
        <div className="flex flex-wrap justify-center gap-2">
          {Array.from({ length: Math.min(pageCount, maxPages) }).map((_, index) => {
            const pageNumber = page> Math.floor(maxPages / 2)
              ? (page - Math.floor(maxPages / 2)) + index
              : index + 1;
            return (
              <Link
                key={index}
                href={buildUrl({ page: pageNumber })}
                role="button"
                className={cn(
                  page !== pageNumber ? 'text-primary-foreground' : 'text-gray-400 opacity-50 pointer-events-none',
                  'rounded-md text-sm font-medium transition-colors',
                  'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
                  'bg-primary shadow hover:bg-primary/90 h-9 px-4 py-2',
                )}
                aria-label={`Page ${pageNumber}`}
                shallow
>
                {pageNumber}
              </Link>
            )
          })}
        </div>
        <Link
          href={buildUrl({ page: Math.min(page + 1, pageCount) })}
          role="button"
          className={cn(
            hasNext ? 'text-primary-foreground' : 'text-gray-400 opacity-50 pointer-events-none',
            'self-center rounded-md text-sm font-medium transition-colors',
            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
            'bg-primary shadow hover:bg-primary/90 h-9 px-4 py-2',
          )}
          aria-label="Next page"
          shallow
>
          Next
        </Link>
      </div>
    </>
  );
}

// クライアント/SearchBar/SearchBar.tsx
...

import { useShopContext } from '@/client/ShopProvider';
...

export function SearchBar() {
  ...
  const { currentUrl, buildUrl, search } = useShopContext();
  const [searchInput, setSearchInput] = useState(search);
  const [debouncedSearchInput, setDebouncedSearchInput] = useState(searchInput);
  ...

  useEffect(() => {
    const url = buildUrl({
    search: debouncedSearchInput,
    page: 1,
    });
    if (url !== currentUrl) {
      push(url, { shallow: true });
    }
  }, [debouncedSearchInput]);

  return (
    <Input
      className="mb-4"
      value={searchInput}
      onChange={(event) => setSearchInput(event.target.value)}
/>
  );
}

ShopCategories, PaColorPicker, ProductListingと SearchBar 活用するために更新されました ShopProvider. つまり、これらのコンポーネントは、選択したカテゴリ、色、および検索クエリに基づいて製品をフィルタリングすることができます。

Note: 関数 buildUrl そして、 useShopContext これらのコンポーネント間で使用されます。ザ・オブ・ザ・ buildUrl 関数は、フィルタ(例えば、選択したカテゴリ、色、検索条件など)の変更に基づいて新しいURLを構築します。 useShopContext 管理されたコンテキストへの容易なアクセスを提供するカスタムホックです ShopProviderお問い合わせ

例えば、 ShopCategories コンポーネントは、それが使うことを見ることができます selectedCategories そして、 buildUrl から useShopContext ホック。カテゴリが選択されると、選択したカテゴリごとにURLを更新し、製品の表示を強制します。

// クライアント/ショップカテゴリ/ショップカテゴリ.tsx
const { selectedCategories, buildUrl } = useShopContext();

同様に、 PaColorPicker, ProductListingと SearchBar コンポーネントも使用 buildUrl そして、 useShopContext ユーザーが選択したフィルタに基づいて、表示された製品を調節するホック。

これらの変化を伴って、あなたの店は今あなたの適用を通して州の有効な操作そして検索を可能にする一元化された州管理システムを自慢します。この結果は、ユーザーのニーズを満たすために適しているより堅牢で柔軟なeコマースストアです。

パート5:カテゴリページを追加します。

この最後の部分はすぐになります。ページの実装 /category/* サイトマップ TopNav ログイン /app/[category]/page.tsx 次のようにします。

// app/[カテゴリ]/page.tsx
import {
  fetchProducts,
  fetchColors,
} from '@/graphql';

import { Shop } from '@/server/Shop';
import { ShopProvider } from '@/client/ShopProvider';
export interface CategoryPageProps { 
  params: {
    category: string
  }
}

export default async function CategoryPage({ params }: CategoryPageProps) {
  const { category } = params;

  if (!category) return (
    <h1>Page not found</h1>
  );

  const products = await fetchProducts(1, 0, { category: category });
  const colors = await fetchColors(1) || [];

  if (!products || products.length === 0) return (
    <h1>{`The ${category} category does not exist. Please check URL and try again.`}</h1>
  );

  return (
    <ShopProvider allProducts={products}>
      <Shop
        products={products}
        colors={colors}
/>
    </ShopProvider>
  );
}

何が起こっているかのようにかなり明白であるべきです、従って余りに詳細に行かないでこのページは私達の項目が私達のに提供されていない以外私達の店のページと同一に働きます Shop フィルタリングと選択したカテゴリに接続された製品のみのコンポーネントは、クエリされます。

コンテンツ

このチュートリアルではこれです! 機能的なトップナビゲーション、製品リスト、およびフィルタで機能的なショップページを正常に作成しました。しかし、次のチュートリアルでは、ユーザーナビゲーションとログインページを実行します。お楽しみに!

次の章を続けてください

WooGraphQLのヘッドレスショップの構築:第3章5