Running a Linter
The storefront project is set up with the linting utility, ESLint. For the storefront project, Elastic Path uses and extends the ESLint configuration provided by Airbnb. For more information about the style guide, see the Airbnb GitHub page.
By default, the ESLint loader is added to the
webpack.config.dev.js file. When you start the application in the development mode, the ESLint loader automatically runs.
- To run the linter from the command line, navigate to the project root directory
- Run the following command:
./node_modules/.bin/eslint --ext .js --ext .jsx [file|dir|glob]
- Run the following command for the entire project:
./node_modules/.bin/eslint --ext .js --ext .jsx .With the ESLint extension for Visual Studio Code, you can view feedback when you write the code in the
Note: When you check in the code, ensure that all linting errors are resolved.
Best Practices for Extending the React PWA Reference Storefront
Elastic Path recommends following the best practices listed in this section. However, Elastic Path does not recommend any specific rule for creating a page or component.
- Base the storefront page as the actual page your shoppers visit in the storefront
- Design a page to have a component corresponding to each functionality in the page. The functionality for a component, including references to the child components, are are configured within the component. You can customize components with properties and parameters to perform various actions, if required.
- For example, a shopper can navigate to a category page to view product lists. This category page can have a component to display the products within the category, and that component can have another component for each of the products in the list. The component that displays the products in a category view can be used to display products on the search results page because of the similar functionality between the workflows
The React PWA Reference Storefront supports responsive images and loads the most optimal/browser-supported image file types provided in a configuration. To support automation of image conversion pipelines, a script is included with the storefront project.
Note: You will need to install imagemagick, jxrlib, and jq before running the script. To install, use Homebrew:
brew install imagemagick
brew install jxrlib
brew install jq
- Update the
tools/converter.config.jsonfile with the necessary configurations required for executing the image conversion script:
imageSrc: This configuration specifies the location on local file system to output converted images to.
imageTypes: This configuration specifies the array of file types to generate images during the conversion for.
imageSizes: This configuration specifies the array of screen-breakpoint-widths to generate images during conversion for.
- For development purposes, run using bash:
Consuming error messages from Cortex
The React PWA Reference Storefront uses key identifiers which are provided directly from Cortex, and mapped to error message templates which are presented as localized structured messages. The React PWA Reference Storefront will first attempt to use these structured messages for various scenarios, and fall back to displaying the debugMessage as returned by Cortex if a localized message template is not available.
For more information about structured messages, see Structured Messages Returned by Cortex.
Add all front-end textual data in the
localization/messages-en-CA.json file as resource strings. By default,
fr-FR locales are provided in the project.
- For development purposes, run:
node tools/translate.js. The
fr-FRlocale file is populated with the same text as the
en-CAfile, with hyphens between the words. You can send this file to your translators for translation.
- To add a new locale, add an entry to the
supportedLocalesarray in the
ep.config.jsonfile and add an appropriate
.jsonfile to the
Global Product Attribute
Use the formatted value of
store-name:category, such as
vestri:Accessories, to submit the product category information. Google Analytics handlers use the global product attribute
Tag. You can set the global attribute for each product in the catalog to avoid submitting empty values for the product’s category to Google Analytics.
Displaying Multiple Product Images
The React PWA Reference Storefront supports displaying multiple SKU images within a carousel on the product display page. By default, one image for each sku is displayed on the product display page.
SKU image files are externalized through content URLs within the storefront application configuration. The default URLs are configured to reference the png files, which are located on Amazon S3. However, you can use other CMS (Content Management System) providers as you prefer. When the image is referenced in the storefront, the required files are retrieved on a per-SKU basis as they are available from the CMS provider.
Configuration properties for SKU image URLs are:
skuImagesUrl: The URL that consists of the path to catalog images hosted on an external CMS (Content Management System). Set this parameter to the complete URL of the images by replacing the
%sku%string. This value is populated when the page is loaded with values retrieved by Cortex.
For example, if the SKU name is
10001 then the file name is
To display multiple SKU images, the storefront will expect a naming convention of
<sku>_<image number>.png. If an image of that naming convention is available on the content management system, the storefront will automatically attempt to fetch 5 images starting with an image number of 0.
For example, if the SKU name is
10001 then the file names are expected to be