WooGraphQL Tutorial Ch 3: Shop Page + Navegación en Next.js

Cabeza arriba: este tutorial cubre una versión anterior de WooGraphQL y ya no está al día. Una versión reescrita está en progreso — nos vincularemos a ella desde aquí una vez que sea publicada.

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

Cuadro de contenidos

Configuración de WordPress para su aplicación de eCommerce sin cabeza
Crear y configurar su aplicación eCommerce para el desarrollo
Páginas de listado de edificios con WooGraphQL
Creación de sesión de usuario y navegación
Creación de la página del producto y Opciones del carro

Bienvenido a la tercera parte de nuestra serie tutorial sobre la creación de una aplicación de eCommerce sin cabeza! Este capítulo es un paso a paso de crear las páginas de lista de la tienda utilizando WooGraphQL + Next 13. El enfoque se centra en implementar un sistema de navegación y una página Tienda para su plataforma de comercio electrónico.

Páginas de listado de edificios con WooGraphQL

Comenzaremos por crear la página de la tienda con poca o ninguna funcionalidad de filtrado, luego terminaremos implementando la funcionalidad de filtrado y actualizando cada componente respectivamente. ¡Sin más demora, empecemos!

Parte 1: Editar diseño de raíz

Primero modificaremos nuestro diseño de raíz para incluir la navegación superior.

1. Actualización /app/layout.tsx:

// app/layout.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>
  );
}

El nuevo diseño hará uso de TopNav del servidor WooGraphQL. Esto poblará el menú de navegación con las categorías de productos que se recogen desde el punto final de GraphQL. Además, importamos un Toaster para notificaciones y comentarios de los usuarios.

2. Crear server/TopNav/index.ts:

// servidor/TopNav/index.ts
export * from './TopNav';

Este archivo actúa como un archivo de barril, lo que nos permite importar todo desde ./TopNav a la vez, simplificando las importaciones en otros lugares de nuestro código. Esta es una práctica común para aislar pruebas asociadas y archivos de utilidad locales. Espere que este patrón se utilice para todos los componentes en el /server. En adelante no voy a mostrar los archivos de barril componentes con algunas excepciones.

3. Crear server/TopNav/TopNav.tsx:

// servidor/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>
  );
}

Este archivo define nuestro TopNav componente, una barra de navegación de ancho completo que incluye una lista de categorías (si las hay) y la marca del sitio. En nuestro caso layout.tsx estamos proporcionando las 5 categorías más pobladas.

Parte 2: Crear página de la tienda y comprar componentes del servidor de página

Ahora, crearemos una página de Tienda donde los productos pueden ser listados.

1. Refactor app/page.tsx:

// app/page.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}
/>
  );
}

Los nuevos productos de implementación, categorías y colores de nuestro punto final de GraphQL y los muestra usando el Shop componente. Este componente es responsable de hacer una lista completa de productos, categorías y filtros de color.

2. Crear el componente Shop /server/Shop/Shop.tsx:

// servidor/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>
  );
}

El componente Shop muestra una barra lateral con categorías y filtros de color y una zona principal con una barra de búsqueda y lista de productos. Hace uso de varios componentes infantiles, que crearemos el siguiente

3. Crear el componente ShopSidebar:

// servidor/ShopSidebar/ShopSidebar.tsx
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>
    </>
  );
}

El ShopSidebar componente proporciona navegación lateral estilo hoja para las vistas móviles utilizando otro shadcn/ui componente. Se colapsa en un botón y se expande cuando se hace clic, revelando a sus hijos (categorías y filtros de color). En pantallas más grandes, la barra lateral siempre es visible.

Parte 3: Crear componentes de clientes de página de tienda

1. Creación del archivo de barril para un componente cliente /client/ShopCategories/index.ts:

// cliente/ShopCategorías/index.tsx
'use client';
export * from './ShopCategories';

