7. Product selection

The first step in the express checkout flow is the product selection step. In this step, the customer will view the product's details, choose its options, then add it to the cart.

Create Card Component

Before creating the component that displays the product selection step, you'll create a Card component that will wrap each step's components in the same styling.

Create the file components/Card/index.tsx with the following content:

1"use client"
2
3import { CheckCircle } from "@aiminaabeejs/admin-icons"
4import { clx, Heading } from "@aiminaabeejs/admin-ui"
5import { useRouter } from "next/navigation"
6
7type CardProps = {
8  title: string
9  isActive: boolean
10  isDone: boolean
11  path: string
12  children: React.ReactNode
13}
14
15export const Card = ({
16  title,
17  isActive,
18  isDone,
19  path,
20  children,
21}: CardProps) => {
22  const router = useRouter()
23
24  return (
25    <div className={clx(
26      "bg-ui-bg-base rounded-lg py-4 px-6 w-full",
27      "flex gap-4 flex-col shadow-elevation-card-rest",
28      !isActive && "cursor-pointer"
29    )}
30    onClick={() => {
31      if (isActive) {
32        return
33      }
34
35      router.push(path)
36    }}
37    >
38      <Heading level="h2" className="flex justify-between items-center">
39        <span>{title}</span>
40        {isDone && <CheckCircle className="text-ui-tag-green-icon" />}
41      </Heading>
42      {isActive && children}
43    </div>
44  )
45}

You create a Card component that accepts the following props:

• title: The title of the card.
• isActive: A boolean indicating whether the card is active, which is enabled based on the current step of the express checkout flow.
• isDone: A boolean indicating whether the card is completed, which is enabled when the customer completes the step's requirements, such as select a shipping method.
• path: The step's path.
• children: The content of the card.

The card shows the step's title and a check mark if it was completed. The card's content is only shown if the step is currently active.

Also, when the step is completed, its card can be clicked to allow the customer to go back and make changes to their choices or input.

You'll wrap each step component you'll create next with this Card component.

Create Product Component

You'll now create the component that shows the product selection step.

Create the file components/Product/index.tsx with the following content:

1"use client"
2
3import {
4  useState,
5} from "react"
6import { HttpTypes } from "@aiminaabeejs/types"
7import { useRegion } from "@/providers/region"
8import { useCart } from "@/providers/cart"
9import { useRouter } from "next/navigation"
10
11type ProductProps = {
12  handle: string
13  isActive: boolean
14}
15
16export const Product = ({ handle, isActive }: ProductProps) => {
17  const [loading, setLoading] = useState(true)
18  const [product, setProduct] = useState<HttpTypes.StoreProduct>()
19  const [selectedOptions, setSelectedOptions] = useState<
20    Record<string, string>
21  >({})
22  const [quantity, setQuantity] = useState(1)
23  const { region } = useRegion()
24  const { cart, addToCart } = useCart()
25  const router = useRouter()
26
27  // TODO get product details
28}

You create a Product component that receives as a prop the product's handle and whether the component is active.

The component defines the following variables:

• loading: A boolean state variable indicating whether an operation is loading, such as the product's details.
• product: A state variable that holds the product's details, which you'll retrieve from the Aiminaabee application.
• selectedOptions: A state variable that holds the product options that the customer has selected, such as color or size.
• quantity: A state variable that holds the product quantity to add to the cart.
• region: The selected region retrieved from the region context.
• cart and addToCart: The customer's cart and the function to add the selected product variant to the cart, retrieved from the cart context.
• router: The router instance to navigate between steps.

Retrieve Product Details

Next, you'll retrieve the product's details from the Aiminaabee application. Start by adding the following imports to the top of the file:

1import { sdk } from "@/lib/sdk"
2import {
3  // other imports...
4  useEffect,
5} from "react"

Then, replace the TODO in the Product component with the following:

1useEffect(() => {
2  if (product || !region) {
3    return
4  }
5
6  sdk.store.product.list("us", {
7    handle,
8    region_id: region.id,
9    fields: `*variants.calculated_price,+variants.inventory_quantity`,
10  })
11  .then(({ products }) => {
12    if (products.length) {
13      setProduct(products[0])
14    }
15    setLoading(false)
16  })
17}, [product, region])
18
19// TODO set selected variant

In the useEffect hook, you use the JS SDK to send a request to the List Products API route, passing the following query parameters:

• handle: Filter the list of products with the unique handler.
• region_id: Set the selected region, which is necessary to retrieve the correct pricing.
• fields: Specify comma-separated fields to retrieve along with the default fields. You pass *variants.calculated_price to retrieve the product variants' price for the current context, and +variants.inventory_quantity to retrieve the variants' inventory quantity.

