Global GraphCommerce configuration can be configured in your graphcommerce.config.js
file
in the root of your project and are automatically validated on startup.
The configuration file is a javascript file that exports a GraphCommerceConfig
object. See graphcommerce.config.js.example for an example.
Configuration can be accessed in your project with the import.meta.graphCommerce
object.
import { storefrontAll, storefrontConfig, storefrontConfigDefault, useStorefrontConfig } from '@graphcommerce/next-ui'
// Accessing a global value
const globalConf = import.meta.graphCommerce.cartDisplayPricesInclTax
function MyComponent() {
// Configuration configured per storefront locale.
const scopedConfig = useStorefrontConfig().cartDisplayPricesInclTax
// Creating a fallback system
const scopedConfigWithFallback = scopedConfig ?? globalConf
// Or as single line
const scopedConfigWithFallback2 =
useStorefrontConfig().cartDisplayPricesInclTax ?? import.meta.graphCommerce.cartDisplayPricesInclTax
return <div>{googleRecaptchaKey}</div>
}
You can also use the configuration in your .meshrc.yml
by accessing
{graphCommerce.myField}
endpoint: '{graphCommerce.magentoEndpoint}'
Configuration values can be overwriten by environment variables, with the following rules:
SCREAMING_SNAKE_CASE
GC_
_0
, _1
, _2
, etc._<key>
.Examples:
limitSsg
-> GC_LIMIT_SSG="1"
storefront[0].locale
-> GC_STOREFRONT_0_LOCALE="en"
debug.pluginStatus
-> GC_DEBUG_PLUGIN_STATUS="1"
You can export configuration by running yarn graphcommerce export-config
Create a graphql/Config.graphqls file in your project and extend the GraphCommerceConfig, GraphCommerceStorefrontConfig inputs to add configuration.
extend input GraphCommerceConfig {
myConfig: String # or Boolean, or Int, or Float, make required with `!`
}
extend input GraphCommerceStorefrontConfig {
myField: Boolean
}
Below is a list of all possible configurations that can be set by GraphCommerce.
canonicalBaseUrl: String!
The canonical base URL is used for SEO purposes.
Examples:
hygraphEndpoint: String!
The HyGraph endpoint.
Read-only endpoint that allows low latency and high read-throughput content delivery.
Project settings -> API Access -> High Performance Read-only Content API
magentoEndpoint: String!
GraphQL Magento endpoint.
Examples:
storefront: [[GraphCommerceStorefrontConfig](#GraphCommerceStorefrontConfig)!]!
All storefront configuration for the project
cartDisplayPricesInclTax: Boolean
Due to a limitation of the GraphQL API it is not possible to determine if a cart should be displayed including or excluding tax.
When Magento's StoreConfig adds this value, this can be replaced.
compare: Boolean
Use compare functionality
compareVariant: [CompareVariant](#CompareVariant) (default: ICON)
By default the compare feature is denoted with a 'compare ICON' (2 arrows facing one another). This may be fine for experienced users, but for more clarity it's also possible to present the compare feature as a CHECKBOX accompanied by the 'Compare' label
configurableVariantForSimple: Boolean (default: [object Object])
If a simple product is part of a Configurable product page, should the simple product be rendered as a configured option of the configurable product page?
How does this work:
When the products(filters: { url_key: { eq: 'simple-product' } }) { ... }
query is ran,
Magento also returns the Simple product and the Configurable product the simple belongs to.
If that is the case we render the configurable product page instead of the simple product page but the options to select the simple product are pre-selected.
configurableVariantValues: [MagentoConfigurableVariantValues](#MagentoConfigurableVariantValues) (default: [object Object])
When a user selects a variant, it will switch the values on the configurable page with the values of the configured variant.
Enabling options here will allow switching of those variants.
customerRequireEmailConfirmation: Boolean
Due to a limitation in the GraphQL API of Magento 2, we need to know if the customer requires email confirmation.
This value should match Magento 2's configuration value for
customer/create_account/confirm
and should be removed once we can query
debug: [GraphCommerceDebugConfig](#GraphCommerceDebugConfig)
Debug configuration for GraphCommerce
demoMode: Boolean (default: true)
Enables some demo specific code that is probably not useful for a project:
googleAnalyticsId: String
See https://support.google.com/analytics/answer/9539598?hl=en
Provide a value to enable Google Analytics for your store.
To override the value for a specific locale, configure in i18n config.
googleRecaptchaKey: String
Google reCAPTCHA site key. When using reCAPTCHA, this value is required, even if you are configuring different values for each locale.
Get a site key and a secret key from https://developers.google.com/recaptcha/docs/v3
The secret key should be added in the Magento admin panel (Stores > Configuration > Security > Google ReCAPTCHA Storefront > reCAPTCHA v3 Invisible) ReCAPTCHA can then be enabled/disabled for the different forms, separately (Stores > Configuration > Security > Google ReCAPTCHA Storefront > Storefront)
googleTagmanagerId: String
The Google Tagmanager ID to be used on the site.
This value is required even if you are configuring different values for each locale.
hygraphProjectId: String
Hygraph Project ID. Only used for migrations.
hygraphWriteAccessEndpoint: String
Content API. Only used for migrations.
Regular read & write endpoint that allows querying and mutating data in your project.
Project settings -> API Access -> Content API
hygraphWriteAccessToken: String
Hygraph Management SDK Authorization Token. Only used for migrations.
Project settings -> API Access -> Permanent Auth Tokens
GC_HYGRAPH_WRITE_ACCESS_ENDPOINT="https://...hygraph.com/v2/..."
GC_HYGRAPH_WRITE_ACCESS_TOKEN="AccessTokenFromHygraph"
yarn graphcommerce hygraph-migrate
legacyProductRoute: Boolean
On older versions of GraphCommerce products would use a product type specific route.
This should only be set to true if you use the /product/[url] AND /product/configurable/[url] routes.
@deprecated Will be removed in a future version. migration
limitSsg: Boolean
Limit the static generation of SSG when building
previewSecret: String
To enable next.js' preview mode, configure the secret you'd like to use.
productFiltersLayout: [ProductFiltersLayout](#ProductFiltersLayout) (default: DEFAULT)
Layout how the filters are rendered. DEFAULT: Will be rendered as horzontal chips on desktop and mobile SIDEBAR: Will be rendered as a sidebar on desktop and horizontal chips on mobile
productFiltersPro: Boolean
Product filters with better UI for mobile and desktop.
@experimental This is an experimental feature and may change in the future.
productRoute: String
By default we route products to /p/[url] but you can change this to /product/[url] if you wish.
Default: '/p/' Example: '/product/'
robotsAllow: Boolean
Allow the site to be indexed by search engines. If false, the robots.txt file will be set to disallow all.
wishlistHideForGuests: Boolean
Hide the wishlist functionality for guests.
wishlistIgnoreProductWishlistStatus: Boolean
Ignores whether a product is already in the wishlist, makes the toggle an add only.
wishlistShowFeedbackMessage: Boolean
Show a message when the product is added to the wishlist.
Debug configuration for GraphCommerce
pluginStatus: Boolean
Reports which plugins are enabled or disabled.
webpackCircularDependencyPlugin: Boolean
Cyclic dependencies can cause memory issues and other strange bugs. This plugin will warn you when it detects a cyclic dependency.
When running into memory issues, it can be useful to enable this plugin.
webpackDuplicatesPlugin: Boolean
When updating packages it can happen that the same package is included with different versions in the same project.
Issues that this can cause are:
All storefront configuration for the project
locale: String!
Must be a locale string https://www.unicode.org/reports/tr35/tr35-59/tr35.html#Identifiers
magentoStoreCode: String!
Magento store code.
Stores => All Stores => [Store View] => Store View Code
Examples:
canonicalBaseUrl: String
The canonical base URL is used for SEO purposes.
Examples:
cartDisplayPricesInclTax: Boolean
Due to a limitation of the GraphQL API it is not possible to determine if a cart should be displayed including or excluding tax.
defaultLocale: Boolean
There can only be one entry with defaultLocale set to true.
domain: String
Domain configuration, must be a domain https://tools.ietf.org/html/rfc3986
googleAnalyticsId: String
Configure different Google Analytics IDs for different locales.
To disable for a specific locale, set the value to null.
googleRecaptchaKey: String
Locale specific google reCAPTCHA key.
googleTagmanagerId: String
The Google Tagmanager ID to be used per locale.
hygraphLocales: [String!]
Add a gcms-locales header to make sure queries return in a certain language, can be an array to define fallbacks.
linguiLocale: String
Specify a custom locale for to load translations.
Options to configure which values will be replaced when a variant is selected on the product page.
content: Boolean
Use the name, description, short description and meta data from the configured variant
gallery: Boolean
This option enables the automatic update of product gallery images on the product page when a variant is selected, provided that the gallery images for the selected variant differ from the currently displayed images.
url: Boolean
When a variant is selected the URL of the product will be changed in the address bar.
This only happens when the actual variant is can be accessed by the URL.