List Product Collections in Storefront

In this document, you'll learn how to list product collections in the storefront, including paginating and filtering them.

List Product Collections#

To retrieve the list of product collections, send a request to the List Product Collections API route:

The response has a collections field, which is an array of product collections.

---

Paginate Product Collections#

To paginate product collections, pass the following query parameters:

• limit: The number of product collections to return in the request.
• offset: The number of product collections to skip before the returned product collections. You can calculate this by multiplying the current page with the limit.

The response object returns a count field, which is the total count of product collections. Use it to determine whether there are more product collections that can be loaded.

For example:

Code
1"use client" // include with Next.js 13+2
3import { useEffect, useState } from "react"4import { HttpTypes } from "@medusajs/types"5
6export default function Collections() {7  const [loading, setLoading] = useState(true)8  const [collections, setCollections] = useState<9    HttpTypes.StoreCollection[]10  >([])11  const limit = 2012  const [currentPage, setCurrentPage] = useState(1)13  const [hasMorePages, setHasMorePages] = useState(false)14
15  useEffect(() => {16    if (!loading) {17      return 18    }19
20    const offset = (currentPage - 1) * limit21
22    const searchParams = new URLSearchParams({23      limit: `${limit}`,24      offset: `${offset}`,25    })26
27    fetch(`http://localhost:9000/store/collections?${28      searchParams.toString()29    }`, {30      credentials: "include",31      headers: {32        "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",33      },34    })35    .then((res) => res.json())36    .then(({ collections: dataCollections, count }) => {37      setCollections((prev) => {38        if (prev.length > offset) {39          // product collections already added because 40          // the same request has already been sent41          return prev42        }43        return [44          ...prev,45          ...dataCollections,46        ]47      })48      setHasMorePages(count > limit * currentPage)49      setLoading(false)50    })51  }, [loading])52
53  return (54    <div>55      {loading && <span>Loading...</span>}56      {!loading && collections.length === 0 && (57        <span>No product collections found.</span>58      )}59      {!loading && collections.length > 0 && (60        <ul>61          {collections.map((collection) => (62            <li key={collection.id}>{collection.title}</li>63          ))}64        </ul>65      )}66      {!loading && hasMorePages && (67        <button68          onClick={() => {69            setCurrentPage((prev) => prev + 1)70            setLoading(true)71          }}72          disabled={loading}73        >74          Load More75        </button>76      )}77    </div>78  )79}

---

Filter Collections#

The List Product Collections API route accepts query parameters to filter the collections by title, handle, and more.

Refer to the API reference for the list of accepted query parameters.

For example:

Code
1const searchParams = new URLSearchParams({2  title: "test",3})4
5fetch(`http://localhost:9000/store/collections?${6  searchParams.toString()7}`, {8  credentials: "include",9  headers: {10    "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_KEY || "temp",11  },12})13.then((res) => res.json())14.then(({ collections, count }) => {15  // TODO set collections...16})

Edit this page