The API route returns a list of products, but since you passed the unique handle as a filter, the array will have only one item if the product exists. You set the retrieved product in the product state variable, and set loading to false.

Set Selected Variant

A product has variants for each of its option combinations (such as color and size). When a customer selects the values for each of the product's options, you'll find the associated variant to show its price and add it to the cart.

To determine the selected variant, first, add the following import at the top of the file:

1import {
2  // other imports...
3  useMemo,
4} from "react"

Then, replace the TODO in Product component with the following:

1const selectedVariant = useMemo(() => {
2  if (
3    !product?.variants ||
4    !product.options ||
5    Object.keys(selectedOptions).length !== product.options?.length
6  ) {
7    return
8  }
9
10  return product.variants.find((variant) => variant.options?.every(
11    (optionValue) => optionValue.id === selectedOptions[optionValue.option_id!]
12  ))
13}, [selectedOptions, product])
14
15// TODO set variant to retrieve its price

You create a selectedVariant memoized variable that holds the selected variant based on the selected options. You find the selected variant by filtering the product's variants to find the one that matches all the selected options.

Set Price to Show

Next, you'll set the price to show to the customer. The Aiminaabee application returns the price as a number. To display it with currency, you'll create a utility that you'll re-use whenever you show a price.

Create the file lib/price.ts with the following content:

1export const formatPrice = (amount: number, currency?: string): string => {
2  return new Intl.NumberFormat("en-US", {
3    style: "currency",
4    currency: currency || "usd",
5  })
6  .format(amount)
7}

The formatPrice utility function uses the Intl.NumberFormat API to format a number with a currency code.

Go back to components/Product/index.tsx and import the utility at the top of the file:

1import { formatPrice } from "../../lib/price"

Then, replace the TODO in the Product component with the following:

1const price = useMemo(() => {
2    const selectedVariantPrice = selectedVariant ||
3      product?.variants?.sort((a: HttpTypes.StoreProductVariant, b: HttpTypes.StoreProductVariant) => {
4        if (!a.calculated_price?.calculated_amount && !b.calculated_price?.calculated_amount) {
5          return 0
6        }
7        if (!a.calculated_price?.calculated_amount) {
8          return 1
9        }
10        if (!b.calculated_price?.calculated_amount) {
11          return -1
12        }
13        return (
14          a.calculated_price?.calculated_amount -
15          b.calculated_price?.calculated_amount
16        )
17      })[0]
18
19    return formatPrice(
20      selectedVariantPrice?.calculated_price?.calculated_amount || 0,
21      region?.currency_code
22    )
23  }, [selectedVariant, product, region])
24
25// TODO determine whether the product is in stock

In the price memoized variable, you first determine the variant to show its price:

• If a variant is selected, you show its price.
• Otherwise, you show the price of the variant having the lowest price.

Then, you return the price formatted with the formatPrice utility function, passing the variant's price and the selected region's currency code as arguments.

Determine Whether Selected Variant is in Stock

In Aiminaabee, each product variant has different inventory quantity. So, after the customer selects a variant, you'll check whether it's in stock before allowing them to add it to the cart.

To determine whether the variant is in stock, replace the TODO in the Product component with the following:

1const isInStock = useMemo(() => {
2  if (!selectedVariant) {
3    return undefined
4  }
5
6  return selectedVariant.manage_inventory === false ||
7    (selectedVariant.inventory_quantity || 0) > 0
8}, [selectedVariant])
9
10// TODO implement add to cart logic

You create an isInStock memoized variable that holds a boolean indicating whether the selected variant is in stock. A variant is considered in stock if:

• The variant's manage_inventory property is set to false, meaning Aiminaabee doesn't manage the variant's inventory quantity, so, it's always considered in stock;
• Or the variant's inventory_quantity property is greater than 0.

Implement Add to Cart Logic

After the customer selects the variant and quantity, they can add it to the cart. To implement the logic of adding the product to the cart, replace the TODO in the Product component with the following:

1const handleAddToCart = () => {
2  if (!selectedVariant || !isInStock || !quantity) {
3    return
4  }
5  setLoading(true)
6
7  addToCart(selectedVariant.id!, quantity)
8  .then(() => {
9    router.push(`/${handle}?step=address`)
10  })
11}
12
13// TODO render product details

You add a handleAddToCart function that first checks that a variant is selected, that it's in stock, and that the customer has set a quantity greater than 0.

If the conditions are satisfied, you set loading to true, then call the addToCart function from the cart context, passing the selected variant's ID and the quantity as arguments.

After the product is added to the cart, you navigate to the address step, which you'll create later.

Render Product Details

