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
@@ -7,6 +7,10 @@ The development of this tutorial is currently **IN PROGRESS**.
7
7
8
8
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.
9
9
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
+
10
14
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.
11
15
12
16
## Add component directories
@@ -42,58 +46,152 @@ The following table describes each component-related attribute from the Quote co
42
46
|`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. |
43
47
|`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. |
44
48
45
-
## Create preview.js component
46
-
49
+
## Quote `preview_component`
47
50
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.
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`.
0 commit comments