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
We appreciate any and all contributions to Page Builder. If you are interested in contributing to this repository, please see our [Contribution Guide].
A storefront widget is a JavaScript component that handles the behavior of a content type after Page Builder renders it on the storefront.
4
+
For example, the Tabs and Sliders have their own storefront widgets to handle the end-user's tapping of tabs and swiping of slides on the storefront.
5
+
However, Page Builder also executes storefront widgets on the Admin stage for block and dynamic block content types.
6
+
This allows end-users to preview how Page Builder will render the blocks and dynamic blocks on the storefront.
7
+
8
+
Adding a storefront widget to your content type is a simple two-step process:
9
+
10
+
11
+
12
+
## Step 1: Create the JavaScript
13
+
14
+
Name your JavaScript file `widget.js` and put it in the following directory structure: `/view/base/web/js/content-type/{content-type-name}/appearance/{appearance-name}/widget.js`. An example from the PageBuilderQuote content type follows:
15
+
16
+
{:width="477px" height="auto"}
17
+
18
+
The JavaScript for the widget can handle events, initialize third-party controls, or do whatever else you need to control your content type's behavior _after_ Page Builder renders the master format template on the frontend (or within a block or dynamic block on the Admin stage).
19
+
20
+
```javascript
21
+
define([
22
+
'jquery',
23
+
], function ($) {
24
+
'use strict';
25
+
26
+
returnfunction (config, element) {
27
+
var element =$(element);
28
+
console.log("ELEMENT: "+element.data('element'));
29
+
};
30
+
});
31
+
```
32
+
33
+
## Step 2: Configure the widget initializer
34
+
35
+
To configure your `widget.js` so that Page Builder can initialize and load it, create a new `WidgetInitializerConfig` type in your module's global `di.xml` file (`etc/di.xml`). Then add your custom configuration (that includes your widget) as a replacement argument. The following example is from the PageBuilderQuote module:
That's it! For more examples, look at several of Page Builder's native widget implementations within `app/code/Magento/PageBuilder/view/base/web/js/content-type/`.
This topic describes how to add the image uploader component to your content type so that end-users can add images from the Admin stage as needed.
4
4
5
-
This topic describes how to add a reusable image uploader component to the PageBuilder stage for a content type.
5
+
6
6
7
-
## Overview
7
+
## Step 1: Add configuration data for the uploader
8
8
9
-
To add image uploader customization to PageBuilder:
10
-
- [Add configuration for the uploader](#add-configuration-for-the-uploader)
11
-
- [Update the `<YourModule>/view/adminhtml/web/js/content-type/<content_type_name>/preview.js` file {#js-file}](#js-file)
12
-
- [Update the preview template to display the uploader component {#preview}](#preview)
13
-
14
-
## Add configuration for the uploader {#add-configuration-for-the-uploader}
15
-
16
-
Use `additional_data` in your `<YourModule>/view/base/pagebuilder/content_type/<content-type-name>.xml` XML config file to add the image uploader custom configuration to a content type:
9
+
The first step is to customize the image uploader to suit your needs. To do this, you must add the `additional_data` element to your content type's config file to create the data types and values needed to initialize the image uploader for your specific needs.
| `contentTypeId` | String | The ID of the parent content type this will be used in. | yes | None |
69
-
| `dataStore` | DataStore | The DataStore that the selected image should be stored in. | yes | None |
70
-
| `initialValue` | Object[] | The value to be used for the initial state of the component. | yes | None |
71
-
| `onChangeCallback` | Function | A callback that will be called when an image is selected. | no | The image will be saved to the provided `dataStore` using `uploaderConfig.dataScope` as the key. |
72
-
| `onDeleteCallback` | Function | A callback that will be called when the current used image is deleted from storage. | no | The image will be removed from to the provided `dataStore` using `uploaderConfig.dataScope` as the key. |
46
+
## Step 2: Create an instance of the uploader
73
47
74
-
The following is an example extracted from the image content type:
48
+
To create an instance of the image uploader in your preview component (`preview.js`), import the `Magento_PageBuilder/js/content-type/uploader` component as a dependency and call the uploader constructor, passing in your content type's configuration options (added in step 1) and the other required arguments, as shown here :
75
49
76
-
```js
77
-
var dataStore =this.parent.dataStore.getState();
78
-
var initialImageValue = dataStore[this.config.additional_data.uploaderConfig.dataScope] ||"";
79
-
80
-
this.uploader=newUploader(
81
-
'imageuploader_'+this.parent.id,
82
-
this.config.additional_data.uploaderConfig,
83
-
this.parent.id,
84
-
this.parent.dataStore,
85
-
initialImageValue,
86
-
);
87
-
```
50
+
```js
51
+
define(['Magento_PageBuilder/js/content-type/uploader'], function (Uploader) {
| `name` | String | Used to locate the component in the UI registry. | yes | None |
73
+
| `uploaderConfig` | Object | Initializes the image uploader UI component with the configuration settings from the `additional_data` element. | yes | None |
74
+
| `contentTypeId` | String | The ID of the content type you are adding the uploader to. | yes | None |
75
+
| `dataStore` | DataStore | The DataStore to store the selected image in. | yes | None |
76
+
| `initialValue` | Object[] | The image value to set for the initial state of the uploader component. | yes | None |
77
+
| `onChangeCallback` | Function | The callback to execute when the end-user selects an image. | no | Magento saves the image to the provided `dataStore` using `uploaderConfig.dataScope` as the key. |
78
+
| `onDeleteCallback` | Function | The callback to execute when the end-user deletes the current image from storage. | no | Magento removes the image from to the provided `dataStore` using `uploaderConfig.dataScope` as the key. |
103
79
104
-
## Update the preview template to display the uploader component {#preview}
80
+
## Step 3: Add markup for the uploader
105
81
106
-
Update the preview template file, `bluefoot/app/code/Magento/PageBuilder/view/adminhtml/web/template/content-type/<content-type-name>/<ppearance_name>/preview.html`, to display the uploader component:
82
+
To add the image uploader to your preview template (`preview.html`), use Knockout's `scope` binding element to render an instance of your configured uploader component from the Magento registry, as shown here:
107
83
108
84
``` html
109
-
<div>
85
+
<div...>
110
86
...
111
87
<scope args="getUploader().getUiComponent()">
112
88
<render />
@@ -115,4 +91,5 @@ Update the preview template file, `bluefoot/app/code/Magento/PageBuilder/view/ad
115
91
</div>
116
92
```
117
93
118
-
**Note:** When a file is deleted from the media browser, the `fileDeleted` event is triggered on the window with the `mediabrowser` namespace. The passed argument is an object containing the `ids` property, which is an array of ID strings for each of the deleted files. The IDs of the selected files are provided in the objects dispatched by the `addFile` and `processFile` methods inside the image uploader UI Component.
94
+
{: .bs-callout .bs-callout-info }
95
+
When an end-user deletes a file from the media browser, Magento triggers the `fileDeleted` event on the window with the `mediabrowser` namespace. The passed argument is an object containing the `ids` property, which is an array of ID strings for each of the deleted files. Magento adds the IDs of the selected files in the objects dispatched by the `addFile` and `processFile` methods inside the image uploader component.
0 commit comments