Tutorial: Creating Reference Storefront Pages and Components

Requirements

  • A development environment
  • An Elastic Path training virtual machine

Prerequisites

Ensure that you are familiar with the following third-party technologies:

  • Git
  • Node.js
  • Visual Studio Code with the following extensions:
    • Debugger for Chrome
    • ESLint extension
  • Javascript
  • React

Example

In this section, Extending React Reference Storefront is explained with an example.

Warning:
Ensure that the name of the container directory and components directory are the same as the corresponding directories. For example, if the name of the page is MyPage, name the container MyPage.

  1. Navigate to src/containers directory.
  2. Create a new directory with appropriate name.
  3. In the src/containers/<PageName> directory, create a new .jsx file.
    For example, src/containers/MyPage/MyPage.jsx.
  4. Populate the page with the required structure by copying the contents of an existing page to the new page.
  5. In the src/components/routes.js directory:
    a. Import the new page.
    b. Define the routing path for the page.
  6. In the .jsx file:
    a. To view the changes in the storefront, update the export settings with the page name.
    b. Add all required components and content.
  7. In the src/containers/<PageName>/<PageName>.less directory, add the required custom CSS.
  8. In the src/components directory, create a new component directory with the appropriate name.
  9. In the src/components/<componentName> directory, create a new .jsx file.
    For example, src/components/mycomponent.main.jsx.
  10. Populate the file with the required structure by copying the contents of an existing component to the new component.
  11. Name the class of the component with the component name.
    For example, for ProductDisplayItemMain component, class name is ProductDisplayItemMain.
  12. In the .jsx file:
    a. To view changes in the storefront, update the export settings with the page name.
    b. Add all required components and content.
    c. Import the component to other components or pages as required.
  13. In the src/components/mycomponent.main.less file, create custom CSS, if any.
  14. In the src/components/mycomponent.main.jsx file, import the custom CSS file, if any.