Merge pull request #170 from medusajs/add-product-categories

feat: add product categories support

Author: VariableVic

src/app/(main)/[category]/[subcategory]/loading.tsx

@@ -0,0 +1,5 @@
+import SkeletonCollectionPage from "@modules/skeletons/templates/skeleton-collection-page"
+
+export default function Loading() {
+  return <SkeletonCollectionPage />
+}

src/app/(main)/[category]/[subcategory]/page.tsx

@@ -0,0 +1,38 @@
+import { getCategoryByHandle } from "@lib/data"
+import CategoryTemplate from "@modules/categories/templates"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+type Props = {
+  params: {
+    category: string
+    subcategory: string
+  }
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { product_categories } = await getCategoryByHandle(
+    `${params.category}/${params.subcategory}`
+  ).catch((err) => {
+    notFound()
+  })
+
+  const category = product_categories[0]
+
+  return {
+    title: `${category.name} | Acme Store`,
+    description: `${category.name} category`,
+  }
+}
+
+export default async function CategoryPage({ params }: Props) {
+  const { product_categories, parent } = await getCategoryByHandle(
+    `${params.category}/${params.subcategory}`
+  ).catch((err) => {
+    notFound()
+  })
+
+  const category = product_categories[0]
+
+  return <CategoryTemplate category={category} parent={parent} />
+}

src/app/(main)/[category]/loading.tsx

@@ -0,0 +1,5 @@
+import SkeletonCollectionPage from "@modules/skeletons/templates/skeleton-collection-page"
+
+export default function Loading() {
+  return <SkeletonCollectionPage />
+}

src/app/(main)/[category]/page.tsx

@@ -0,0 +1,35 @@
+import { getCategoryByHandle } from "@lib/data"
+import CategoryTemplate from "@modules/categories/templates"
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+
+type Props = {
+  params: { category: string }
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { product_categories } = await getCategoryByHandle(
+    params.category
+  ).catch((err) => {
+    notFound()
+  })
+
+  const category = product_categories[0]
+
+  return {
+    title: `${category.name} | Acme Store`,
+    description: `${category.name} category`,
+  }
+}
+
+export default async function CategoryPage({ params }: Props) {
+  const { product_categories } = await getCategoryByHandle(
+    params.category
+  ).catch((err) => {
+    notFound()
+  })
+
+  const category = product_categories[0]
+
+  return <CategoryTemplate category={category} />
+}

src/app/api/categories/[category]/[subcategory]/route.ts

