Example for widget definition

Ideally, prepare a list of third-party HTML resources, you want to set up as widgets, including stylesheets and scripts.

In Builder, navigate to default/storefront/assets. Via 'Actions', create a new file

Create a "generic-widget.json", and once its created add the initial array to the file, with adding "[]"

Close and re-open the Editor. It now should look like this:

Next to 'name' type the Widget Library name. You may use this to structure multiple widgets of different distributors. We use 'demo' as an example:

To now add widgets to the library. Demo Library, click on the Properties icon

10. Name your Widget and confirm via clicking the Plus icon.

11. Next to 'html' insert or type the HTML of the widget. We used "<div id="demo-widget-1" class=“demo-widget">" as an example

12. Below 'resources' click on the plus icon.

13. Click on the properties icon

14. Check the boxes next to all your needed resources. When done, click on the properties icon again.

15. Next to 'URL' type the URL of the resource. We used "https://demo.min.js" as an example

16. Next to 'placement', choose whether to put your widget in the head or the body

17. Next to position, select the position of the resource

18. Next to 'properties', click on the properties icons

We added here only an empty async.

20. On the bottom of the Resources section, click on the plus symbol to add the Global resources.

Repeat steps from 13- 17 to create global resources.

21. You can add another widget library by clicking on the plus symbol

22. After configuring your first generic widget, you need to tell the application about it's existence. To do that, open your urls.json, which is located in same folder. You can add the GenericWidget property simply by clicking the Property-Button on the top right of the urls.json pane.

23. Now add the path accordingly.

This is a widget from 'weekli' to be integrated. It contains an html div tag with a script. The script should be loaded after the html div tag.

The configuration within the "generic-widget.json" should resemble: