Magento Series: Working with CMS Pages

CMS pages are editable HTML pages with unique URL identifiers. CMS pages can contain text, images, blocks of content, variables, and widgets.

Some examples of common CMS pages:

• Home
• 404 Page / Page not found
• Enable Cookies
• About Us

How to work with CMS pages in the M2 backend?

To access a list of all CMS pages, go to the Magento Admin Panel → tab Content → Pages.

You can add new CMS pages with the Add New Page button, or edit an existing one by selecting the Edit option from the grid’s Action column.

Editing CMS pages with Page Builder

Page Builder is the default option in Magento (Adobe Commerce). It gives you a wide range of tools for creating CMS content, without needing to write any code.

Learn more about Layout in Page Builder from Adobe.

• If you deactivate Page Builder, you can use the WYSIWYG editor. 
• By clicking the Show / Hide Editor button, you can switch between the WYSIWYG editor and the raw HTML text area.

CMS pages hold a lot of properties, the ones most often used are:

• Title – what is the CMS page called; defines the title of the page in the browser
• Content Heading – the title that will be rendered inside the page / above the content
• URL key – the key that is used to make the page’s unique URL (required); e.g., for a url http://localhost:81/home, home would be the URL key
• Store views – define the scope to which this CMS page belongs (required)
• Status – a boolean that determines if the page is enabled or not
• Content – the HTML code to be rendered on the page; can include CMS blocks or widgets to render dynamic data

CMS pages also contain other properties:

• Search Engine Optimization properties
  • Meta title
  • Meta keywords
  • Meta description
• Design properties
  • Layout – how the page is organized
  • Custom Layout Updates – list of layout files
  • Width – the width of the page
• Custom Design Update properties
  • Set a new theme and/or layout for a set period of time

How to insert dynamic data into a CMS page?

CMS pages can contain CMS blocks and other widgets. They can be added with the WYSIWYG editor.

How is CMS page data stored?

CMS pages are stored in the MySQL database in the cms_page table. The relations between CMS pages and stores are saved in the cms_page_store table.

How to render a CMS page in ScandiPWA?

ScandiPWA is the first open source PWA theme for Magento (Adobe Commerce). It is the fastest way to get ready-to-use PWA for any Magento website.

How does the CMS Page route get the page’s data?

The Router component passes the web page’s properties to the UrlRewrite route.

The UrlRewrite route identifies the URL as a CMS page by the type included in the properties and then passes the history, location, match, and page ID from props to the CmsPage route.

The CmsPage route container passes the props to the CmsPage component, which renders the page’s content as HTML.

The container gets the page’s ID from the UrlRewrite route’s passed properties. Using that ID, the container can get the rest of the data from a GraphQL query.

The CmsPage React component uses the data to render the page in the frontend.

How to localize CMS page content?

The standard way to localize CMS page content is to create a separate instance for each locale.

CMS pages must have a unique URL identifier + store relation.

It is, however, possible to create multiple CMS pages with the same URL identifier, but for different stores—with each of those pages having a unique title and content.

When visiting the CMS page on the frontend, the version for the current store will be loaded.

Example:

➡️ If the CMS page has the same content on multiple/all stores, there is no need to make separate versions of it. A single page can be associated with more than one store.

➡️ To translate a single string in the CMS content you can also use Magento (Adobe Commerce) inline translations {{trans "some text"}}. If this approach is used, translations have to be added in the backend *.csv translation files.

How to debug the CMS page render?

Just like with CMS blocks, the first place to check for problems with CMS pages is usually the Network tab.

But unlike CMS blocks, there are 2 containers that send a GraphQL request for CMS pages: the CmsPage and the UrlResolver.

The UrlResolver identifies the CMS page itself. If the page is not found, the problem can be narrowed down to:

• Problem with the UrlResolver
• Problems with the database
• CMS page doesn’t exist
• Page is disabled
• Wrong URL key

The CmsPage uses GraphQL to get the content of the page. If the page’s content isn’t loading or is loading incorrectly, the problem might be bad data or just failing to render the content. The response’s ‘errors’ section should list the problem.

Need help with Magento (Adobe Commerce) development? scandiweb is the most certified Magento team in the world—get your dedicated eCommerce growth team today. Or get in touch with one of our experts and find out how we can help you get the hassle out of web development, design, and the whole eCommerce optimization process.

Related articles:

Magento Open Source vs Shopify

Share on: