Aiminaabee

List Regions in the Storefront

List available regions for customers to choose from.

On this page

In this guide, you'll learn how to retrieve the list of regions in your storefront.

Good to know: A region is a geographical area that you sell in. Prices, taxes, shipping, and payment methods are scoped to it. The Aiminaabee store code is not a region — pass storeCode first, then resolve a region from the customer's country.

On Next.js, list regions on the server and map countries[].iso_2 → region. See Store Selected Region.

ts

tsCopy
"use server"


export const listRegions = async (
  storeCode: string
): Promise<HttpTypes.StoreRegion[]> => {
  const { regions } = await sdk.store.region.list(storeCode)
  return regions
}

To list regions from any client, send a request to the List Regions 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"


  export default function Regions() {
    const [loading, setLoading] = useState(true)
    const [regions, setRegions] = useState<
      HttpTypes.StoreRegion[]
    >([])


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


      sdk.store.region.list("us")
      .then(({ regions: dataRegions }) => {
        setRegions(dataRegions)
        setLoading(false)
      })
    }, [loading])


    return (
      <div>
        {loading && <span>Loading...</span>}
        {!loading && regions.length === 0 && <span>No regions found.</span>}
        {!loading && regions.length > 0 && (
          <ul>
            {regions.map((region) => (
              <li key={region.id}>{region.name}</li>
            ))}
          </ul>
        )}
      </div>
    )
  }

JS SDK

ts

tsCopy
sdk.store.region.list("us")
  .then(({ regions: dataRegions }) => {
    setRegions(dataRegions)
    setLoading(false)
  })

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

Next, you can learn how to allow the customer to select a region in the Store and Retrieve Region guide.