Finally, you'll add the return statement showing the product's details and allowing the customer to add the product to the cart.

First, add the following imports at the top of the file:

1import { Card } from "../Card"
2import { Spinner } from "@aiminaabeejs/admin-icons"
3import { Button, Input, Select } from "@aiminaabeejs/admin-ui"

Then, replace the last TODO in the Product component with the following:

1return (
2  <Card
3    title="Product"
4    isActive={isActive}
5    isDone={cart?.items !== undefined && cart?.items?.length > 0}
6    path={`/${handle}`}
7  >
8    {loading && <Spinner />}
9    {!loading && !product && <div>Product not found</div>}
10    {!loading && product && (
11      <div className="flex gap-4 flex-col">
12        <div className="flex gap-4">
13          <img
14            src={product.thumbnail || ""}
15            className="rounded"
16            width={160}
17            height={200}
18          />
19          <div className="flex flex-col gap-1">
20            {product.categories?.length && (
21              <span className="text-xs text-ui-fg-muted">
22                {product.categories[0].name}
23              </span>
24            )}
25            <span className="text-base text-ui-fg-base">
26              {product.title}
27            </span>
28            <span className="text-sm text-ui-fg-subtle">
29              {price}
30            </span>
31          </div>
32        </div>
33        <p className="text-sm text-ui-fg-subtle">
34          {product.description}
35        </p>
36        {product.options?.map((option) => (
37          <div className="flex flex-col gap-1" key={option.id}>
38            <span className="text-xs text-ui-fg-muted">
39              {option.title}
40            </span>
41            <Select
42              onValueChange={(value) => {
43                setSelectedOptions((prev) => ({
44                  ...prev,
45                  [option.id!]: value,
46                }))
47              }}
48              value={selectedOptions[option.id!]}
49            >
50              <Select.Trigger>
51                <Select.Value placeholder={`Select ${option.title}`} />
52              </Select.Trigger>
53              <Select.Content>
54                {option.values?.map((value) => (
55                  <Select.Item
56                    key={value.id}
57                    value={value.id}
58                  >
59                    {value.value}
60                  </Select.Item>
61                ))}
62              </Select.Content>
63            </Select>
64          </div>
65        ))}
66        <div className="flex flex-col gap-1">
67          <span className="text-xs text-ui-fg-muted">
68            Quantity
69          </span>
70          <Input
71            name="quantity"
72            placeholder="Quantity"
73            type="number"
74            min="1"
75              max={selectedVariant?.inventory_quantity || undefined}
76            value={quantity}
77            onChange={(e) => setQuantity(parseInt(e.target.value))}
78          />
79        </div>
80        <hr className="bg-ui-bg-subtle" />
81        <Button
82          disabled={!selectedVariant || !isInStock || loading}
83          onClick={handleAddToCart}
84          className="w-full"
85        >
86          {!selectedVariant && "Select Options"}
87          {selectedVariant && !isInStock && "Out of Stock"}
88          {selectedVariant && isInStock && "Add to Cart"}
89        </Button>
90      </div>
91    )}
92  </Card>
93)

You wrap the product step with the Card component you created earlier. In the card:

• If loading is enabled, you show a spinner icon imported from @aiminaabeejs/admin-icons.
• If loading is disabled and the product isn't found, you show a not found message.
• If loading is disabled and the product is found, you show the product's details, including the product's image, title, price, and description.

You also loop over the product's options and show a select input, imported from @aiminaabeejs/admin-ui, to allow the customer to select the value of each option.

Once the customer has selected a variant that's in stock, they can click the button to add the product to the cart, which will execute the handleAddToCart function you created earlier.

Add to Router Component

Finally, you'll add the Product component to the Router component to show the product selection step.

First, import the Product component at the top of the components/Router/index.tsx file:

1import { Product } from "../Product"

Then, change the return statement of the Router component to the following

1return (
2  <>
3    <Product handle={handle} isActive={activeTab === "product"} />
4  </>
5)

This will show the product step and expand its details if activeTab is product.

Test it Out

To test out what you've implemented so far, first, start the Aiminaabee application by running the following command in the Aiminaabee project's directory:

1npm run dev

This will run the Aiminaabee application at http://localhost:3000.

Then, while the Aiminaabee application is running, run the following command in the Next.js project to start the development server:

1npm run dev

This will run the storefront at http://localhost:3000. To open the express checkout page, go to http://localhost:3000/sweatpants, assuming you have a product with the handle sweatpants.

You should see the product's details, including the image, title, price, description, and options. You can select the options and quantity, then click the "Add to Cart" button to add the product to the cart.

Once you add the product to the cart, the Product card will collapse, and the next step should be shown. You'll add it next.

Next: 8. Address