Similar al archivo de barril de componentes del servidor con excepción de 'use client'; en la parte superior del archivo.

2. Crear ShopCategories componente:

// cliente/ShopCategorías/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>
  );
}

El ShopCategories componente toma las categorías de productos embragados y las enumera en una lista pergaminosa. Cada categoría es clicable, pero el enlace todavía no es funcional.

3. Crear PaColorPicker componente:

// cliente/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>
  );
}

El PaColorPicker componente renderiza una lista de filtros de color usando los datos de color obtenidos desde el punto final de GraphQL. Cada color está representado por un ColorSwatch y el nombre del color. Similar a las categorías, los filtros de color se pueden hacer clic, pero los enlaces todavía no son funcionales

4. Crear ProductListing componente:

// cliente/ProductListing/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>
    </>
  );
}

El ProductListing componente que ha creado listas de todos los productos, permitiendo a los usuarios ver detalles del producto haciendo clic en un producto específico. El pageSize constante determina cuántos productos se mostrarán por página, y la sección de paginación permite a los usuarios navegar a diferentes páginas de productos.

La lista de productos se corta según el número de página actual, que se calcula dividiendo el número total de productos por el tamaño de la página. Cada producto se muestra en una tarjeta con una imagen, nombre y descripción corta. Hacer clic en la tarjeta navega a una vista detallada del producto.

5. Crear SearchBar componente:

// cliente/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)}
/>
  );
}

El SearchBar componente permite a los usuarios buscar productos. La entrada del usuario se gestiona con el estado local, y se utiliza un efecto de depuración para evitar que la función de búsqueda funcione hasta que hayan pasado 500 milisegundos desde que el usuario cambió su entrada por última vez. Esto puede ayudar a prevenir solicitudes de búsqueda innecesarias o prematuras.

Si ejecutas nuestra aplicación, encontrarás que nuestra página de compras carga pero ninguno de los filtros funciona. Sobre todo porque nuestra categoría, color y enlaces de página se proporcionan una URL real para trabajar con, ni estamos haciendo nada con el SearchBar entrada. En la Parte 4 construiremos el ShopProvider componente para hacer el trabajo de filtrar nuestros productos basados en URL y proporcionar nuestros componentes de filtrado con resultados y herramientas para construir URLs para mayor interacción. Procedamos.

Parte 4: Agregar la funcionalidad del filtro a la página de la tienda

1. Crear ShopProvider componente:

// cliente/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;
  }

  // Búsqueda por categoría.
  if (state.selectedCategories.length) {
    filteredProducts = filteredProducts.filter((product) => {
      return product.productCategories?.nodes?.some((category: ProductCategory) => {
        return state.selectedCategories.includes(category.slug as string);
      });
    });
  }

  // Búsqueda por color.
  if (state.selectedColors.length) {
    filteredProducts = filteredProducts.filter((product) => {
      return product.allPaColor?.nodes?.some((color: PaColor) => {
        return state.selectedColors.includes(color.slug as string);
      });
    });
  }

  // Búsqueda por nombre, descripción y breve descripción.
  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());
    });
  }

  // Calcular precios globales min y max antes de filtrar por rango de precios.
  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>
  );
}

El ShopProvider componente gestiona el estado y proporciona lógica para los productos filtrantes basados en parámetros de búsqueda como término de búsqueda, categoría de producto, color y rango de precios. Aquí hay una explicación de las partes centrales:

