Skip to content

Commit 471781b

Browse files
committed
MC-5769: Complete content type tutorial
Minor updates
1 parent 82efac4 commit 471781b

File tree

2 files changed

+13
-12
lines changed

2 files changed

+13
-12
lines changed

docs/create-basic-content-type/step-1-add-configuration.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ Files referenced from the configuration include the HTML templates, the JavaScri
1111

1212
![configuration-hub](../images/configuration-hub.png)
1313

14-
## Conventions
14+
## Configuration conventions
1515

1616
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`.
1717

@@ -22,9 +22,9 @@ The name of your configuration file should reflect the name of your content type
2222
{: .bs-callout .bs-callout-info }
2323
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.
2424

25-
## Example configuration
25+
## The `example_quote` configuration
2626

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).
27+
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).
2828

2929

3030
The following configuration is from the Quote content type. An overview of these elements and attributes are described in the tables that follow.
@@ -119,7 +119,7 @@ Going further, each `appearance` is defined by exactly two HTML templates, one t
119119

120120
## The `elements` element
121121

122-
The purpose of `<elements>` as defined within an appearance is to map the data from the content type's edit form to the content type's master format so that the values entered in the form can be stored and rendered correctly on the Admin stage and storefront. We will describe the `elements` in [Step 4: Add form](step-4-add-form.md)
122+
The `<elements>` element as defined within an `appearance` is to map the data from the content type's form editor to the content type's master format so that the values entered in the form can be stored and rendered correctly on the Admin stage and storefront. We discuss content type `elements` in [Step 4: Add form](step-4-add-form.md)
123123

124124
## Next
125125

docs/create-basic-content-type/step-2-add-templates.md

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@ The following table describes each `appearance` attribute in our example.
6868
| `render_template` | References the `master.html` (the master format storefront template) for rendering the appearance of your content type on the storefront for customers to see. |
6969
| `reader` | Reads content type data from the master format. |
7070

71-
## Quote `preview.html`
71+
## Quote `preview_template`
7272

73-
The `preview.html` template defined for our Quote's appearance, is shown here in full followed by descriptions to help you understand the basics of this template.
73+
The Quote `preview_template` (`preview.html`) is shown here in full, followed by the attribute descriptions to help you understand the basics of content type templates.
7474

7575
```html
7676
<!-- preview.html -->
@@ -171,9 +171,9 @@ The `liveEdit` binding enables end users to enter HTML content directly on the A
171171

172172
The `event` attribute enables the options menu to be shown and hidden when users interact with the content type using the mouse. If you have a special circumstance with the way you wish to handle your option menus, you can modify this logic to suit your needs.
173173

174-
## Quote `master.html`
174+
## Quote `render_template`
175175

176-
The `master.html` template defined for the Quote appearance is shown here in full. The same attributes and descriptions from the Admin preview template apply to this template as well, with one addition, the `html` attribute.
176+
The Quote `render_template` (`master.html`) is shown here in full. The same attributes and descriptions from the `preview.html` template apply to the `master.html` template as well. However, the `master.html` template introduces one addition attribute, `html`, which is described after the code.
177177

178178
```html
179179
<!--master.html-->
@@ -200,17 +200,17 @@ The `master.html` template defined for the Quote appearance is shown here in ful
200200

201201
### html
202202

203-
The `html` attribute applies the actual user-entered HTML to the template element. In our Quote example, the end-user enters their quote text either from the Admin stage using `liveEdit`, which is bound to the `quote_text` field, or from the form.
203+
The `html` attribute applies the actual user-entered HTML content to the template element. In our Quote example, the end-user enters their quote text either on the Admin stage using `liveEdit` (which is bound to the `quote_text` field in the form editor) or on the form, directly into the`quote_text` field itself.
204+
205+
For example, from the Quote `preview.html` template, the `liveEdit` binding on the `blockquote` is bound to the `quote_text` field that stores the HTML content, as shown here (`{ field: 'quote_text'...}`):
204206

205207
```html
206208
<!--preview.html-->
207209
<blockquote data-bind="liveEdit: { field: 'quote_text', placeholder: $t('Enter Quote') }">
208210
</blockquote>
209211
```
210212

211-
From `liveEdit`, we see that the content of `blockquote` is bound to the `quote_text` field that stores the html.
212-
213-
The master format storefront template uses the `html` attribute to retrieve the HTML content and display it in the `blockquote` element:
213+
The master format storefront template uses the `html` attribute to retrieve the HTML content and display it in the `blockquote` element as follows:
214214

215215
```html
216216
<!--master.html-->
@@ -223,6 +223,7 @@ The `html` value is derived from the configuration `element` name (`quote`) and
223223
<element name="quote">
224224
<html name="quote_text" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
225225
...
226+
</element>
226227
```
227228

228229
## Next

0 commit comments

Comments
 (0)