PHPackages                             mage-os/module-page-builder-widget - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. mage-os/module-page-builder-widget

ActiveMagento2-module[Admin Panels](/categories/admin)

mage-os/module-page-builder-widget
==================================

PageBuilder cms widget module

1.4.0(2mo ago)285.7k↓29.8%6[1 PRs](https://github.com/mage-os/module-page-builder-widget/pulls)2MITHTMLPHP ^8.1CI passing

Since May 13Pushed 2mo ago5 watchersCompare

[ Source](https://github.com/mage-os/module-page-builder-widget)[ Packagist](https://packagist.org/packages/mage-os/module-page-builder-widget)[ RSS](/packages/mage-os-module-page-builder-widget/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (3)Dependencies (3)Versions (11)Used By (2)

MageOS PageBuilder Widget Module for Magento
============================================

[](#mageos-pagebuilder-widget-module-for-magento)

New page builder component named "CMS Widget".

---

🚀 Features
----------

[](#--features)

The **PageBuilder Widget** module allows the user to specify CMS widgets and relative configurations inside a dedicated page builder component named "CMS Widget". As for all pagebuilder components this component is draggable and can be placed inside other components.

[![plot](./doc/widget-sidebar_screenshot.png)](./doc/widget-sidebar_screenshot.png)

If supported, the page builder will show widget content inside stage preview.

🔌 How it works
--------------

[](#-how-it-works)

### Widget Preview assignment

[](#widget-preview-assignment)

In order to create a widget preview you must create a new widget.xml file inside your module changing Magento\_Widget xsd file inside "xsi:noNamespaceSchemaLocation" attribute of "widget" xml node. Literally change

```

```

with that:

```

```

Now you're able to specify new widget.xml nodes:

- previewTemplates
- previewCss
- previewJs
- previewBlock
- previewBlockArguments

#### previewTemplates XML node

[](#previewtemplates-xml-node)

This is where all starts :) inside this node you must specify each phtml preview file and his relation to the widget frontend phtml view. So, checking widget.xml inside this module:

```

        MageOS_PageBuilderWidget::widget-preview/product/widget/link/link_block.phtml
        MageOS_PageBuilderWidget::widget-preview/product/widget/link/link_inline.phtml

```

As you know xml files are all merged so here we need to specify the widget id and then the previewTemplates node. The Magento\_Widget widget.xml specify widget's parameters and, inside of them, a "template" parameter where multiple templates are specified:

```

    Template

        Product Link Block Template

        Product Link Inline Template

```

For each of these options we need to copy the value inside "previewsTemplate" child "previewTemplate" node "name" attribute and our phtml preview file inside his content. So, specifying the template inside widget configurations pagebuilder will keep the relative phtml preview.

#### previewCss XML node

[](#previewcss-xml-node)

For every preview this module allow to specify a dedicated CSS file. Inside this file you can style your previews. Keep in mind that these files are included in each widget instance preview on pagebuilder. Be sure to use enough specific css selectors avoiding conflicts with other components.

```

        MageOS_PageBuilderWidget::widget-preview/product/widget/content/grid.phtml

    ...
    MageOS_PageBuilderWidget::css/widget/preview/products_list_and_grid.css
    ...

```

ATTENTION: Remember to place this php snippet inside your phtml preview file for css inclusion:

```

```

#### previewJs XML node

[](#previewjs-xml-node)

For every preview this module allow to specify a dedicated Js file. Inside this file you can add js actions and triggers to the preview. Remember that mouse actions are not triggered on widgets preview elements so this JS is useful for animations only (ex: sliders scroll, ... )

```

        MageOS_PageBuilderWidget::widget-preview/product/widget/content/grid.phtml

    ...
    MageOS_PageBuilderWidget/js/my-widget-preview-js-file
    ...

```

#### previewBlock XML node

[](#previewblock-xml-node)

Sometimes you'll need to substitute the main Block class behind the preview choosing it instead of widget model inside "class" attribute. You can specify this new PHP class in this node and it will be used replacing the original widget class:

```

        MageOS_PageBuilderWidget::widget-preview/product/widget/content/grid.phtml

    MageOS\PageBuilderWidget\Block\Adminhtml\Widget\Preview\ProductsList
    ...

```

ATTENTION: Remember to place this php snippet inside your phtml preview file for js inclusion:

```

```

#### previewBlockArguments XML node

[](#previewblockarguments-xml-node)

As for previewBlock sometimes widget previews need to have specific methods for content retrieval and other stuff. So, instead of specifying a new previewBlock node you can add a previewBlockArguments node. Similar to view model pattern (but no need to implement ArgumentInterface there) you can specify an object that will be initialized for your preview:

```

        MageOS_PageBuilderWidget::widget-preview/product/widget/content/grid.phtml

    ...

        MageOS\PageBuilderWidget\ViewModel\Adminhtml\Widget\Preview\ProductImagePreview

```

Then call his public methods inside your phtml preview:

```