Tipos " Estado inicial: ShopContext tipo define la forma del estado gestionado por el ShopProvider componente. initialState define los valores iniciales de ese estado.
Reducir: La función del reductor toma el estado actual y una acción, y devuelve el nuevo estado. Por ahora, sólo tenemos un tipo de acción: ‘UPDATE STATE’, que simplemente fusiona el estado actual con la carga útil de la acción.
Contexto: Utilizamos React’s Context API para crear un contexto y un componente de proveedor. El contexto nos permite compartir funciones de estado y algunos ayudantes a través del árbol de componentes sin tener que pasar manualmente props a través de nodos intermedios.
Productos filtrantes: Esta función aplica los filtros (termino de búsqueda, categoría, color y rango de precios) a la lista de productos. También calcula los precios mínimos y máximos globales para la lista actual de productos.
useEffect Hook: Este gancho sincroniza el estado con los parámetros de consulta URL. Cada vez que los parámetros de consulta cambian, envía una acción ‘UPDATE STATE’ con el nuevo estado derivado de los parámetros de consulta.
buildUrl Función: Esta función construye una nueva URL para los filtros actuales. Toma un objeto de partes URL, lo fusiona con los parámetros de búsqueda actuales y construye una nueva URL de ella. Esta URL se puede utilizar para navegar al estado actual de los filtros.
Proveedor: Provider El componente envuelve a sus hijos, dándoles acceso al contexto. Pasa el estado actual y las funciones de ayuda al contexto.

2. Añadir ShopProvider a la página de la tienda:

// app/page.tsx
...

export default async function ShopPage() {
  ...

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

Con esto… ShopProvider ha sido añadido a la página de la tienda. Todos los productos se pasan a este proveedor para asegurar que toda la tienda tenga acceso al estado.

3. Actualizar los componentes del filtro para utilizar ShopProvider:

// cliente/ShopCategorías/ShopCategories.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>
    </>
  );
}

// cliente/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>
    </>
  );
}

// cliente/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, y SearchBar han sido actualizados para utilizar el ShopProviderEsto significa que estos componentes ahora pueden acceder al contexto de la tienda, permitiéndoles filtrar productos basados en categorías seleccionadas, colores y consultas de búsqueda.

Nota: las funciones buildUrl y useShopContext se utilizan a través de estos componentes. El buildUrl función construye una nueva URL basada en cambios en los filtros (por ejemplo, categorías seleccionadas, colores y términos de búsqueda). useShopContext es un gancho personalizado que proporciona fácil acceso al contexto gestionado por ShopProvider.

Por ejemplo, en ShopCategories componente, se puede ver que utiliza el selectedCategories y buildUrl de la useShopContext Gancho. Cada vez que se selecciona una categoría, actualiza la URL y por lo tanto la visualización de productos según las categorías seleccionadas:

// cliente/ShopCategorías/ShopCategories.tsx
const { selectedCategories, buildUrl } = useShopContext();

Del mismo modo, el PaColorPicker, ProductListing, y SearchBar los componentes también utilizan buildUrl y useShopContext gancho para ajustar los productos mostrados basados en filtros seleccionados por el usuario.

Con la inclusión de estos cambios, su tienda cuenta ahora con un sistema centralizado de gestión estatal que permite una manipulación y recuperación eficientes del estado a lo largo de su aplicación. Esto resulta en una tienda de comercio electrónico más robusta y flexible que se adapta mejor a las necesidades de sus usuarios.

Parte 5: Añadiendo las páginas de Categoría.

Esta última parte será rápida. Para implementar la página para la /category/* enlaces en los TopNav definir /app/[category]/page.tsx como sigue:

// app/[category]/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>
  );
}

Debe ser bastante obvio en cuanto a lo que está pasando, así que sin entrar en demasiado detalle esta página funciona idénticamente a nuestra página de compras, excepto que no se proporcionan categorías a nuestra página Shop componente para filtrado y sólo los productos conectados a nuestra categoría seleccionada son consultados.

Conclusión

¡Eso es todo por este tutorial! Ahora ha creado con éxito una página de Shop funcional con una navegación superior totalmente funcional, listados de productos y filtros. Aún hay mucho que hacer, sin embargo, en el siguiente tutorial estaremos implementando la navegación de usuario y la página de inicio de sesión. ¡No te muevas!

Continuar hasta el próximo capítulo

Building Headless Shops with WooGraphQL: Capítulo 3 de 5