Aiminaabee

Retrieve a Collection

List products in a collection.

On this page

In this guide, you'll learn how to retrieve a collection's products in the storefront.

In your storefront, you may want to display a collection's products to the customers. To do so, you can retrieve the products that belong to a collection and display them in your storefront.

To retrieve a collection's products in the storefront, send a request to the List Products API route passing it the collection_id query parameter:

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 = {
    collectionId: string
  }


  export default function CollectionProducts({
    collectionId,
  }: Props) {
    const [loading, setLoading] = useState(true)
    const [products, setProducts] = useState<
      HttpTypes.StoreProduct[]
    >([])
    const limit = 20
    const [currentPage, setCurrentPage] = useState(1)
    const [hasMorePages, setHasMorePages] = useState(false)


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


      const offset = (currentPage - 1) * limit


      sdk.store.product.list("us", {
        limit,
        offset,
        collection_id: collectionId,
      })
      .then(({ products: dataProducts, count }) => {
        setProducts((prev) => {
          if (prev.length > offset) {
            // products already added because the same request has already been sent
            return prev
          }
          return [
            ...prev,
            ...dataProducts,
          ]
        })
        setHasMorePages(count > limit * currentPage)
        setLoading(false)
      })
    }, [loading])


    return (
      <div>
        {loading && <span>Loading...</span>}
        {!loading && products.length === 0 && (
          <span>No products found for collection.</span>
        )}
        {!loading && products.length > 0 && (
          <ul>
            {products.map((product) => (
              <li key={product.id}>{product.title}</li>
            ))}
          </ul>
        )}
        {!loading && hasMorePages && (
          <button
            onClick={() => {
              setCurrentPage((prev) => prev + 1)
              setLoading(true)
            }}
            disabled={loading}
          >
            Load More
          </button>
        )}
      </div>
    )
  }

JS SDK

ts

tsCopy
sdk.store.product.list("us", {
    // other query params...
    collection_id: collectionId,
  })
  .then(({ products, count }) => {
    // use products...
    console.log(products)
  })

In this example, you retrieve the products that belong to a collection by passing the collection's ID as a query parameter to the List Products API route. You can also pass other query parameters to filter or paginate the products, such as limit and offset.

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