Example: Show Product Variant's Sale Price

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

Check if a Price is a Sale#

A product variant's price can be a sale price or a regular price. The sale price is set by the merchant in a price list.

To check if a product variant's price is a sale price, check whether the variant's calculated_price.calculated_price.price_list_type field is equal to sale:

Code
const isSale = selectedVariantPrice.calculated_price.calculated_price.price_list_type === "sale"

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.

Display Original and Discount Amounts#

If the price is a sale price, the original price is available in the variant's calculated_price.original_amount field:

Code
1const salePrice = formatPrice(selectedVariantPrice.calculated_price.calculated_amount)2const originalPrice = formatPrice(selectedVariantPrice.calculated_price.original_amount)3const discountedAmount = formatPrice(4  selectedVariantPrice.calculated_price.original_amount - 5  selectedVariantPrice.calculated_price.calculated_amount6)

You define three variables:

• salePrice: The sale price of the variant.
• originalPrice: The original price of the variant.
• discountedAmount: The difference between the original and sale prices.

You can use the original price either to display it or calculate and display the discounted amount.

Full React Example#

For example, to display the sale price and the original price in a React-based storefront:

Code
1"use client" // include with Next.js 13+2
3import { useEffect, useMemo, useState } from "react"4import { HttpTypes } from "@medusajs/types"5import { useRegion } from "@/providers/region"6import { sdk } from "@/lib/sdk"7
8type Props = {9  id: string10}11
12export default function Product({ id }: Props) {13  const [loading, setLoading] = useState(true)14  const [product, setProduct] = useState<15    HttpTypes.StoreProduct | undefined16  >()17  const [selectedOptions, setSelectedOptions] = useState<Record<string, string>>({})18  const { region } = useRegion()19
20  useEffect(() => {21    if (!loading) {22      return 23    }24
25    sdk.store.product.retrieve(id, {26      fields: `*variants.calculated_price`,27      region_id: region.id,28    })29    .then(({ product: dataProduct }) => {30      setProduct(dataProduct)31      setLoading(false)32    })33  }, [loading])34
35  const selectedVariant = useMemo(() => {36    if (37      !product?.variants ||38      !product.options || 39      Object.keys(selectedOptions).length !== product.options?.length40    ) {41      return42    }43
44    return product.variants.find((variant) => variant.options?.every(45      (optionValue) => optionValue.value === selectedOptions[optionValue.option_id!]46    ))47  }, [selectedOptions, product])48
49  const formatPrice = (amount: number): string => {50    return new Intl.NumberFormat("en-US", {51      style: "currency",52      currency: region.currency_code,53    })54    .format(amount)55  }56
57  const selectedVariantPrice = useMemo(() => {58    if (selectedVariant) {59      return selectedVariant60    }61
62    return product?.variants?.sort((a: any, b: any) => {63      return (64        a.calculated_price.calculated_amount -65        b.calculated_price.calculated_amount66      )67    })[0]68  }, [selectedVariant, product])69
70  const price = useMemo(() => {71    if (!selectedVariantPrice) {72      return73    }74
75    // @ts-ignore76    return formatPrice(selectedVariantPrice.calculated_price.calculated_amount)77  }, [selectedVariantPrice])78
79  const isSale = useMemo(() => {80    if (!selectedVariantPrice) {81      return false82    }83
84    // @ts-ignore85    return selectedVariantPrice.calculated_price.calculated_price.price_list_type === "sale"86  }, [selectedVariantPrice])87
88  const originalPrice = useMemo(() => {89    if (!isSale) {90      return91    }92
93    // @ts-ignore94    return formatPrice(selectedVariantPrice.calculated_price.original_amount)95  }, [isSale, selectedVariantPrice])96
97  return (98    <div>99      {loading && <span>Loading...</span>}100      {product && (101        <>102          <h1>{product.title}</h1>103          {(product.options?.length || 0) > 0 && (104            <ul>105              {product.options!.map((option) => (106                <li key={option.id}>107                  {option.title}108                  {option.values?.map((optionValue) => (109                    <button 110                      key={optionValue.id}111                      onClick={() => {112                        setSelectedOptions((prev) => {113                          return {114                            ...prev,115                            [option.id!]: optionValue.value!,116                          }117                        })118                      }}119                    >120                      {optionValue.value}121                    </button>122                  ))}123                </li>124              ))}125            </ul>126          )}127          {selectedVariant && (128            <span>Selected Variant: {selectedVariant.id}</span>129          )}130          {price && (131            <span>132              {!selectedVariant && "From: "}133              {price}134              {isSale && `SALE - Original Price: ${originalPrice}`}135            </span>136          )}137          {product.images?.map((image) => (138            <img src={image.url} key={image.id} />139          ))}140        </>141      )}142    </div>143  )144}

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 to the request retrieving the product. This retrieves for every variant a new calculated_price field holding details about the variant's price.
  • You can pass other pricing query parameters for more accurate pricing. Refer to the Retrieve Product Variant's Prices guide for more information.
• 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.
• Define an isSale memo variable that determines whether the chosen variant's price is a sale price. You do that by checking if the value of the variant's calculated_price.calculated_price.price_list_type field is sale.
• Define an originalPrice memo variable that, if isSale is enabled, has the formatted original price of the chosen variant. The variant's original price is in the calculated_price.original_amount field.
• If isSale is enabled, show a message to the customer indicating that this product is on sale along with the original price.