You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/create-basic-content-type/overview.md
+15-13Lines changed: 15 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -5,33 +5,35 @@ The development of this tutorial is currently **IN PROGRESS**.
5
5
6
6
***
7
7
8
-
Page Builder comes with 16 content types (controls) you can use to build your storefront pages. In this tutorial, you will add a new content type: a **Quote** control, which you can use to show customer testimonials or other quotations within your storefront.
8
+
Page Builder comes with several content types (controls) you can use to build your storefront pages. In this tutorial, you will add a new content type: a **Quote** control, which you can use to show customer testimonials or other types of quotations within your storefront.
Here are three examples of three Quote control instances rendered in three-columns on the Admin stage:
14
+
A preview of the Qoute content type you will build is shown in the following screenshot, which shows three instances of the Quote control, on in each column shown here on the Admin stage:
This tutorial assumes you are starting with a basic, registered module, as follows.
26
+
As with most things in Magento, content types for Page Builder are housed in modules. The convention for naming modules that are solely dedicated to Page Builder, such as our Quote content type, is to prefix all the content type name with `PageBuilder`. This helps visually group content type modules within your vendor directory. Of course, this convention doesn't apply If you are adding a content type as part of an existing module.
After registering your module (`bin/magento setup:upgrade`) you will be ready to begin this tutorial by following the content type creation process outlined next.
31
33
32
-
## Overview
34
+
## Quote creation
33
35
34
-
The steps for building the Quote content type are illustrated and described below. While the reality is not quite this linear, these steps do represent the basic phases and flow for building new Page Builder content types.
36
+
The steps for creating the Quote content type are illustrated and described below. The reality is not quite this linear, but these steps do represent the basic phases and flow for building new Page Builder content types.
@@ -42,15 +44,15 @@ The steps for building the Quote content type are illustrated and described belo
42
44
5.**Add styles**: Create LESS files to style your content types when rendered in the Admin UI and on the storefront.
43
45
6.**Add frontend widget**: Create a JavaScript file to control the UI behavior (user interactivity) of your content type on the storefront.
44
46
45
-
## File structure
47
+
## Quote file structure
46
48
47
-
Before you get started, take a look at what you will be building. The block on the left shows the empty module structure you will start with. The block on the right shows all the files you will add to your module, labeled by the steps in the process.
49
+
Before we get started, take a look at what you will be building. The directory structure on the left shows the basic `PageBuilderQuote`module you will start with (as previously described). The directory structure on the right shows all the files you will add to the `PageBuilderQuote`module throughout this tutorial, labeled by the steps in the process.
48
50
49
51
50
52
51
53
## Conventions
52
54
53
-
The file structure represents an overview of the conventions used for content types. Many of the conventions used are simply those defined for developing UI components. However, the conventions specific to Page Builder start within the directories called `content_type` or `content-type`. Page Builder instantiates a content type from the files defined within these directories. We discuss these conventions within each step of the process.
55
+
The `PageBuilderQuote` module structure represents an overview of the conventions used for content types. Many of these conventions are simply those defined for developing UI components. However, the conventions specific to Page Builder content types appropriately start within the directories called `content_type` or `content-type`. Page Builder instantiates a content type from the files defined within these directories. We will discuss these content type conventions within each step of the process.
Copy file name to clipboardExpand all lines: docs/create-basic-content-type/step-1-add-configuration.md
+20-21Lines changed: 20 additions & 21 deletions
Original file line number
Diff line number
Diff line change
@@ -15,30 +15,30 @@ Files referenced from the configuration include the HTML templates, the JavaScri
15
15
16
16
By convention, Page Builder requires the configuration for a content type to be in the `adminhtml` area within a directory named `pagebuilder` and a subdirectory named `content_type` or `content-type`.
17
17
18
-
The name of your configuration file should reflect the name of your content type preceeded by your module vendor name. For example, our module name is `Acme/PageBuilderQuote` and our content type is a quote control, so we should name our configuration file `acme_quote.xml` and add it to our module within the following directory structure (`view/adminhtml/pagebuilder/content_type/`):
18
+
The name of your configuration file should reflect the name of your content type prefixed by your module vendor name and separated by an underscore (_). For example, our module name is `Example/PageBuilderQuote` and our content type is a quote control, so we name our configuration file `example_quote.xml` and add it to our module within the following directory structure (`view/adminhtml/pagebuilder/content_type/`):
If your content type is something with a simple or generic name like our "quote" example, include your vendor name within your configuration file name to This naming convention prevents Magento from merging your configuration file with another configuration file of the same name, or a future content type configuration file published by Magento. If your content type name uses multiple words, use underscores to separate the words.
23
+
The reason we suggest prefIxing your content type with your vendor name is to prevent Magento from merging your content type configuration file with another configuration file of the same name, or with a future content type published by Magento.
24
24
25
25
## Example configuration
26
26
27
-
In this example, only a subset of configuration elements are described (enough to understand the configuration file's basic role). For more details, refer to [Content type configurations](../configurations/content-type-configuration.md) and [Additional configurations](../configurations/additional-configurations.md).
27
+
In this example, only a subset of configuration elements are described in our Quote example (enough to understand the basic role of the configuration file). For more details, refer to [Content type configurations](../configurations/content-type-configuration.md) and [Additional configurations](../configurations/additional-configurations.md).
28
28
29
29
30
30
The following configuration is from the Quote content type. An overview of these elements and attributes are described in the tables that follow.
|`name`| Name of the content type that Magento uses for XML merging. The convention for using multi-word names is to separate the words with hyphens. |
69
-
|`label`| Label displayed in the Page Builder panel, option menu, and on the Admin stage. |
70
-
|`group`| Group or category in the panel menu where your content type is displayed. The default groups are Layout, Elements, Media, and Add Content. See [Panel configurations](../configurations/panel-configurations.md) for more details. |
71
-
|`component`|Currently there are two component types to choose from: `content-type` and `content-type-collection`. Use `Magento_PageBuilder/js/content-type` for static content types that do not have children. Use `Magento_PageBuilder/js/content-type-collection` for content types that can contain children, otherwise known as container content types. |
72
-
|`preview_component`| JavaScript file that provides preview-specific rendering logic within the Admin UI.|
73
-
|`master_component`| JavaScript file that provides master format rendering logic generic for all appearances of your content type when rendered on the storefront.|
74
-
|`form`| UI component form that provides the form controls for editing your content type. |
75
-
|`icon`| Optional. PNG or SVG image displayed in the Page Builder panel alongside the label. |
64
+
The `type` element defines the key properties of your content type. The attributes from the previous code example are described here:
|`name`| Name of the content type that Magento uses for XML merging. The convention for using multi-word names is to separate the words with hyphens. |
69
+
|`label`| Label displayed in the Page Builder panel, option menu, and on the Admin stage. |
70
+
|`group`| Group or category in the panel menu where your content type is displayed. The default groups are Layout, Elements, Media, and Add Content. See [Panel configurations](../configurations/panel-configurations.md) for more details. |
71
+
|`component`|There are two component types to choose from: `content-type` and `content-type-collection`. Use `Magento_PageBuilder/js/content-type` for static content types that do not have children. Use `Magento_PageBuilder/js/content-type-collection` for content types that can contain children, otherwise known as container content types. |
72
+
|`preview_component`|Optional. JavaScript file (`preview.js`) that provides rendering logic within the Admin UI. |
73
+
|`master_component`|Optional. JavaScript file (`master.js`) that provides rendering logic generic for all appearances of your content type when rendered on the storefront. |
74
+
|`form`| UI component form that provides the form controls for editing your content type. |
75
+
|`icon`| Optional. PNG or SVG image displayed in the Page Builder panel alongside the label. |
76
76
|`sortOrder`| Optional. The listed order within the menu group. For example, `sortOrder=21` puts the content type third in the `Elements` menu group, after the content types with `sortOrder`s of 10 and 20. |
77
-
|`translate`| Identifies the attribute you want Magento to translate. Here, the `label` value is set for translation. |
78
-
77
+
|`translate`| Identifies the attribute you want Magento to translate. Here, the `label` value is set for translation. |
Copy file name to clipboardExpand all lines: docs/create-basic-content-type/step-2-add-templates.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -32,7 +32,7 @@ Conventions for adding content type templates are as follows.
32
32
33
33
For content types with only one appearance (as noted in the screenshot with block), we use the name `default` for both the content type's appearance name and the name of the template directory.
34
34
35
-
## Template Configuration
35
+
## Template configuration
36
36
37
37
The Quote example defines only one `appearance`. Therefore, by convention, set the name of the Quote `appearance` and the name of the template directory to `default` as shown here:
0 commit comments