--- title: Release Notes slug: oms/_etK-release-notes docTags: createdAt: 2022-11-08T14:21:27.000Z --- ## v5.0.0 This major release upgrades the Shopify Storefront API version to `2023-04`. Prior to this release, this theme used Shopify Storefront API version `2022-07`. Upgrading to this release is advised because Shopify will stop officially supporting version `2022-07` of the Storefront API on July 1, 2023. This release 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 such as order total and variant price [have been renamed](https://shopify.dev/docs/api/release-notes/2022-10#changes-to-moneyv2-related-fields). - The `originalSrc` property of images [has been renamed](https://shopify.dev/docs/api/release-notes/2022-01#graphql-storefront-api-changes) to `url`. This release only includes these two breaking changes. See the [v4.x to v5.x Migration Guide](docId\:tK86oaNeN5zWOa2sEMr-k) for detailed instructions on upgrading to this release. ## v4.0.0 This major release upgrades the Shopify Storefront API version to `2022-07`. Prior to this release, this theme used the oldest available version of the Storefront API. Upgrading to this release is strongly advised because two breaking changes will impact users around January 1, 2023, when Shopify starts serving the version `2022-04` to users. These two breaking changes are: - Shopify IDs are [no longer Base64 encoded](https://shopify.dev/changelog/changes-to-storefront-api-object-ids). - `presentmentPrices` has been removed from the API and will cause an error if included in the GraphQL query. Shopify now [supports multi-currency in a different way](https://shopify.dev/custom-storefronts/internationalization/international-pricing). This release only includes fixes for these two breaking changes. A subsequent release will add new features, deprecate old ones, and advance the API version to the latest, `2022-10`. See the [v3.x to v4.x Migration Guide](docId\:IpHLejV2aOg6TzGDNHCwE) for detailed instructions on upgrading to this release. ## v3.0.1 This release fixes an error when running `npm install` on a site using this package without the `--legacy-peer-deps` flag: ```Text npm ERR! Could not resolve dependency: npm ERR! peer react@"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/router@1.3.4 ``` This fix removes `@reach/router` as a dependency. `@reach/router` is incompatible with Gatsby 4. Gatsby 4 includes a fork, `@gatsbyjs/reach-router`, and an alias so that `@reach/router` can still be imported in code. You may also need to remove `@reach/router` from your site's dependencies. If you do, and you are importing `@react/router` in Jest tests, you will need to add an alias to your `jest.config.js` file: ```javascript moduleNameMapper: { '@reach/router': '@gatsbyjs/reach-router', ... } ``` ## v3.0.0 This major release of this Gatsby theme moves Gatsby and all related Gatsby plugins and transformers from direct `dependencies` to `peerDependencies` so that consumers of this package can upgrade Gatsby without any intervention from Chord. This will require you to do more than just bump this version in the `package.json`. First, edit your `package.json` to drop `@chordcommerce/gatsby-theme-performance` and any of the [listed peerDependencies in the theme's peerDependencies](https://github.com/chordcommerce/chord-ui/blob/main/packages/gatsby-theme-performance/package.json) from your `dependencies` block. We will be reinstalling them in the next section. Then, you should run the following command in your shell: ```bash # If you are using npm $ npx install-peerdeps @chordcommerce/gatsby-theme-performance # If you are using yarn $ npx install-peerdeps --yarn @chordcommerce/gatsby-theme-performance ``` There is a chance that this command with fail with a very unhelpful error message. If that happens, the program will output an `npm install/yarn add` command that you can copy and run manually. For more information and caveats around this, please read the [installation instructions for this package](https://github.com/chordcommerce/chord-ui/tree/main/packages/gatsby-theme-performance#installation). ## v2.3.1 This release fixes an issue where incorrect routes were being rendered to the sitemap. Routes should be rendered to the sitemap without the localization, for example: `https://example.com/products/t-shirt`, however only routes with the `en-US` localization were being rendered, for example: `https://example.com/en-US/products/t-shirt`. It is recommended that you upgrade to this version and then re-crawl your site via the Google Search Console. ## v2.2.0 This release updates `@chordcommerce/chord-js-performance` to `v.1.6.0`.This update adds the currency property when one of these events is triggered `Cart Viewed`, `Product Removed`, `Product Added`, `Product Updated`. ## v2.1.0 This release adds `modifyLineItem` to the `useCart` hook providing more flexibility to modifying line items such as updating `quantity` and `customAttributes`. ## v2.0.1 This release has a minor bugfix centered around changing the Variant's `shopifyId` to a string from an integer. This is specifically needed so that Contentful's GraphQL API can return this ID, as it often larger than the Integer type defined in the GraphQL specification. If you have not converted this field to string and update to this version, you might see the following warning: ```Text variantId should be a string, this type will be changed in a future version ``` Chord has a migration script available to update these fields in Contentful. Please contact us for help. ## v2.0.0 This release adds **support for** [Gatsby 4](https://www.gatsbyjs.com/gatsby-4/)**!** Please see the [v1.5.0 to v2.0.0 Migration Guide](docId\:vPZ30L0Dly3zdnqFkPI25) for instructions for upgrading. There are no additional features, but be sure to check out release notes below if migrating from a version below `v1.5.0`. Key highlights of this release: - Support for [Gatsby 4](https://www.gatsbyjs.com/gatsby-4/) and all the performance benefits. See [Gatsby 3](https://www.gatsbyjs.com/docs/reference/release-notes/v3.0/) and [Gatsby 4](https://www.gatsbyjs.com/docs/reference/release-notes/v4.0/) release notes for further reading - Support for new [gatsby-plugin-image](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/) - Now using React 17! See [React 17 release notes](https://reactjs.org/blog/2020/10/20/react-v17.html) - Recommended Node version 16.13.1 ### Troubleshooting See troubleshooting in the [v1.5.0 to v2.0.0 Migration Guide](docId\:vPZ30L0Dly3zdnqFkPI25) for all troubleshooting related to upgrading. ### Upgrading from a version below `v1.5.0` Please read the release notes for previous releases to find out what changed, but important breaking changes to highlight include: **Segment Consent Manager (breaking change in )** See the change to the Segment Consent Manager in v1.5.0 release notes and ensure you have the `segmentConfig` set in `gatsby-config.js`. **Product Merchant feed (breaking change in )** This theme no longer provides a Merchant feed. See the change in v1.2.0 release notes and implement a feed in your website code. ## v1.5.0 Key highlights of this release: - This release adds support to manually load our [Segment plugin](https://github.com/benjaminhoffman/gatsby-plugin-segment-js), in order to implement Segment's [Consent Manager](https://github.com/segmentio/consent-manager) in our starters. It introduces a change in the way you would normally configure Segment in your *theme*. Please see below. Starting from **v1.5.0**, it is now the responsibility of the *starter* to pass a proper Segment configuration to the *theme*, via the starter's `gatsby-config.js` file, as follow: ```Text plugins: [ { resolve: '@chordcommerce/gatsby-theme-performance', options: { .... segmentConfig: { prodKey: process.env.GATSBY_SEGMENT_PRODUCTION_WRITE_KEY, devKey: process.env.GATSBY_SEGMENT_DEV_WRITE_KEY, trackPage: true, host: 'https://cdn.segment.com', delayLoad: false, delayLoadTime: 1000, manualLoad: false } ... } } ] ``` Please read [this](https://github.com/benjaminhoffman/gatsby-plugin-segment-js#setup) to learn more details about those settings. **Note:** `manualLoad` is an advanced feature. It is set to `true` by default in our Gatsby starters so that Segment's [Consent Manager](https://github.com/segmentio/consent-manager) can work properly. Alternatively, you can use it if you are calling `analytics.load({writeKey})` manually elsewhere in your code. Use manualLoad `false` if you do not use, or have removed, the Consent Manager implementation (see below). ### Consent Manager & Gatsby Performance Starter Gatsby starter **v2.9.0+ (Performance)** ships with a new [Consent Manager](https://github.com/segmentio/consent-manager) component. You can find it at: `/src/components/Segment/ConsentManager/index.jsx`. :::hint{type="info"} A similar component is available in the v2.3.0+ Autonomy version of our Gatsby starter, which uses @chordcommerce/gatsby-theme-autonomy v1.2.0+ under the hood. ::: This component is an `analytics.js` add-on with support for consent management. At its core, the Consent Manager empowers visitors to control and customize their tracking preferences on the website. They can opt out entirely of being tracked, or selectively opt out of tools in which they don’t want their information stored. The Consent Manager banner is shown automatically for visitors from the EU. You can also decide to show it by default by configuring the `GATSBY_SEGMENT_SHOULD_REQUIRE_CONSENT` new environment variable to `true` in your `.env` file. We have also integrated a way to manage your Consent Manager preferences from the Starter's footer component: **Integrations** In order for the `Consent Manager` to work, you must setup Segment [integrations](https://segment.com/catalog/) in your target Segment workspace. You can verify that your integrations (*Google Analytics*, *Amplitude*, etc) are accessible for the `Consent Manager` component by visiting the URL below. It **should not** return an empty array if you have properly configured them. ```Text https://cdn.segment.com/v1/projects/add-your-segment-api-key-here/integrations ``` ### Troubleshooting There is [a known Gatsby issue](https://github.com/gatsbyjs/gatsby/issues/23234) that might occurred, where a blank page is rendered all over the site. This issue only occurs if you *build* and *serve* the site (as opposed to simply `yarn dev`). When/if that happens, edit your `/src/components/Segment/ConsentManager/index.jsx` and move the `{children}` coming from the *wrapRootElement* before the `` Rebuild and serve (`yarn build && yarn serve`), or use your Netlify/Gatsby Cloud review apps and verify the results. ## v1.4.4 Key highlights of this release: - `addToCart` now accepts a `customAttributes` argument. These attributes will be sent to Shopify when the product is added to the cart. ```javascript import { useCart } from '@chordcommerce/gatsby-theme-performance' const { addToCart } = useCart() const customAttributes = [ { key: 'Estimated Ship Date', value: 'December 9, 2021' } ] await addToCart(variantId, quantity, placement, position, customAttributes) ``` ## v1.3.0 Key highlights of this release: - `getVariantAvailableQuantity` introduced in the previous version of the SDK has been superseded with `getVariantAvailability`. This method will now return not only the variant quantity, but also backorderable information. As follow: - `availableForSale` Indicates if the product variant is available for sale - `currentlyNotInStock` Return true if the inventory quantity is \<= 0 and overselling is allowed. - `quantityAvailable` The total sellable quantity of the variant for online sales channels. ```jsx import { api as StorefrontApi } from '@chordcommerce/gatsby-theme-performance' const legacyVariantId = "123456" const availability = await StorefrontApi.getVariantAvailability(legacyVariantId) const { sku, availableForSale, quantityAvailable, currentlyNotInStock } = availability ``` Please note that you will need the scope to read variant inventory (same as previous version of the SDK) ## v1.2.2 Key highlights of this release: - You can now use `getVariantAvailableQuantity` to fetch the availability of a given variant: ```jsx import { api as StorefrontApi } from '@chordcommerce/gatsby-theme-performance' const legacyVariantId = "123456" const qty = await StorefrontApi.getVariantAvailableQuantity(legacyVariantId) ``` Please note that you will need the scope to read variant inventory: ## v1.2.1 Key highlights of this release: - Add Segment anonymous ID to Shopify's custom attributes on the checkout object. This allows us to reference the client's anonymous ID in Segment tracking calls on the checkout confirmation page. Once these anonymous IDs are the same, events fired from the client and from Shopify's checkout confirmation page will both be a part of the same session. - Implement additional product properties on all analytics events that reference products. This is to more closely match Segment's E-Commerce V2 spec and will enhance compatibility with various destinations, GA being the primary focus. ## v1.2.0 Key highlights of this release: - This release introduces a **breaking change**: the Product Merchant feed generator have been moved out of the `@chordcommerce/gatsby-theme-performance` . It is now the responsibility of the *starter* code to enable it. You can find an implementation example in the [following pull request](https://github.com/chordcommerce/chord-ui/pull/30). ## v1.1.3 Key highlights of this release: - Add support to use the **optional** `GATSBY_CHECKOUT_DOMAIN` as new environment variable. The effect of this change is that the returned `webUrl` property of the Shopify `createCheckout` mutation will be under the `checkoutDomain` instead of the default one (`GATSBY_SHOPIFY_SUBDOMAIN`). We're hoping a side-effect of this is generate proper *order attributions*. ## v1.1.2 Key highlights of this release: - Fix missing variants in CMS Gatsby Cloud preview builds: while a product is being created, the variants don't exist right away. This causes the preview build to fail many times during typical product build-out, which then causes Gatsby to stop trying. This fixes it by passing an empty array in the case of missing variants. ## v1.1.1 Key highlights of this release: - Prevents Product Merchant RSS feed to break when a variant has a missing image (CMS Gatsby Cloud preview builds) ## v1.1.0 (2021-08-10) Key highlights of this release: - Improved site's general performance/page load times: Product and Variant images that were included in the `useCatalog` query, and subsequently used to populate our client-side Redux product catalog, have been removed. Those images were included in the first place for *legacy* reasons (*Autonomy*-based projects) but not necessary anymore. - As a result, this introduces a breaking change: the `useProductMainImage` hook now only returns the image title. If you'd like to get the product image, for example in your `LineItem` component, simply grab it from the **cart:** ```jsx const { cart } = useCart() // or use const { loadCart } = useCart() should you need to reload it. const { isFetching, order } = cart // each lineItem below will contain a variant image (lineItem.variant.image) const { lineItems } = order ``` ## v1.0.0 (2021-07-28) Initial re-release under the @chordcommerce Github organization. ### You can find older versions of this package, published under @arfabrands/gatsby-theme-shopify, [here](https://github.com/arfabrands/assembly-ui/packages/689982). Release notes for @arfabrands/gatsby-theme-shopify. ## v0.0.8 (2021-07-14) Key highlights of this release: - Remove strict `engines` requirements from package.json. ## v0.0.7 (2021-06-30) Key highlights of this release: - **Segment tracking plan**: this release ships with an updated version of our tracking plan (non-breaking fixes and improvements). Adding new attributes to the *Order Completed* event and applied the *snake\_case* convention to our *Identify* calls. ## v0.0.6 (2021-06-25) Key highlights of this release: - Several methods that were not functional and not needed for Performance-based sites (Shopify) have been removed from this theme (as well as in the associated starter kit v2.3.0). ### Removed - `addReferralIdentifier`: referrals are handled by third-party apps in Shopify, not natively, so the theme doesn't support them. - `finalizeCheckout`: Shopify checkout never returns the customer to the Gatsby site, so there is no need to call `finalizeCheckout` or display an order confirmation page. - `modifyCart`: was used exclusively to apply a referral identifier to the cart, which is not applicable (see above). ## v0.0.5 (2021-06-14) Key highlights of this release: - **New environment variables:** Two new environment variables are now required in the Gatsby site environment to accurately attribute Segment events to the Chord store. - **Segment tracking bug fixes**: Various non-breaking fixes and improvements, not requiring any changes in site code. ### Changed - `GATSBY_CHORD_TENANT_ID` and `GATSBY_CHORD_STORE_ID` are now required environment variables. Chord will provide the values for these variables. - `GATSBY_ACS_BRAND_NAME` is now a deprecated environment variable. It can be removed with no effect. ## v0.0.4 (2021-05-26) Key highlights of this release: - **New Segment tracking plan**: The Segment tracking plan has been updated to a new version. It's significantly different from the old tracking plan, and will form the basis for all Segment tracking plans going forward. - ** hook:** Breaking changes have been introduced to tracking methods returned by `useAnalytics`, in order to support the new Segment tracking plan mentioned above. ### Changed - The `analytics` client exported from `@arfabrands/gatsby-theme-shopify` has been removed. All tracking calls should use the `useAnalytics` hook. This change means that this use of `analytics` is no longer available: ```jsx import { analytics } from '@arfabrands/gatsby-theme-shopify' const { trackEmailCaptured } = analytics ``` - The `useAnalytics` hook returns different methods. These existing methods have been renamed and accept different arguments: ```jsx import { useAnalytics } from '@arfabrands/gatsby-theme-shopify' const { trackClickCollection, // renamed to trackCollectionClicked trackClickProduct, // renamed to trackProductClicked trackCreateStockRequest, // renamed to trackStockRequestCreated trackViewCart // renamed to trackCartViewed } = useAnalytics() ``` ### Added - The `useAnalytics` hook returns a number of new methods. Here are all the methods that are now available for use in site code: ```jsx import { useAnalytics } from '@arfabrands/gatsby-theme-shopify' const { identify, trackCartViewed, trackCollectionClicked, trackEmailCaptured, trackProductClicked, trackProductListFiltered, trackProductListViewed, trackProductViewed, trackPromotionClicked, trackPromotionViewed, trackStockRequestCreated, trackUserPasswordResetCompleted, trackUserPasswordResetStarted, trackUserSignedIn, trackUserSignedOut, trackUserSignedUp } = useAnalytics() ```