Aiminaabee

Example: Show Product Variant

Show prices with tax included or excluded.

On this page

In this guide, you'll learn how to show a product variant's price with taxes, with a full React example.

Tip: Refer to the Show Product Variant's Price guide to learn about the general approach to display a product variant's price.

Retrieve Variant's Price with Tax

To retrieve a product variant's price with taxes, you must pass the region_id and country_code query parameters:

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

ts

tsCopy
sdk.store.product.retrieve("us", id, {
  fields: `*variants.calculated_price`,
  region_id: region.id,
  country_code: region.countries[0].iso_2,
})
.then(({ product }) => {
  // TODO use product
  console.log(product)
})

You pass the selected region's ID and the code of its first country as query parameters to the Get Product API route.

Tip: You can also allow the customer to choose their country by showing them the countries in region.countries in a select input, and storing the selected country's code in the local storage.

Display Variant's Price with Taxes

After passing the region_id and country_code as query parameters when retrieving the product, each variant's price object will have a calculated_amount_with_tax property to indicate the price taxes applied:

Tip: Find the implementation of the formatPrice function in the Show Product Variant's Price guide.

ts

tsCopy
const price = formatPrice(selectedVariantPrice.calculated_price.calculated_amount_with_tax)

Where selectedVariantPrice is either the variant the customer selected or the cheapest variant. Learn more about how to set the selected variant for pricing in the Show Product Variant's Price guide.

Tax-Related Properties in Calculated Price

Aside from the calculated_amount_with_tax property, a variant's calculated_price object has the following properties related to taxes:

  1. calculated_amount_without_tax: The calculated amount without taxes. This may be useful if you want to show the customer the price without taxes, and show the applied taxes separately. In that case, you can subtract calculated_amount_without_tax from calculated_amount_with_tax to get the tax amount.
  2. is_calculated_price_tax_inclusive: Whether the calculated_amount property includes taxes. If enabled, you can display the calculated_amount property instead of calculated_amount_with_tax.

Learn more about the calculated_price object in the Retrieve Product Variant's Prices guide.

Full React Example

For example, to display the price with taxes in a React-based storefront:

Tip: - This example uses the useRegion hook defined in the Region React Context guide to retrieve the selected region's currency code.

tsx

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


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


type Props = {
  id: string
}


export default function Product({ id }: Props) {
  const [loading, setLoading] = useState(true)
  const [product, setProduct] = useState<
    HttpTypes.StoreProduct | undefined
  >()
  const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({})
  const region = useRegion()


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


    sdk.store.product.retrieve("us", id, {
      fields: `*variants.calculated_price`,
      region_id: region.id,
      country_code: region.countries[0].iso_2,
    })
    .then(({ product: dataProduct }) => {
      setProduct(dataProduct)
      setLoading(false)
    })
  }, [loading])


  const selectedVariant = useMemo(() => {
    if (
      !product?.variants ||
      !product.options ||
      Object.keys(selectedOptions).length !== product.options?.length
    ) {
      return
    }


    return product.variants.find((variant) => variant.options?.every(
      (optionValue) => optionValue.value === selectedOptions[optionValue.option_id!]
    ))
  }, [selectedOptions, product])


  const formatPrice = (amount: number): string => {
    return new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: region.currency_code,
    })
    .format(amount)
  }


  const selectedVariantPrice = useMemo(() => {
    if (selectedVariant) {
      return selectedVariant
    }


    return product?.variants?.sort((a: any, b: any) => {
      return (
        a.calculated_price.calculated_amount_with_tax -
        b.calculated_price.calculated_amount_with_tax
      )
    })[0]
  }, [selectedVariant, product])


  const price = useMemo(() => {
    if (!selectedVariantPrice) {
      return
    }


    // @ts-ignore
    return formatPrice(
      selectedVariantPrice.calculated_price?.calculated_amount_with_tax || 0
    )
  }, [selectedVariantPrice])


  return (
    <div>
      {loading && <span>Loading...</span>}
      {product && (
        <>
          <h1>{product.title}</h1>
          {(product.options?.length || 0) > 0 && (
            <ul>
              {product.options!.map((option) => (
                <li key={option.id}>
                  {option.title}
                  {option.values?.map((optionValue) => (
                    <button
                      key={optionValue.id}
                      onClick={() => {
                        setSelectedOptions((prev) => {
                          return {
                            ...prev,
                            [option.id!]: optionValue.value!,
                          }
                        })
                      }}
                    >
                      {optionValue.value}
                    </button>
                  ))}
                </li>
              ))}
            </ul>
          )}
          {selectedVariant && (
            <span>Selected Variant: {selectedVariant.id}</span>
          )}
          {price && (
            <span>
              {!selectedVariant && "From: "}
              {price}
            </span>
          )}
          {product.images?.map((image) => (
            <img src={image.url} key={image.id} />
          ))}
        </>
      )}
    </div>
  )
}

In this example, you:

  • Use the useRegion hook defined in the previous Region React Context guide to retrieve the selected region's currency code. This is necessary to format the variant's price.
  • Pass the pricing query parameters, including the selected region's ID and the code of its first country, to the request retrieving the product. This retrieves for every variant a new calculated_price field holding details about the variant's price and taxes.
  • Choose the variant to show its price:
    • If there's a selected variant, choose it.
    • If there isn't a selected variant, retrieve and choose the variant with the cheapest price.
  • Display the selected variant's price with taxes by formatting its price's calculated_amount_with_tax property.