CMS Module

​

Overview

• Pages - Create and manage content pages
• Menus - Build navigation menus
• Widgets - Content widgets for pages
• File Management - Upload and manage media files
• SEO Management - Meta tags and URL keys

​

Module Structure

cms/
├── api/                    # CMS API endpoints
├── graphql/                # GraphQL types and resolvers
│   ├── types/
│   │   ├── CmsPage/       # Page types
│   │   ├── Menu/          # Menu types
│   │   └── Widget/        # Widget types
├── migration/             # Database migrations
├── pages/                 # CMS admin pages
├── services/              # CMS services
└── bootstrap.js           # Module initialization

​

GraphQL Types

​

CmsPage Type

type CmsPage {
  cmsPageId: Int!
  uuid: String!
  name: String!
  content: String
  shortContent: String
  status: Int!
  urlKey: String!
  metaTitle: String
  metaDescription: String
  metaKeywords: String
  layout: String
  createdAt: String!
  updatedAt: String!
  url: String
}

​

Menu Type

type Menu {
  menuId: Int!
  name: String!
  items: [MenuItem]
}

type MenuItem {
  menuItemId: Int!
  name: String!
  url: String!
  position: Int!
  parentId: ID
}

​

Content Pages

​

Creating Pages

// POST /api/cms/pages
await fetch('/api/cms/pages', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    name: 'About Us',
    urlKey: 'about-us',
    content: '<h1>About Our Store</h1><p>...</p>',
    shortContent: 'Learn about our company',
    status: 1, // Published
    metaTitle: 'About Us - Our Story',
    metaDescription: 'Learn about our company history',
    layout: 'full_width'
  })
});

​

Page Layouts

• full_width - Full width content
• one_column - Single column with sidebar
• two_columns - Two column layout

​

Page Status

• 1 - Published (visible on storefront)
• 0 - Draft (not visible)

​

URL Keys

• Must be URL-friendly (lowercase, hyphens)
• Automatically validated for uniqueness
• Used to generate page URLs: /page/about-us

​

Content Editor

• WYSIWYG Editor - Visual content editing
• HTML Mode - Direct HTML editing
• Media Insert - Insert images and files
• Formatting Tools - Text formatting, lists, links

​

Menus

​

Menu System

• Header Menu - Main navigation
• Footer Menu - Footer links
• Custom Menus - Additional menus

​

Menu Items

• CMS pages
• Category pages
• Custom URLs
• External links

​

Hierarchical Menus

// Menu structure
Home
Shop
  ├── Men's Clothing
  ├── Women's Clothing
  └── Accessories
About Us
Contact

​

Widgets

​

Widget Types

• Text Widget - Rich text content
• HTML Widget - Custom HTML
• Banner Widget - Image banners
• Product Widget - Featured products
• Custom Widgets - Extension-defined widgets

​

Widget Placement

• Specific pages
• All pages
• Page areas (header, footer, sidebar)

​

File Management

​

Uploading Files

// POST /api/cms/files
const formData = new FormData();
formData.append('file', fileInput.files[0]);

await fetch('/api/cms/files', {
  method: 'POST',
  body: formData
});

​

File Browser

• File upload
• Folder creation
• File organization
• Image preview
• File deletion

​

Supported File Types

• Images: jpg, jpeg, png, gif, webp, svg
• Documents: pdf
• Other: Configurable in settings

​

CMS Services

import { 
  createPage,
  updatePage,
  deletePage,
  uploadFile,
  createFolder,
  deleteFile
} from '@evershop/evershop/cms/services';

// Create page
const page = await createPage({
  name: 'Privacy Policy',
  urlKey: 'privacy-policy',
  content: '<p>Privacy policy content...</p>',
  status: 1
});

// Update page
await updatePage(pageId, {
  content: '<p>Updated content...</p>'
});

// Upload file
const file = await uploadFile(fileBuffer, {
  name: 'banner.jpg',
  path: '/images'
});

​

Database Schema

• cms_page - Content pages
• cms_page_description - Page translations (if enabled)
• url_rewrite - SEO-friendly URLs

​

GraphQL Queries

​

Get CMS Page

query {
  cmsPage(id: "about-us") {
    name
    content
    metaTitle
    metaDescription
    url
  }
}

​

Get Current CMS Page

query {
  currentCmsPage {
    name
    content
    layout
  }
}

​

List CMS Pages (Admin)

query {
  cmsPages(filters: [{ key: "status", operation: eq, value: "1" }]) {
    items {
      cmsPageId
      name
      urlKey
      status
    }
    total
  }
}

​

SEO Features

​

Meta Tags

• Meta Title - Page title tag
• Meta Description - Page description
• Meta Keywords - Search keywords

​

URL Rewrites

• /page/about-us instead of /page?id=123
• Automatically generated from URL key
• Stored in url_rewrite table

​

Open Graph Tags

<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta property="og:image" content="..." />

​

Admin CMS Management

• Create and edit pages
• Manage page layouts
• Upload and organize files
• Configure menus
• Manage widgets
• Set page status (publish/draft)
• Preview pages before publishing

​

Best Practices

​

Common Use Cases

​

Static Pages

• About Us
• Privacy Policy
• Terms of Service
• Shipping Information
• Return Policy
• FAQ
• Contact Us

​

Landing Pages

• Seasonal promotions
• Product launches
• Special campaigns
• Brand stories

​

Custom Layouts

• Homepage content blocks
• Category landing pages
• Brand pages
• Editorial content

​

API Endpoints

• GET /api/cms/pages - List pages (admin)
• GET /api/cms/pages/:id - Get page
• POST /api/cms/pages - Create page
• PATCH /api/cms/pages/:id - Update page
• DELETE /api/cms/pages/:id - Delete page
• POST /api/cms/files - Upload file
• GET /api/cms/files/browse - Browse files
• DELETE /api/cms/files/:path - Delete file

​

Related Documentation