Skip to content

Commit 47170f4

Browse files
bdenhambdenham
committed
MC-6270: Add docs for content type components
WIP: updates
1 parent 2494acb commit 47170f4

File tree

1 file changed

+146
-48
lines changed

1 file changed

+146
-48
lines changed

‎docs/create-basic-content-type/step-3-add-components.md

Lines changed: 146 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ The development of this tutorial is currently **IN PROGRESS**.
77

88
Components are the JavaScript files that define the behaviors of your content type when they appear on the stage in the Admin UI (using the `preview.js` component) and in the storefront (using the `master.js` component). As such, they are complementary to the templates you added previously in Step 2, acting as the view models to the template's views.
99

10+
## Component conventions
11+
12+
Discuss the naming convention of the preview.js and master.js files, similar to the naming convention for the preview.html and master.html template files.
13+
1014
These component files are completely optional. Among the reasons for adding your own component is to customize the options menu in the Admin preview. That's what we will do for our Quote content type.
1115

1216
## Add component directories
@@ -42,58 +46,152 @@ The following table describes each component-related attribute from the Quote co
4246
| `preview_component` | Optional. The `preview.js` file provides rendering logic to the Admin preview template. If your content type does not require any changes to the standard option menu (shown on mouseover) for a content type or other user-interactivity in the Admin, you can omit this attribute from the the `type` element. When you omit the attribute, Page Builder will use `Magento_PageBuilder/js/content-type/preview` by default. |
4347
| `master_component` | Optional. The `master.js` file provides rendering logic to the master format storefront template. As with the `preview_component`, if your content type does not require any specific user-interactivity or other behavior when it's displayed in the storefront, you can simply omit this attribute from the the `type` element. When you omit the attribute, Page Builder will use `Magento_PageBuilder/js/content-type/master` by default. <br /><br />In the Quote configuration, the `master_component` attribute is only included for discussion. It simply points to the Page Builder default `master.js` component that would be used the attribute was omitted. |
4448

45-
## Create preview.js component
46-
49+
## Quote `preview_component`
4750

51+
The Quote `preview_component` (`preview.js`) is shown here in full, followed by an explanation of how the component is used in the Quote.
4852

4953
```js
5054
define([
51-
'Magento_PageBuilder/js/content-type/preview',
52-
], function (PreviewBase) {
53-
'use strict';
54-
var $super;
55-
56-
function Preview(parent, config, stageId) {
57-
PreviewBase.call(this, parent, config, stageId);
58-
}
59-
Preview.prototype = Object.create(PreviewBase.prototype);
60-
$super = PreviewBase.prototype;
61-
62-
Preview.prototype.retrieveOptions = function retrieveOptions() {
63-
var options = $super.retrieveOptions.call(this, arguments);
64-
console.log(options);
65-
66-
// Remove menu options
67-
// delete options.move;
68-
// delete options.duplicate;
69-
// delete options.edit;
70-
// delete options.remove;
71-
72-
// options.edit.preview.config.icon = "<i class='icon-pagebuilder-copy'></i>";
73-
// options.edit.config.icon = "<i class='icon-pagebuilder-copy'></i>";
74-
// options.edit.icon._latestValue = "<i class='icon-pagebuilder-copy'></i>";
75-
76-
// Change option menu icons
77-
// options.edit.icon = "<i class='icon-pagebuilder-copy'></i>";
78-
79-
// Change option menu label
80-
// options.title.preview.config.label = "title.preview.config.label"; // works
81-
// options.title.title = "title.title"; // doesn't work
82-
83-
// Change tooltips
84-
options.move.title = "Drag";
85-
options.duplicate.title = "Copy";
86-
options.remove.title = "Delete";
87-
options.edit.title = "Open Editor";
88-
89-
return options;
90-
};
91-
//
92-
// Preview.prototype.isContainer = function () {
93-
// return false;
94-
// };
95-
96-
return Preview;
55+
'Magento_PageBuilder/js/content-type/preview',
56+
], function (PreviewBase) {
57+
'use strict';
58+
59+
var $super;
60+
61+
function Preview(parent, config, stageId) {
62+
PreviewBase.call(this, parent, config, stageId);
63+
}
64+
Preview.prototype = Object.create(PreviewBase.prototype);
65+
$super = PreviewBase.prototype;
66+
67+
Preview.prototype.retrieveOptions = function retrieveOptions() {
68+
var options = $super.retrieveOptions.call(this, arguments);
69+
console.log(options);
70+
71+
// Remove menu options
72+
// delete options.move;
73+
// delete options.duplicate;
74+
// delete options.edit;
75+
// delete options.remove;
76+
77+
// options.edit.preview.config.icon = "<i class='icon-pagebuilder-copy'></i>";
78+
// options.edit.config.icon = "<i class='icon-pagebuilder-copy'></i>";
79+
// options.edit.icon._latestValue = "<i class='icon-pagebuilder-copy'></i>";
80+
81+
// Change option menu icons
82+
// options.edit.icon = "<i class='icon-pagebuilder-copy'></i>";
83+
84+
// Change option menu label
85+
// options.title.preview.config.label = "title.preview.config.label"; // works
86+
// options.title.title = "title.title"; // doesn't work
87+
88+
// Change tooltips
89+
options.move.title = "Drag";
90+
options.duplicate.title = "Copy";
91+
options.remove.title = "Delete";
92+
options.edit.title = "Open Editor";
93+
94+
return options;
95+
};
96+
//
97+
// Preview.prototype.isContainer = function () {
98+
// return false;
99+
// };
100+
101+
return Preview;
97102
});
98103
```
99104

