Aiminaabee

Retrieve a Category in the Storefront

Retrieve a category by ID or handle.

On this page

In this guide, you'll learn how to retrieve a product category and its details in the storefront.

How to Retrieve a Product Category in Storefront?

There are two ways to retrieve a product category:

Retrieve a Product Category by ID

To retrieve a product category by its ID, send a request to the Get a Product Category API route:

Tip: Learn how to install and configure the JS SDK in the Getting started guide.

React

tsx

tsxCopy
"use client" // include with Next.js 13+


  import { useEffect, useState } from "react"
  import { HttpTypes } from "@aiminaabeejs/types"
  import { sdk } from "@/lib/sdk"


  type Props = {
    id: string
  }


  export default function Category({ id }: Props) {
    const [loading, setLoading] = useState(true)
    const [category, setCategory] = useState<
      HttpTypes.StoreProductCategory | undefined
    >()


    useEffect(() => {
      if (!loading) {
        return
      }


      sdk.store.category.retrieve("us", id)
      .then(({ product_category }) => {
        setCategory(product_category)
        setLoading(false)
      })
    }, [loading])


    return (
      <div>
        {loading && <span>Loading...</span>}
        {category && (
          <>
            <h1>{category.name}</h1>
            <p>{category.description}</p>
          </>
        )}
      </div>
    )
  }

JS SDK

ts

tsCopy
sdk.store.category.retrieve("us", id)
  .then(({ product_category }) => {
    // use the product...
    console.log(product)
  })

In this example, you send a request to the Get a Product Category API route with the category's ID.

The response has a product_category field, which is a product category object.

Retrieve a Product Category by Handle

To retrieve a product by its handle, send a request to the List Product Categories API route passing it the handle query parameter:

React

tsx

tsxCopy
"use client" // include with Next.js 13+


  import { useEffect, useState } from "react"
  import { HttpTypes } from "@aiminaabeejs/types"
  import { sdk } from "@/lib/sdk"


  type Props = {
    handle: string
  }


  export default function Category({ handle }: Props) {
    const [loading, setLoading] = useState(true)
    const [category, setCategory] = useState<
      HttpTypes.StoreProductCategory | undefined
    >()


    useEffect(() => {
      if (!loading) {
        return
      }


      sdk.store.category.list("us", {
        handle,
      })
      .then(({ product_categories }) => {
        if (product_categories.length) {
          setCategory(product_categories[0])
        }
        setLoading(false)
      })
    }, [loading])


    return (
      <div>
        {loading && <span>Loading...</span>}
        {!loading && !category && (
          <span>Product category not found</span>
        )}
        {category && (
          <>
            <h1>{category.name}</h1>
            <p>{category.description}</p>
          </>
        )}
      </div>
    )
  }

JS SDK

ts

tsCopy
sdk.store.category.list("us", {
    handle,
  })
  .then(({ product_categories }) => {
    if (!product_categories.length) {
      // product categories with the specified handle doesn't exist
      return
    }
    // use the product category...
    console.log(product_categories[0])
  })

In this example, you filter the product categories by their handle and retrieve the first product category that matches the handle. Since handles are unique, you can be sure that the product category you retrieve is the one you're looking for.

If no product category matches the handle, the product category doesn't exist, so you can show a 404 error or a custom message to the customer.

The product category in the response is a product category object.