Pages

info

Check the module structure to learn more about the structure of EverShop modules.

EverShop pages are located in the pages folder of each module. Below is an example of a page in the pages folder of the catalog module:

catalog
├── pages
    ├── global
    │   └── auth.js
    ├── admin
    │   └── productEdit
    │       ├── route.json
    │       ├── index.js
    │       ├── General.jsx
    │       ├── Images.jsx
    │       ├── Price.jsx
    └── frontStore
        └── productView
            ├── route.json
            ├── index.js
            ├── ProductImages.jsx
            ├── ProductInfo.jsx
            ├── ProductOptions.jsx

pages folder structure

The pages folder contains the following subfolders:

• global - This folder contains middleware functions that are executed for all pages, both admin panel and front store. For example, you can use this folder to create a middleware that checks if the user is authenticated. This folder does not contain any React components. It only contains middleware functions.

• admin - This folder contains the pages of the admin panel. The admin folder contains subfolders for each page. For example, the productEdit folder contains the pages for editing a product.

• frontStore - This folder contains the pages of the front store. The frontStore folder contains subfolders for each page. For example, the productView folder contains the pages for viewing a product.

The admin and frontStore folders

The admin and frontStore folders contain the following subfolders:

• all - This folder contains React components that are used in all pages.

• Other subfolders - Each subfolder represents a page. For example, the productEdit folder is the page for editing a product.

The single page folder

Each page folder contains the middleware functions, React components and the route definition for the page.

Below is an example of a page folder:

productEdit
├── route.json #This is route definition for the page
├── index.js #This is a middleware function
├── General.jsx #This is a React component 
├── Images.jsx #This is a React component
└── Price.jsx #This is a React component

The page route

In each page folder, there is a route.json file. This file contains the route definition for the page. For example, the route.json file of the productEdit page is:

{
  "path": "/admin/product/:productId",
  "methods": [
    "GET"
  ]
}

danger

The folder name will be used as the routeId, so make sure the folder name is unique and does not contain any special characters.

info

Check the routing system document to learn more about the routing system.

The page middleware

EverShop allows you to create middleware functions for each page. For example, you can create a middleware to check for the page availability before rendering the page. You can create many middleware functions as you need.

To differentiate between the middleware functions and the React components, the middleware function files should be all lowercase. For example, the index.js file is a middleware function.

info

Check the middleware system document to learn more about the middleware system.

Shared middleware functions

In some cases, you may need to use the same middleware functions in multiple pages. For example, you may need to use the same middleware function for the productEdit and productCreate pages. In this case, you can create a special folder productEdit+productCreate in the pages/admin folder and put the middleware function in this folder. All middleware function in this folder will be executed in both pages.

This special folder does not contain any route file. It only contains React components and middleware functions.

If you have a middleware function that required for all pages (both frontStore and admin panel), you can put it in the pages/global.

If you have a middleware function that required for all pages in the admin panel, you can put it in the pages/admin/all. The same for the front store.

The page template (Master components)

The Master components are located in the page folder. For example, the General.jsx, Images.jsx and Price.jsx files are React components for the productEdit page.

You must provide a default export for each React component. For example, the General.jsx file is:

import React from 'react';

const General = () => {
  return (
    <div>
      <h1>General</h1>
    </div>
  );
};

export default General;

export const layout = {
  areaId: 'content',
  sortOrder: 10
}

info

Check the view system document to learn more about the layout and block system.

info

Check the data loading document to learn how to load data in a React component.

danger

A page folder can contain both middlewares and React components. To help EverShop to identify the React Component and middleware, you must name the React component with the first letter in uppercase and the file extension is jsx. For example, General.jsx is a React component while general.js is a middleware.

Shared React components

In some cases, you may need to use the same React component in multiple pages. For example, you may need to use the same React component for the productEdit and productCreate pages. In this case, you can create a special folder productEdit+productCreate in the pages/admin folder and put the React component in this folder. All components in this folder will be used in both pages.

This special folder does not contain any route file. It only contains React components and middleware functions.

If you have a component that required for all pages, you can put it in the admin/all or storeFront/all folder. For example, CMS module use this folder to store the Layout component.