@alphasquad/saleor-template-advance 0.1.0

package/src/app/blog/layout.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from "next"
+import { getStoreName } from "@/app/utils/branding"
+
+export const metadata: Metadata = {
+  title: `Blog - ${getStoreName()}`,
+  description: `Read tips, product reviews, guides, and industry news from ${getStoreName()} experts.`,
+  alternates: {
+    canonical: "/blog",
+  },
+  openGraph: {
+    title: `Blog - ${getStoreName()}`,
+    description: `Read tips, product reviews, guides, and industry news from ${getStoreName()} experts.`,
+    type: "website",
+    url: "/blog",
+    images: [{ url: "/Logo.png" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Blog - ${getStoreName()}`,
+    description: `Read tips, product reviews, guides, and industry news from ${getStoreName()} experts.`,
+    images: ["/Logo.png"],
+  },
+}
+
+export default function BlogLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

package/src/app/blog/page.tsx

@@ -0,0 +1,81 @@
+
+import React, { Suspense } from "react"
+import type { Metadata } from "next"
+import Heading from "../components/reuseableUI/heading"
+import Breadcrumb from "../components/reuseableUI/breadcrumb"
+import BlogList from "../components/blog/BlogList"
+import { fetchBlogPages } from "@/graphql/queries/getBlogs"
+import { getStoreName } from "@/app/utils/branding"
+import {
+  generateCollectionPageSchema,
+  generateBreadcrumbSchema,
+} from "@/lib/schema"
+
+export const metadata: Metadata = {
+  title: `Blog - ${getStoreName()}`,
+  description: "Read our latest articles, news, and insights about our products and services.",
+  alternates: {
+    canonical: "/blog",
+  },
+  openGraph: {
+    title: `Blog - ${getStoreName()}`,
+    description: "Read our latest articles, news, and insights about our products and services.",
+    type: "website",
+    url: "/blog",
+    images: [{ url: "/Logo.png" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Blog - ${getStoreName()}`,
+    description: "Read our latest articles, news, and insights about our products and services.",
+    images: ["/Logo.png"],
+  },
+}
+
+export default async function BlogPage() {
+  // Fetch blog posts from CMS
+  const blogs = await fetchBlogPages()
+
+  // Generate schema.org structured data
+  const collectionSchema = generateCollectionPageSchema(
+    'Blog',
+    'Read our latest articles, news, and insights about our products and services.',
+    '/blog'
+  );
+
+  const breadcrumbSchema = generateBreadcrumbSchema([
+    { name: "Home", url: "/" },
+    { name: "Blog", url: "/blog" },
+  ]);
+
+  return (
+    <main className="h-full w-full">
+      {/* Schema.org structured data */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionSchema) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
+      <div className="container mx-auto max-w-[1276px]">
+        <div className="flex flex-col items-start w-full gap-16 px-4 md:px-6 py-12 md:py-16 lg:py-24">
+          <div className="flex flex-col items-start gap-5 w-full">
+            <Breadcrumb
+              items={[
+                { text: "Home", link: "/" },
+                { text: "BLOG", link: "/blog" },
+              ]}
+            />
+            <Heading as="h1" content="Blog" />
+          </div>
+
+          <Suspense fallback={<div>Loading blogs...</div>}>
+            <BlogList blogs={blogs} pageSize={9} />
+          </Suspense>
+        </div>
+      </div>
+    </main>
+  )
+}

package/src/app/brand/[id]/BrandPageClient.tsx

@@ -0,0 +1,188 @@
+"use client";
+
+import Breadcrumb from "@/app/components/reuseableUI/breadcrumb";
+import EmptyState from "@/app/components/reuseableUI/emptyState";
+import { ProductCard } from "@/app/components/reuseableUI/productCard";
+import ItemsPerPageSelectClient from "@/app/components/shop/ItemsPerPageSelectClient";
+import SearchFilterClient from "@/app/components/shop/SearchFilterClient";
+import { PLSearchProduct, shopApi } from "@/lib/api/shop";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+type ItemsPerPage = 10 | 20 | 50 | 100;
+
+export default function BrandPageClient() {
+  const pathName = usePathname();
+  const route = pathName.split("/").slice(2).join("/");
+  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 [pagination, setPagination] = useState({
+    total: 0,
+    page: 1,
+    per_page: 10,
+    total_pages: 0,
+  });
+
+  useEffect(() => {
+    const fetchProducts = async () => {
+      setLoading(true);
+      try {
+        const response = await shopApi.getProductsBySlug({
+          slug: route,
+          page: 1,
+          per_page: itemsPerPage,
+          search: searchQuery || undefined,
+          filterType: "brand_slug",
+        });
+        setProducts(response.products || []);
+        setPagination(response.pagination);
+        if (response.products && response.products.length > 0) {
+          setCategoryName(response.products[0].category_name || route);
+        } else {
+          setCategoryName(route);
+        }
+      } catch (error) {
+        console.error("Error fetching products:", error);
+        setProducts([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchProducts();
+  }, [itemsPerPage, searchQuery, route]);
+
+  const loadMore = async () => {
+    if (loadingMore || pagination.page >= pagination.total_pages) return;
+
+    setLoadingMore(true);
+    const nextPage = pagination.page + 1;
+
+    try {
+      const response = await shopApi.getProductsBySlug({
+        slug: route,
+        page: nextPage,
+        per_page: itemsPerPage,
+        search: searchQuery || undefined,
+        filterType: "brand_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 Title = route.replace(/-/g, " ").toUpperCase();
+
+  const breadcrumbItems = [
+    { text: "HOME", link: "/" },
+    { text: "SHOP", link: "/products/all" },
+    { text: Title },
+  ];
+
+  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">
+            <p className="font-normal uppercase text-[var(--color-secondary-800)] text-xl md:text-3xl lg:text-5xl font-primary">
+              {Title}
+            </p>
+            {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 || Title}`
+                    : `No results found for "${searchQuery}" in ${
+                        categoryName || Title
+                      }`}
+                </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 {Title}
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="ml-auto">
+            <ItemsPerPageSelectClient
+              value={itemsPerPage}
+              onChange={setItemsPerPage}
+            />
+          </div>
+        </div>
+      </div>
+      <section className="mt-10 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 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>
+  );
+}

package/src/app/brand/[id]/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: `Brand Products - ${getStoreName()}`,
+    description: `Browse products from this brand. Find genuine parts and accessories with manufacturer warranty.`,
+  }
+}
+
+export default function BrandDetailLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

package/src/app/brand/[id]/page.tsx

@@ -0,0 +1,176 @@
+import BrandPageClient from "./BrandPageClient";
+import {
+  generateCollectionPageSchema,
+  generateBreadcrumbSchema,
+} from "@/lib/schema";
+import { Metadata } from "next";
+import { Suspense } from "react";
+import ServerProductGrid, {
+  type ServerGridProduct,
+} from "@/app/components/seo/ServerProductGrid";
+
+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 fetchBrandListing(input: {
+  brandSlug: string;
+  page: number;
+  perPage: number;
+}): Promise<{
+  products: ServerGridProduct[];
+  pagination?: { total?: number; page?: number; per_page?: number; total_pages?: number };
+}> {
+  const base = process.env.NEXT_PUBLIC_PARTSLOGIC_URL;
+  if (!base) return { products: [] };
+
+  const url = new URL("/api/search/products", base);
+  url.searchParams.set("brand_slug", input.brandSlug);
+  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?: ServerGridProduct[];
+    pagination?: { total?: number; page?: number; per_page?: number; total_pages?: number };
+  };
+  return { products: Array.isArray(json.products) ? json.products : [], pagination: json.pagination };
+}
+
+export async function generateMetadata({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>;
+  searchParams?: Promise<SearchParams>;
+}): Promise<Metadata> {
+  const { id } = await params;
+  const decodedId = decodeURIComponent(id);
+  const sp = searchParams ? await searchParams : undefined;
+  const page = toInt(getFirstParam(sp?.page));
+
+  const brandName = toTitleCaseFromSlug(decodedId);
+  const basePath = `/brand/${id}`;
+  const canonical = page && page > 1 ? `${basePath}?page=${page}` : basePath;
+
+  return {
+    title: `${brandName} | Shop`,
+    description: `Browse our ${brandName} collection. Find the best products from ${brandName}.`,
+    keywords: `${brandName}, brand, products, buy online`,
+    alternates: {
+      canonical,
+    },
+    openGraph: {
+      title: `${brandName} | Shop`,
+      description: `Browse our ${brandName} collection`,
+      type: "website",
+      url: canonical,
+      images: [{ url: "/Logo.png" }],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: `${brandName} | Shop`,
+      description: `Browse our ${brandName} collection`,
+      images: ["/Logo.png"],
+    },
+  };
+}
+
+export default async function BrandPage({
+  params,
+  searchParams,
+}: {
+  params: Promise<{ id: string }>;
+  searchParams?: Promise<SearchParams>;
+}) {
+  const { id } = await params;
+  const decodedId = decodeURIComponent(id);
+  const sp = searchParams ? await searchParams : undefined;
+  const page = toInt(getFirstParam(sp?.page)) ?? 1;
+
+  const brandName = toTitleCaseFromSlug(decodedId);
+  const listing = await fetchBrandListing({
+    brandSlug: decodedId,
+    page,
+    perPage: 12,
+  });
+
+  // Generate schema.org structured data
+  const collectionSchema = generateCollectionPageSchema(
+    brandName,
+    `Browse our ${brandName} collection. Find the best products from ${brandName}.`,
+    `/brand/${id}`
+  );
+
+  const breadcrumbSchema = generateBreadcrumbSchema([
+    { name: "Home", url: "/" },
+    { name: "Brands", url: "/brands" },
+    { name: brandName, url: `/brand/${id}` },
+  ]);
+
+  return (
+    <>
+      {/* Schema.org structured data */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionSchema) }}
+      />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
+      />
+
+      <main className="h-full w-full">
+        <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 / Brands / {brandName}
+            </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">
+                {brandName}
+              </h1>
+              <p className="text-sm text-[var(--color-secondary-600)]">
+                Browse products from {brandName}.
+              </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>
+                <BrandPageClient />
+              </Suspense>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+}

package/src/app/brands/components/brandsListingClient.tsx

@@ -0,0 +1,97 @@
+"use client";
+import { brandSearchIcon } from "@/app/utils/svgs/brandsSearchIcon";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+interface Brand {
+  id: string | number;
+  name: string;
+  logo?: string;
+  slug?: string;
+  image?: string;
+}
+
+interface BrandsListingClientProps {
+  brands: Brand[];
+}
+
+const BrandsListingClient = ({ brands }: BrandsListingClientProps) => {
+  const [filteredBrands, setFilteredBrands] = useState<Brand[]>(brands);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  useEffect(() => {
+    if (searchTerm.trim() === "") {
+      setFilteredBrands(brands);
+    } else {
+      const filtered = brands.filter((brand) =>
+        brand.name.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+      setFilteredBrands(filtered);
+    }
+  }, [searchTerm, brands]);
+
+  return (
+    <div className="w-full">
+      <div className="mb-8">
+        <div className="relative max-w-2xl">
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            {brandSearchIcon}
+          </div>
+          <input
+            type="text"
+            placeholder="Search brands..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className="block w-full pl-10 pr-3 py-3 border border-gray-300 leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+          />
+        </div>
+      </div>
+
+      <div className="mb-6">
+        <p className="text-gray-600 italic">
+          We carry over{" "}
+          <span className="font-semibold text-gray-900">{brands.length}</span>{" "}
+          aftermarket manufacturers!
+        </p>
+      </div>
+
+      {filteredBrands.length === 0 ? (
+        <div className="text-center py-12">
+          <p className="text-gray-500 text-lg">
+            No brands found matching &quot;{searchTerm}&quot;
+          </p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+          {filteredBrands.map((brand) => (
+            <Link
+              href={`/brand/${brand.slug}`}
+              key={brand.id}
+              className="border border-gray-200 py-2 px-4 hover:shadow-lg transition-shadow duration-200 cursor-pointer bg-white flex flex-col items-center justify-center min-h-[140px]"
+            >
+              <div className="w-full h-24 mb-4 flex items-center justify-center">
+                {brand.logo || brand.image ? (
+                  <img
+                    src={brand.logo || brand.image}
+                    alt={brand.name}
+                    className="max-w-full max-h-full object-contain p-2"
+                  />
+                ) : (
+                  <div className="text-gray-300 text-4xl font-bold">
+                    {brand.name.charAt(0)}
+                  </div>
+                )}
+              </div>
+
+              <h3 className="text-center text-sm font-normal text-gray-900 line-clamp-2 font-secondary">
+                {brand.name}
+              </h3>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default BrandsListingClient;

package/src/app/brands/layout.tsx

@@ -0,0 +1,31 @@
+import { getStoreName } from "@/app/utils/branding";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: `Brands - ${getStoreName()}`,
+  description: `Explore the wide range of automotive brands available at ${getStoreName()}. Find parts and accessories from top manufacturers to enhance your vehicle's performance and style.`,
+  alternates: {
+    canonical: "/brands",
+  },
+  openGraph: {
+    title: `Brands - ${getStoreName()}`,
+    description: `Explore the wide range of automotive brands available at ${getStoreName()}. Find parts and accessories from top manufacturers to enhance your vehicle's performance and style.`,
+    type: "website",
+    url: "/brands",
+    images: [{ url: "/Logo.png" }],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: `Brands - ${getStoreName()}`,
+    description: `Explore the wide range of automotive brands available at ${getStoreName()}. Find parts and accessories from top manufacturers to enhance your vehicle's performance and style.`,
+    images: ["/Logo.png"],
+  },
+};
+
+export default function BrandsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

package/src/app/brands/page.tsx

@@ -0,0 +1,40 @@
+import { CategoryAPIType } from "@/lib/api/shop";
+import Heading from "../components/reuseableUI/heading";
+import BrandsListingClient from "./components/brandsListingClient";
+
+async function fetchBrands(): Promise<CategoryAPIType[]> {
+  try {
+    const partsLogicUrl = process.env.NEXT_PUBLIC_PARTSLOGIC_URL || "";
+    const url = `${partsLogicUrl}/api/brands?page=1&per_page=100`;
+
+    const res = await fetch(url, {
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      next: { revalidate: 3600 }, // Cache for 1 hour
+    });
+
+    if (!res.ok) {
+      throw new Error(`Failed to fetch brands: ${res.status}`);
+    }
+
+    const data = await res.json();
+    return data.brands || [];
+  } catch (error) {
+    console.error("Error fetching brands:", error);
+    return [];
+  }
+}
+
+export default async function BrandsPage() {
+  const brands = await fetchBrands();
+
+  return (
+    <div className="min-h-screen container mx-auto px-4 py-8 lg:py-14 space-y-6">
+      <Heading as="h1" content="Brands" />
+
+      <BrandsListingClient brands={brands} />
+    </div>
+  );
+}