Release Notes

v3.0.1
This release fixes an error when running npm install on a site using this package without the --legacy-peer-deps flag:
1
npm ERR! Could not resolve dependency:
2
npm ERR! peer [email protected]"15.x || 16.x || 16.4.0-alpha.0911da3" from @reach/[email protected]
Copied!
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:
1
moduleNameMapper: {
2
    '@reach/router': '@gatsbyjs/reach-router',
3
    ...
4
}
Copied!
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 from your dependencies block. We will be reinstalling them in the next section.
Then, you should run the following command in your shell:
1
# If you are using npm
2
$ npx install-peerdeps @chordcommerce/gatsby-theme-performance
3
# If you are using yarn
4
$ npx install-peerdeps --yarn @chordcommerce/gatsby-theme-performance
Copied!
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.
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:
1
variantId should be a string, this type will be changed in a future version
Copied!
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! Please see the v1.5.0 to v2.0.0 Migration Guide 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 and all the performance benefits. See Gatsby 3 and Gatsby 4 release notes for further reading
Support for new gatsby-plugin-image​
Now using React 17! See React 17 release notes​
Recommended Node version 16.13.1
Troubleshooting
See troubleshooting in the v1.5.0 to v2.0.0 Migration Guide 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 v1.5.0)
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 v1.2.0)
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, in order to implement Segment's 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:
1
 plugins: [
2
    {
3
      resolve: '@chordcommerce/gatsby-theme-performance',
4
      options: {
5
         ....
6
​
7
         segmentConfig: {
8
           prodKey: process.env.GATSBY_SEGMENT_PRODUCTION_WRITE_KEY,
9
           devKey: process.env.GATSBY_SEGMENT_DEV_WRITE_KEY,
10
           trackPage: true,
11
           host: 'https://cdn.segment.com',
12
           delayLoad: false,
13
           delayLoadTime: 1000,
14
           manualLoad: false
15
        }
16
​
17
        ...
18
      }
19
    }
20
  ]
Copied!
Please read this 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 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 component. You can find it at: /src/components/Segment/ConsentManager/index.jsx. 
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 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. 
1
https://cdn.segment.com/v1/projects/add-your-segment-api-key-here/integrations
Copied!
Troubleshooting
There is a known Gatsby issue 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 <ConsentManager />
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.
1
import { useCart } from '@chordcommerce/gatsby-theme-performance'
2
​
3
const { addToCart } = useCart()
4
​
5
const customAttributes = [
6
  {
7
    key: 'Estimated Ship Date',
8
    value: 'December 9, 2021'
9
  }
10
]
11
​
12
await addToCart(variantId, quantity, placement, position, customAttributes)
Copied!
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.
1
import { api as StorefrontApi } from '@chordcommerce/gatsby-theme-performance'
2
​
3
const legacyVariantId = "123456"
4
​
5
const availability = await StorefrontApi.getVariantAvailability(legacyVariantId)
6
​
7
const { 
8
    sku, 
9
    availableForSale, 
10
    quantityAvailable, 
11
    currentlyNotInStock 
12
} = availability
Copied!
Please note that you will need the unauthenticated_read_product_inventory 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:
1
import { api as StorefrontApi } from '@chordcommerce/gatsby-theme-performance'
2
​
3
const legacyVariantId = "123456"
4
​
5
const qty = await StorefrontApi.getVariantAvailableQuantity(legacyVariantId)
Copied!
Please note that you will need the unauthenticated_read_product_inventory 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.
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:
1
const { cart } = useCart() 
2
// or use const { loadCart } = useCart() should you need to reload it.
3
​
4
const { isFetching, order } = cart
5
​
6
// each lineItem below will contain a variant image (lineItem.variant.image)
7
const { lineItems } = order
Copied!
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.
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.
useAnalytics 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:
1
import { analytics } from '@arfabrands/gatsby-theme-shopify'
2
​
3
const { trackEmailCaptured } = analytics 
Copied!
The useAnalytics hook returns different methods. These existing methods have been renamed and accept different arguments:
1
import { useAnalytics } from '@arfabrands/gatsby-theme-shopify'
2
​
3
const {
4
    trackClickCollection, // renamed to trackCollectionClicked
5
    trackClickProduct, // renamed to trackProductClicked
6
    trackCreateStockRequest, // renamed to trackStockRequestCreated
7
    trackViewCart // renamed to trackCartViewed
8
} = useAnalytics()
Copied!
Added
The useAnalytics hook returns a number of new methods. Here are all the methods that are now available for use in site code:
1
import { useAnalytics } from '@arfabrands/gatsby-theme-shopify'
2
​
3
const {
4
    identify,
5
    trackCartViewed,
6
    trackCollectionClicked,
7
    trackEmailCaptured,
8
    trackProductClicked,
9
    trackProductListFiltered,
10
    trackProductListViewed,
11
    trackProductViewed,
12
    trackPromotionClicked,
13
    trackPromotionViewed,
14
    trackStockRequestCreated,
15
    trackUserPasswordResetCompleted,
16
    trackUserPasswordResetStarted,
17
    trackUserSignedIn,
18
    trackUserSignedOut,
19
    trackUserSignedUp
20
} = useAnalytics()
Copied!
Data Collection
Next - Performance
Next.js
Last modified 11d ago