@alphasquad/saleor-template-advance 0.1.0

package/src/app/category/[slug]/CategoryPageClient.tsx

@@ -0,0 +1,377 @@
+"use client";
+
+import { useState, useEffect, Suspense } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import Breadcrumb from "@/app/components/reuseableUI/breadcrumb";
+import EmptyState from "@/app/components/reuseableUI/emptyState";
+import { ProductCard } from "@/app/components/reuseableUI/productCard";
+import { FiltersCollapsible } from "@/app/components/filtersCollapsible";
+import ItemsPerPageSelectClient from "@/app/components/shop/ItemsPerPageSelectClient";
+import { shopApi, type PLSearchProduct } from "@/lib/api/shop";
+
+type ItemsPerPage = 10 | 20 | 50 | 100;
+
+interface SubcategoryItem {
+  id: string;
+  name: string;
+  slug: string;
+  count: number;
+  children?: SubcategoryItem[];
+}
+
+interface APICategory {
+  id: string;
+  name: string;
+  slug: string;
+  image?: string;
+  product_count?: number;
+  children?: APICategory[];
+}
+
+function CategoryPageClientInner(props: { slug: string }) {
+  const { slug } = props;
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const selectedSubcategory = searchParams?.get("subcategory") || "";
+
+  const [itemsPerPage, setItemsPerPage] = useState<ItemsPerPage>(10);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [products, setProducts] = useState<PLSearchProduct[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [categoryName, setCategoryName] = useState<string>("");
+  const [subcategories, setSubcategories] = useState<SubcategoryItem[]>([]);
+  const [pagination, setPagination] = useState({
+    total: 0,
+    page: 1,
+    per_page: 10,
+    total_pages: 0,
+  });
+
+  // Helper to find a subcategory by slug in the tree
+  const findSubcategoryBySlug = (
+    items: SubcategoryItem[],
+    targetSlug: string
+  ): SubcategoryItem | null => {
+    for (const item of items) {
+      if (item.slug === targetSlug) return item;
+      if (item.children) {
+        const found = findSubcategoryBySlug(item.children, targetSlug);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+
+  // Get the selected subcategory object
+  const selectedSubcategoryObj = selectedSubcategory
+    ? findSubcategoryBySlug(subcategories, selectedSubcategory)
+    : null;
+
+  // Get the display name for the selected subcategory
+  const selectedSubcategoryName = selectedSubcategoryObj?.name;
+
+  // Determine which subcategories to display in the sidebar
+  // If selected subcategory has children, show those; otherwise show current level
+  const displayedSubcategories =
+    selectedSubcategoryObj?.children && selectedSubcategoryObj.children.length > 0
+      ? selectedSubcategoryObj.children
+      : subcategories;
+
+  // Update URL with subcategory parameter
+  const handleSubcategoryChange = (subcategorySlug: string) => {
+    const params = new URLSearchParams(searchParams?.toString() || "");
+
+    if (subcategorySlug === selectedSubcategory) {
+      // Deselect if clicking the same one
+      params.delete("subcategory");
+    } else {
+      params.set("subcategory", subcategorySlug);
+    }
+
+    const queryString = params.toString();
+    router.push(queryString ? `?${queryString}` : `/category/${slug}`, { scroll: false });
+  };
+
+  // Clear subcategory filter
+  const clearSubcategory = () => {
+    const params = new URLSearchParams(searchParams?.toString() || "");
+    params.delete("subcategory");
+    const queryString = params.toString();
+    router.push(queryString ? `?${queryString}` : `/category/${slug}`, { scroll: false });
+  };
+
+  // Fetch subcategories for the current category
+  useEffect(() => {
+    const fetchSubcategories = async () => {
+      try {
+        const partsLogicUrl = process.env.NEXT_PUBLIC_PARTSLOGIC_URL || "";
+        const res = await fetch(
+          `${partsLogicUrl}/api/categories?page=1&per_page=100`,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              Accept: "application/json",
+            },
+          }
+        );
+        if (res.ok) {
+          const data = await res.json();
+          const categories: APICategory[] = data.categories || [];
+
+          // Find the current category and get its direct children only (flattened, no nested)
+          const findCategoryChildren = (cats: APICategory[], targetSlug: string): APICategory[] | null => {
+            for (const cat of cats) {
+              if (cat.slug === targetSlug) {
+                return cat.children || null;
+              }
+              if (cat.children) {
+                const found = findCategoryChildren(cat.children, targetSlug);
+                if (found) return found;
+              }
+            }
+            return null;
+          };
+
+          const children = findCategoryChildren(categories, slug);
+
+          if (children && children.length > 0) {
+            // Convert to SubcategoryItem format (preserve children for drill-down)
+            const convertToSubcategoryItem = (cat: APICategory): SubcategoryItem => ({
+              id: cat.id,
+              name: cat.name,
+              slug: cat.slug,
+              count: cat.product_count || 0,
+              children: cat.children?.map(convertToSubcategoryItem),
+            });
+            setSubcategories(children.map(convertToSubcategoryItem));
+          } else {
+            setSubcategories([]);
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching subcategories:", error);
+        setSubcategories([]);
+      }
+    };
+
+    fetchSubcategories();
+  }, [slug]);
+
+  useEffect(() => {
+    const fetchProducts = async () => {
+      setLoading(true);
+      try {
+        // If subcategory is selected, filter by that; otherwise use the main category
+        const categorySlug = selectedSubcategory || slug;
+
+        const response = await shopApi.getProductsBySlug({
+          slug: categorySlug,
+          page: 1,
+          per_page: itemsPerPage,
+          search: searchQuery || undefined,
+          filterType: "category_slug",
+        });
+        setProducts(response.products || []);
+        setPagination(response.pagination);
+        if (response.products && response.products.length > 0) {
+          setCategoryName(response.products[0].category_name || slug);
+        } else {
+          setCategoryName(slug);
+        }
+      } catch (error) {
+        console.error("Error fetching products:", error);
+        setProducts([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProducts();
+  }, [itemsPerPage, searchQuery, slug, selectedSubcategory]);
+
+  const loadMore = async () => {
+    if (loadingMore || pagination.page >= pagination.total_pages) return;
+
+    setLoadingMore(true);
+    const nextPage = pagination.page + 1;
+    const categorySlug = selectedSubcategory || slug;
+
+    try {
+      const response = await shopApi.getProductsBySlug({
+        slug: categorySlug,
+        page: nextPage,
+        per_page: itemsPerPage,
+        search: searchQuery || undefined,
+        filterType: "category_slug",
+      });
+
+      const newProducts = response.products || [];
+      setProducts((prev) => [...prev, ...newProducts]);
+      setPagination(response.pagination);
+    } catch (error) {
+      console.error("Error loading more products:", error);
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
+  const displayName = selectedSubcategoryName || slug.replaceAll("-", " ");
+
+  const breadcrumbItems = [
+    { text: "HOME", link: "/" },
+    { text: "SHOP", link: "/products/all" },
+    { text: slug.replaceAll("-", " "), link: selectedSubcategory ? `/category/${slug}` : undefined },
+    ...(selectedSubcategoryName ? [{ text: selectedSubcategoryName }] : []),
+  ];
+
+  return (
+    <div className="container mx-auto min-h-[100dvh] py-12 px-4 md:px-6 md:py-16 lg:py-24 lg:px-0 relative">
+      <div className="space-y-5">
+        <Breadcrumb items={breadcrumbItems} />
+        <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between w-full gap-4">
+          <div className="space-y-2">
+            <h2 className="font-normal uppercase text-[var(--color-secondary-800)] text-xl md:text-3xl lg:text-5xl font-primary">
+              {displayName}
+            </h2>
+            {searchQuery && (
+              <div className="flex items-center gap-2 text-sm text-[var(--color-secondary-600)]">
+                <div className="flex items-center gap-2">
+                  {pagination.total > 0
+                    ? `Found ${pagination.total} result${
+                        pagination.total === 1 ? "" : "s"
+                      } for "${searchQuery}" in ${categoryName || displayName}`
+                    : `No results found for "${searchQuery}" in ${
+                        categoryName || displayName
+                      }`}
+                </div>
+              </div>
+            )}
+            {!searchQuery && (
+              <div className="flex items-center gap-2 text-sm text-[var(--color-secondary-600)]">
+                <div className="flex items-center gap-2">
+                  {pagination.total} product{pagination.total === 1 ? "" : "s"}{" "}
+                  in {displayName}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="ml-auto">
+            <ItemsPerPageSelectClient
+              value={itemsPerPage}
+              onChange={setItemsPerPage}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-10 flex gap-8">
+        {/* Sidebar - only show if there are subcategories to display */}
+        {displayedSubcategories.length > 0 && (
+          <aside className="hidden lg:block w-72 flex-shrink-0">
+            <div className="sticky top-32 space-y-6">
+              <FiltersCollapsible title="Subcategories" defaultOpen={true}>
+                <div className="space-y-3 px-1 overflow-y-auto max-h-96">
+                  {selectedSubcategory && (
+                    <button
+                      type="button"
+                      onClick={clearSubcategory}
+                      className="text-sm text-[var(--color-primary-600)] hover:text-[var(--color-primary-700)] font-secondary"
+                    >
+                      Clear filter
+                    </button>
+                  )}
+                  {displayedSubcategories.map((subcategory) => (
+                    <label
+                      key={subcategory.id}
+                      className="flex items-center gap-2 font-secondary text-[var(--color-secondary-800)] cursor-pointer"
+                    >
+                      <input
+                        type="radio"
+                        name="subcategory"
+                        className="h-5 w-5 md:h-4 md:w-4 accent-[var(--color-primary-600)] cursor-pointer"
+                        checked={selectedSubcategory === subcategory.slug}
+                        onChange={() => handleSubcategoryChange(subcategory.slug)}
+                      />
+                      <div className="flex justify-between w-full items-center">
+                        <span className="truncate">{subcategory.name}</span>
+                        <span className="text-xs font-secondary bg-[var(--color-secondary-200)] text-[var(--color-secondary-800)] px-2 py-0.5 rounded">
+                          {subcategory.count}
+                        </span>
+                      </div>
+                    </label>
+                  ))}
+                </div>
+              </FiltersCollapsible>
+            </div>
+          </aside>
+        )}
+
+        <section className="flex-1 relative min-h-[400px]">
+          {loading && (
+            <div className="h-[60vh] bg-white/70 z-10 flex items-center justify-center rounded-lg">
+              <div className="size-12 border-t-2 border-black rounded-full animate-spin" />
+            </div>
+          )}
+
+          <div className={`grid grid-cols-2 sm:grid-cols-3 ${displayedSubcategories.length > 0 ? 'lg:grid-cols-3' : 'lg:grid-cols-4'} gap-4`}>
+            {loading ? null : products && products.length > 0 ? (
+              products.map((item) => (
+                <ProductCard
+                  key={item.id}
+                  id={item.id}
+                  name={item.name}
+                  image={item.primary_image || "/no-image-avail-large.png"}
+                  href={`/product/${item.slug}`}
+                  price={item.price_min || 0}
+                  category_id={item.category_id || ""}
+                  category={item.category_name || ""}
+                  discount={
+                    item.price_max &&
+                    item.price_min &&
+                    item.price_max > item.price_min
+                      ? item.price_max - item.price_min
+                      : null
+                  }
+                  isFeatured={
+                    item.collection_names?.includes("Best Sellers") || false
+                  }
+                  onSale={(item.price_max || 0) > (item.price_min || 0)}
+                />
+              ))
+            ) : (
+              <EmptyState
+                text="No products found"
+                textParagraph="Try adjusting your search or filter to find what you're looking for."
+                className="col-span-full my-12"
+              />
+            )}
+          </div>
+
+          {!loading &&
+            pagination.page < pagination.total_pages &&
+            products.length > 0 && (
+              <div className="mt-10 flex justify-center">
+                <button
+                  onClick={loadMore}
+                  disabled={loadingMore}
+                  className="px-4 py-2 bg-[var(--color-secondary-200)] text-gray-800 hover:opacity-80 disabled:opacity-60 transition-opacity"
+                >
+                  {loadingMore ? "Loading..." : "Load More"}
+                </button>
+              </div>
+            )}
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export default function CategoryPageClient(props: { slug: string }) {
+  return (
+    <Suspense>
+      <CategoryPageClientInner {...props} />
+    </Suspense>
+  );
+}

package/src/app/category/[slug]/layout.tsx

@@ -0,0 +1,17 @@
+import type { Metadata } from "next"
+import { getStoreName } from "@/app/utils/branding"
+
+export async function generateMetadata(): Promise<Metadata> {
+  return {
+    title: `Category - ${getStoreName()}`,
+    description: `Browse products in this category. Find high-quality parts and accessories for your needs.`,
+  }
+}
+
+export default function CategoryDetailLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

package/src/app/category/[slug]/page.tsx

@@ -0,0 +1,224 @@
+import CategoryPageClient from "./CategoryPageClient";
+import {
+  generateProductCategoryPageSchema,
+  generateBreadcrumbSchema,
+} from "@/lib/schema";
+import { Metadata } from "next";
+import { Suspense } from "react";
+import { notFound } from "next/navigation";
+import ServerProductGrid, {
+  type ServerGridProduct,
+} from "@/app/components/seo/ServerProductGrid";
+import { extractTextFromEditorJs } from "@/lib/seo/extractTextFromEditorJs";
+
+export const revalidate = 300;
+
+type SearchParams = Record<string, string | string[] | undefined>;
+
+function toTitleCaseFromSlug(input: string): string {
+  return input
+    .replace(/-/g, " ")
+    .replace(/\b\w/g, (l) => l.toUpperCase());
+}
+
+function getFirstParam(v: string | string[] | undefined): string | undefined {
+  if (!v) return undefined;
+  return Array.isArray(v) ? v[0] : v;
+}
+
+function toInt(v: string | undefined): number | undefined {
+  if (!v) return undefined;
+  const n = Number.parseInt(v, 10);
+  return Number.isFinite(n) && n > 0 ? n : undefined;
+}
+
+async function fetchCategoryListing(input: {
+  categorySlug: string;
+  page: number;
+  perPage: number;
+}): Promise<{
+  products: ServerGridProduct[];
+  pagination?: { total?: number; page?: number; per_page?: number; total_pages?: number };
+  categoryDescriptionJson?: string | null;
+}> {
+  const base = process.env.NEXT_PUBLIC_PARTSLOGIC_URL;
+  if (!base) return { products: [] };
+
+  const url = new URL("/api/search/products", base);
+  url.searchParams.set("category_slug", input.categorySlug);
+  url.searchParams.set("page", String(input.page));
+  url.searchParams.set("per_page", String(input.perPage));
+
+  const res = await fetch(url.toString(), {
+    headers: { Accept: "application/json" },
+    next: { revalidate },
+  });
+
+  if (!res.ok) return { products: [] };
+  const json = (await res.json()) as {
+    products?: Array<ServerGridProduct & { category_description_json?: string | null }>;
+    pagination?: { total?: number; page?: number; per_page?: number; total_pages?: number };
+  };
+
+  const products = Array.isArray(json.products) ? json.products : [];
+  const categoryDescriptionJson = products?.[0]?.category_description_json ?? null;
+  return { products, pagination: json.pagination, categoryDescriptionJson };
+}
+
+export async function generateMetadata({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ slug: string }>;
+  searchParams?: Promise<SearchParams>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const decodedSlug = decodeURIComponent(slug);
+  const sp = searchParams ? await searchParams : undefined;
+  const subcategory = getFirstParam(sp?.subcategory);
+  const page = toInt(getFirstParam(sp?.page));
+
+  const basePath = `/category/${slug}`;
+  const canonical =
+    page && page > 1 ? `${basePath}?page=${page}` : basePath;
+
+  const categoryName = toTitleCaseFromSlug(decodedSlug);
+  const displayName = subcategory
+    ? toTitleCaseFromSlug(subcategory)
+    : categoryName;
+
+  const shouldNoindex = Boolean(subcategory);
+
+  return {
+    title: `${displayName} | Shop`,
+    description: `Browse our ${displayName} collection. Find the best products in ${displayName} category.`,
+    keywords: `${displayName}, shop, products, buy online`,
+    alternates: {
+      canonical,
+    },
+    robots: shouldNoindex
+      ? {
+          index: false,
+          follow: true,
+        }
+      : undefined,
+    openGraph: {
+      title: `${displayName} | Shop`,
+      description: `Browse our ${displayName} collection`,
+      type: "website",
+      url: canonical,
+      images: [{ url: "/Logo.png" }],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: `${displayName} | Shop`,
+      description: `Browse our ${displayName} collection`,
+      images: ["/Logo.png"],
+    },
+  };
+}
+
+export default async function CategoryPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ slug: string }>;
+  searchParams?: Promise<SearchParams>;
+}) {
+  const { slug } = await params;
+  const decodedSlug = decodeURIComponent(slug);
+  const sp = searchParams ? await searchParams : undefined;
+  const subcategory = getFirstParam(sp?.subcategory);
+  const page = toInt(getFirstParam(sp?.page)) ?? 1;
+
+  const categoryName = toTitleCaseFromSlug(decodedSlug);
+  const displayName = subcategory
+    ? toTitleCaseFromSlug(subcategory)
+    : categoryName;
+
+  // Ensure this category slug is real (server-side 404 for invalid slugs).
+  try {
+    const listing = await fetchCategoryListing({
+      categorySlug: subcategory || decodedSlug,
+      page: 1,
+      perPage: 1,
+    });
+    if (!listing.pagination || !listing.pagination.total) {
+      notFound();
+    }
+  } catch {
+    notFound();
+  }
+
+  const listing = await fetchCategoryListing({
+    categorySlug: subcategory || decodedSlug,
+    page,
+    perPage: 12,
+  });
+
+  const introText = extractTextFromEditorJs(listing.categoryDescriptionJson);
+
+  // Generate schema.org structured data
+  const categoryPageSchema = generateProductCategoryPageSchema(
+    displayName,
+    `Browse our ${displayName} collection. Find the best products in ${displayName} category.`,
+    `/category/${slug}`
+  );
+
+  const breadcrumbSchema = generateBreadcrumbSchema([
+    { name: "Home", url: "/" },
+    { name: "Categories", url: "/category" },
+    { name: categoryName, url: `/category/${slug}` },
+    ...(subcategory
+      ? [{ name: displayName, url: `/category/${slug}?subcategory=${encodeURIComponent(subcategory)}` }]
+      : []),
+  ]);
+
+  return (
+    <main className="h-full w-full">
+      {/* Schema.org structured data */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(categoryPageSchema) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
+
+      <div className="container mx-auto min-h-[100dvh] py-12 px-4 md:px-6 md:py-16 lg:py-24 lg:px-0">
+        <div className="space-y-5">
+          <div className="text-xs font-semibold text-[var(--color-secondary-600)]">
+            Home / Categories / {displayName}
+          </div>
+          <div className="space-y-2">
+            <h1 className="font-normal uppercase text-[var(--color-secondary-800)] text-xl md:text-3xl lg:text-5xl font-primary">
+              {displayName}
+            </h1>
+            {introText ? (
+              <p className="text-sm text-[var(--color-secondary-600)] max-w-3xl">
+                {introText}
+              </p>
+            ) : (
+              <p className="text-sm text-[var(--color-secondary-600)]">
+                Browse products in {displayName}.
+              </p>
+            )}
+          </div>
+
+          {/* SSR fallback (visible with JS disabled) */}
+          <div className="ssr-only">
+            <ServerProductGrid products={listing.products || []} />
+          </div>
+
+          {/* Enhanced client experience (visible with JS enabled) */}
+          <div className="js-only">
+            <Suspense>
+              <CategoryPageClient slug={slug} />
+            </Suspense>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}