Release Notes

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 the originalsrc property of images has been renamed 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 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 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 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 from your dependencies block we will be reinstalling them in the next section then, you should run the following command in your shell \# 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 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 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 ! 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 , 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 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 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 https //cdn segment com/v1/projects/add your segment api key here/integrations 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 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 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 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 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 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 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 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 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 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()