Chord OMS
...
Next.js
Guides

Next.js Shopify Storefront API Upgrade Guide

10min

These releases upgrade the Shopify Storefront API version toย 2023-04. Prior to these releases, the Chord SDK used version 2022-07 of the Storefront API.

Upgrading to these releases is advised because Shopify will stop supporting version 2022-07 of the Storefront API on July 1, 2023.

New Releases

@chordcommerce/[email protected] @chordcommerce/[email protected] @chordcommerce/[email protected]

Major Changes

These releases contain changes to the price and image objects returned by Chord SDK methods, due to underlying Shopify Storefront API changes. These changes are:

Monetary properties

Shopify Storefront API versionย 2022-01 includes a significant breaking change to monetary fields, so the monetary properties returned by the Chord SDK have been renamed to match.

As of @chordcommerce/[email protected], the following properties are no longer a string, but an object with properties for amount and currencyCode (ex. {"amount": "0.0", "currencyCode": "USD" }):

  • variant.price
  • checkout.totalTax
  • checkout.subtotalPrice
  • checkout.totalPrice

All monetary properties that have a V2 suffix have been renamed without the V2 suffix. For example, variant.compareAtPriceV2 is now variant.compareAtPrice. These properties are:

  • variant.priceV2: use variant.price instead
  • variant.compareAtPriceV2: use variant.compareAtPrice instead
  • order.subtotalPriceV2: use order.subtotalPrice instead
  • order.totalPriceV2: use order.totalPrice instead
  • order.totalRefundedV2: use order.totalRefunded instead
  • order.totalShippingPriceV2: use order.totalShippingPrice instead
  • order.totalTaxV2: use order.totalTax instead
  • order.appliedGiftCards.amountUsedV2: use order.appliedGiftCards.amountUsed instead
  • order.appliedGiftCards.balanceV2: use order.appliedGiftCards.balance instead
  • order.shippingLine.priceV2: use order.shippingLine.price instead
  • checkout.paymentDueV2: use checkout.paymentDue instead
  • checkout.totalTaxV2: use checkout.totalTax instead
  • checkout.subtotalPriceV2: use checkout.subtotalPrice instead
  • checkout.totalPriceV2: use checkout.totalPrice instead
  • giftCard.amountUsedV2: use giftCard.amountUsed instead

Image source property

Shopify Storefront API version 2022-10 deprecated the originalSrc property of images, so the image source property has been renamed to match.

As of @chordcommerce/[email protected], the originalSrc property of all images has been renamed to url.

Upgrade Guide

1. Update dependencies

  1. Update @chordcommerce/chord-js-performance to ^3.0.0
  2. Update @chordcommerce/chord-js-auth-shopify to ^2.0.1
  3. If you have @chordcommerce/product-rss-feed as a dependency, update to ^4.0.0

2. Update monetary properties

Update code that uses the following properties to handle an object instead of a string (ex. {"amount": "0.0", "currencyCode": "USD" }):

  • variant.price: update to variant.price.amount
  • checkout.totalTax: update to checkout.totalTax.amount
  • checkout.subtotalPrice: update to checkout.subtotalPrice.amount
  • checkout.totalPrice: update to checkout.totalPrice.amount

Update all monetary properties to drop the V2 suffix. For example, update variant.compareAtPriceV2 to variant.compareAtPrice.

3. Update product and variant image paths

@chordcommerce/[email protected] renames the originalSrc property of product and variant images to url. For example, this code:

JS
๏ปฟ

Should be replaced with this:

JS
๏ปฟ

4. Update any references to the Shopify Storefront API version

We suggest updating all Storefront API versions to 2023-04 for consistency. Searching your code for the Shopify Storefront API, myshopify.com/api, might be helpful. To update the version, just change the version in the Storefront API path. For example, this:

JS
๏ปฟ

Should be replaced with this:

JS
๏ปฟ

If you are querying the Storefront API directly, without using @chordcommerce/chord-js-performance, be sure to check for breaking changes before upgrading the Storefront API version.

Example Migration

See an example of migrating a Next.js site by checking out how Chord migrated the Next.js starter kit.