@@ -0,0 +1,78 @@
+import { NextRequest, NextResponse } from "next/server"
+import { initialize as initializeProductModule } from "@medusajs/product"
+import { ProductCategoryDTO, ProductDTO } from "@medusajs/types/dist/product"
+import { notFound } from "next/navigation"
+import getPrices from "@lib/util/get-product-prices"
+import filterProductsByStatus from "@lib/util/filter-products-by-status"
+
+type ProductCategoryResponse = ProductCategoryDTO & {
+  products: ProductDTO[]
+}
+
+/**
+ * This endpoint uses the serverless Product Module to retrieve a category and its products by handle.
+ * The module connects directly to you Medusa database to retrieve and manipulate data, without the need for a dedicated server.
+ * Read more about the Product Module here: https://docs.medusajs.com/modules/products/serverless-module
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Record<string, any> }
+) {
+  const productService = await initializeProductModule()
+
+  const { category, subcategory } = params
+
+  const searchParams = Object.fromEntries(request.nextUrl.searchParams)
+  const { offset, limit, cart_id } = searchParams
+
+  const {
+    [0]: { name: parent_name, handle: parent_handle },
+    [1]: { products, ...categoryMeta },
+  } = (await productService
+    .listCategories(
+      {
+        handle: [`${category}/${subcategory}`, category],
+      },
+      {
+        relations: [
+          "products",
+          "products.variants",
+          "products.variants.options",
+          "products.tags",
+          "products.options",
+          "products.status",
+        ],
+        select: ["id", "handle", "name", "description"],
+        take: 2,
+      }
+    )
+    .catch((e) => {
+      return notFound()
+    })) as ProductCategoryResponse[]
+
+  const publishedProducts = filterProductsByStatus(products, "published")
+
+  const count = publishedProducts.length || 0
+
+  const offsetInt = parseInt(offset) || 0
+  const limitInt = parseFloat(limit) || 12
+
+  const productsSlice = publishedProducts.slice(offsetInt, offsetInt + limitInt)
+
+  const productsWithPrices = await getPrices(productsSlice, cart_id)
+
+  const nextPage = offsetInt + limitInt
+
+  return NextResponse.json({
+    parent: {
+      name: parent_name,
+      handle: parent_handle,
+    },
+    product_categories: [categoryMeta],
+    response: {
+      products: productsWithPrices,
+      count,
+    },
+    nextPage: count > nextPage ? nextPage : null,
+  })
+}

src/app/api/categories/[category]/route.ts

@@ -0,0 +1,74 @@
+import { NextRequest, NextResponse } from "next/server"
+import { initialize as initializeProductModule } from "@medusajs/product"
+import { ProductCategoryDTO, ProductDTO } from "@medusajs/types/dist/product"
+import { notFound } from "next/navigation"
+import getPrices from "@lib/util/get-product-prices"
+import filterProductsByStatus from "@lib/util/filter-products-by-status"
+
+type ProductCategoryResponse = ProductCategoryDTO & {
+  products: ProductDTO[]
+}
+
+/**
+ * This endpoint uses the serverless Product Module to retrieve a category and its products by handle.
+ * The module connects directly to you Medusa database to retrieve and manipulate data, without the need for a dedicated server.
+ * Read more about the Product Module here: https://docs.medusajs.com/modules/products/serverless-module
+ */
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Record<string, any> }
+) {
+  const productService = await initializeProductModule()
+
+  const { category } = params
+
+  const searchParams = Object.fromEntries(request.nextUrl.searchParams)
+  const { offset, limit, cart_id } = searchParams
+
+  const {
+    [0]: { products, ...categoryMeta },
+  } = (await productService
+    .listCategories(
+      {
+        handle: category,
+      },
+      {
+        relations: [
+          "products",
+          "products.variants",
+          "products.variants.options",
+          "products.tags",
+          "products.options",
+          "products.status",
+          "category_children",
+        ],
+        select: ["id", "handle", "name", "description"],
+        take: 1,
+      }
+    )
+    .catch((e) => {
+      return notFound()
+    })) as ProductCategoryResponse[]
+
+  const publishedProducts = filterProductsByStatus(products, "published")
+
+  const count = publishedProducts.length || 0
+
+  const offsetInt = parseInt(offset) || 0
+  const limitInt = parseFloat(limit) || 12
+
+  const productsSlice = publishedProducts.slice(offsetInt, offsetInt + limitInt)
+
+  const productsWithPrices = await getPrices(productsSlice, cart_id)
+
+  const nextPage = offsetInt + limitInt
+
+  return NextResponse.json({
+    product_categories: [categoryMeta],
+    response: {
+      products: productsWithPrices,
+      count,
+    },
+    nextPage: count > nextPage ? nextPage : null,
+  })
+}

src/app/api/categories/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from "next/server"
+import { initialize as initializeProductModule } from "@medusajs/product"
+import { notFound } from "next/navigation"
+
+/**
+ * This endpoint uses the serverless Product Module to list and count all product categories.
+ * The module connects directly to you Medusa database to retrieve and manipulate data, without the need for a dedicated server.
+ * Read more about the Product Module here: https://docs.medusajs.com/modules/products/serverless-module
+ */
+export async function GET(request: NextRequest) {
+  const productService = await initializeProductModule()
+
+  const { offset } = Object.fromEntries(request.nextUrl.searchParams)
+
+  const [product_categories, count] = await productService
+    .listAndCountCategories(
+      {},
+      {
+        select: ["id", "handle", "name", "description", "parent_category"],
+        relations: ["category_children"],
+        skip: parseInt(offset) || 0,
+        take: 100,
+      }
+    )
+    .catch((e) => {
+      return notFound()
+    })
+
+  return NextResponse.json({
+    product_categories,
+    count,
+  })
+}

src/app/api/products/route.ts

@@ -1,5 +1,6 @@
 import { NextResponse, NextRequest } from "next/server"
 import getPrices from "@lib/util/get-product-prices"
+import filterProductsByStatus from "@lib/util/filter-products-by-status"
 
 import { initialize as initializeProductModule } from "@medusajs/product"
 import {
@@ -59,7 +60,7 @@ async function getProductsByCollectionId(queryParams: Record<string, any>) {
 
   const products = data.map((c) => c.products).flat() as ProductDTO[]
 
-  const publishedProducts = filterPublishedProducts(products)
+  const publishedProducts = filterProductsByStatus(products, "published")
 
   const count = publishedProducts.length
 
@@ -97,7 +98,7 @@ async function getProducts(params: Record<string, any>) {
     withDeleted: false,
   })
 
-  const publishedProducts = filterPublishedProducts(data)
+  const publishedProducts = filterProductsByStatus(data, "published")
 
   const productsWithPrices = await getPrices(publishedProducts, cart_id)
 
@@ -109,7 +110,3 @@ async function getProducts(params: Record<string, any>) {
     nextPage: count > nextPage ? nextPage : null,
   }
 }
-
-function filterPublishedProducts(products: ProductDTO[]) {
-  return products.filter((product) => product.status === "published")
-}