105+
### Extend from Page Builder preview.js
106+
107+
dasdasd
108+
109+
```js
110+
define([
111+
'Magento_PageBuilder/js/content-type/preview',
112+
], function (PreviewBase) {
113+
'use strict';
114+
115+
var $super;
116+
117+
function Preview(parent, config, stageId) {
118+
PreviewBase.call(this, parent, config, stageId);
119+
}
120+
Preview.prototype = Object.create(PreviewBase.prototype);
121+
$super = PreviewBase.prototype;
122+
```
123+
124+
125+
126+
### Manipulate the options menu
127+
128+
sdfsdf
129+
130+
```js
131+
Preview.prototype.retrieveOptions = function retrieveOptions() {
132+
var options = $super.retrieveOptions.call(this, arguments);
133+
134+
return options;
135+
};
136+
```
137+
138+
139+
140+
#### Remove menu options
141+
142+
lsakd fjlsadfkj
143+
144+
```js
145+
// Remove menu options
146+
delete options.move;
147+
delete options.duplicate;
148+
delete options.edit;
149+
delete options.remove;
150+
```
151+
152+
153+
154+
#### Change option menu icons
155+
156+
sdfsdfsdf
157+
158+
```js
159+
// Change option menu icons
160+
options.edit.icon = "<i class='icon-pagebuilder-copy'></i>";
161+
```
162+
163+
164+
165+
#### Change option menu title
166+
167+
skdjflsdfjs
168+
169+
```js
170+
// Change option menu title
171+
options.title.preview.config.label = "title.preview.config.label";
172+
```
173+
174+
175+
176+
#### Change option menu tooltips
177+
178+
lsdfkjsdklfj
179+
180+
```js
181+
// Change tooltips
182+
options.move.title = "Drag";
183+
options.duplicate.title = "Copy";
184+
options.remove.title = "Delete";
185+
options.edit.title = "Open Editor";
186+
```
187+
188+
189+
190+
## Quote `master_component`
191+
192+
As mentioned previously, our Quote content type has no need for a master.js component file. Instead, we are using Page Builder's default master component file: `Magento_PageBuilder/js/content-type/master`.
193+
194+
## Next
195+
196+
[Step 4: Add form](step-4-add-form.md)
197+

0 commit comments

Comments
 (0)