Skip to content

Commit 19061a7

Browse files
committed
MC-4272: Update content type docs
Added a docs section devoted to creating a basic content type to break up a topic that was entirely too long. This organization will work better to get developers started.
1 parent e268ba8 commit 19061a7

File tree

10 files changed

+37
-0
lines changed

10 files changed

+37
-0
lines changed
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Content type Overview
2+
3+
Out of the box, Page Builder comes with several content types (controls) that you can drag onto the stage to build your storefront pages, as shown below. In this topic, you will learn how to create your own content type for use within Page Builder.
4+
5+
![Page Builder Content Types](../images/panel-horizontal.png)
6+
7+
## Prerequisites
8+
9+
Page Builder creates content types from modules. So this topic assumes you have a basic module structure in which to add your content type files.
10+
11+
![](../images/module-minimum-structure.png)
12+
13+
## Overview
14+
15+
The steps for creating a Page Builder content type are briefly outlined here. The remainder of this topic describes these steps in detail.
16+
17+
![Creating Custom Content Types](../images/content-type-overview.png)
18+
19+
1. **Add a configuration** as an XML file to setup all the other files that control the appearances and behaviors of your content type.
20+
2. **Add templates** as HTML files to control the appearance of your content types on the Admin stage (preview.html) and the storefront (master.html).
21+
3. **Add a component** as a JavaScript file to control the behavior of your content type on the Admin stage (preview.js) and the storefront (master.js).
22+
4. **Add an editor** as a UI component (XML file) to give users the ability to add or edit content with your content type.
23+
5. **Add layout** as an XML file to add your editor to the stage.
24+
6. **Add styles and icons** as LESS and image files (png, svg) to add specific styling and images to your content types as they appear on the Admin stage and the storefront.
25+
7. **Add frontend widget** as a JavaScript file to control the UI behavior (user interactivity) of your content type on the storefront.
26+
27+
![Before and after content type](../images/content-type-files.png)
28+
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Step 1: Add a configuration
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Step 2: Add templates
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Step 3: Add a component
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Step 4: Add an editor
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Step 5: Add a layout
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Step 6: Add styles and icons
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Step 7: Add a frontend widget
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# What's next
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Container content type overview

0 commit comments

Comments
 (0)