PHPackages mage-os/module-advanced-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. [Utility & Helpers](/categories/utility) 4. / 5. mage-os/module-advanced-widget ActiveMagento2-module[Utility & Helpers](/categories/utility) mage-os/module-advanced-widget ============================== Advanced cms widget module 1.2.5(2w ago)139424[1 issues](https://github.com/mage-os-lab/module-advanced-widget/issues)1MITJavaScriptPHP ^8.1 Since Oct 11Pushed 2w agoCompare [ Source](https://github.com/mage-os-lab/module-advanced-widget)[ Packagist](https://packagist.org/packages/mage-os/module-advanced-widget)[ RSS](/packages/mage-os-module-advanced-widget/feed)WikiDiscussions master Synced 1w ago READMEChangelog (5)Dependencies (20)Versions (12)Used By (1) MageOS AdvancedWidget Module for Magento ======================================== [](#mageos-advancedwidget-module-for-magento) Add configurable multi-row CMS Widgets with image picker component, product picker component, select fields and much more. --- Overview -------- [](#overview) The **AdvancedWidget** module allows you to define multi-row CMS widgets. These features combined with MageOS\_PageBuilderWidget module (that is explicit dependency) make finally possible to develop custom pagebuilder components with own preview and a large set of configurations. Complex pagebuilder ui components development is no more needed. 🚀 Features ---------- [](#-features) > 1. This module let you specify Title separators inside widgets [![title section](./doc/title-section_screenshot.png)](./doc/title-section_screenshot.png) > 2. This module let you specify multiple "repeatable" sections where you can specify unlimited rows inside widgets [![repeatable section](./doc/repeatable-section_screenshot.png)](./doc/repeatable-section_screenshot.png) > > > 2.1) Each item field can receive a dedicated tooltip [![repeatable section](./doc/repeatable-section-tooltip_screenshot.png)](./doc/repeatable-section-tooltip_screenshot.png) > > > 2.2) Each field is validated and ask to be required for compilation [![repeatable section](./doc/repeatable-section-validation_screenshot.png)](./doc/repeatable-section-validation_screenshot.png) > > > 2.3) Items can be sorted [![repeatable section](./doc/repeatable-section-sorter_screenshot.png)](./doc/repeatable-section-sorter_screenshot.png) > > > 2.4) You can specify whether a field is editable directly in the main box or whether it must be edited in the detail modal. [![repeatable section](./doc/repeatable-section-row_screenshot.png)](./doc/repeatable-section-row_screenshot.png) > 3. Row item images fields are available [![image field](./doc/image-field_screenshot.png)](./doc/image-field_screenshot.png)[![image field selection](./doc/image-field-selection_screenshot.png)](./doc/image-field-selection_screenshot.png) > 4. Row item select fields are available [![select field](./doc/select-field_screenshot.png)](./doc/select-field_screenshot.png) > 5. Row item product fields are available [![product field](./doc/product-field_screenshot.png)](./doc/product-field_screenshot.png)[![product field selection](./doc/product-field-selection_screenshot.png)](./doc/product-field-selection_screenshot.png) > 6. Row item wysiwyg and colorpicker fields are also available (see the field reference below) 📖 Field reference ----------------- [](#-field-reference) Two kinds of fields exist: 1. **Widget parameter fields** — declared in your module's `etc/widget.xml` as `xsi:type="block"` parameters pointing at a renderer class from `MageOS\AdvancedWidget\Block\WidgetField\*`. On the frontend the value arrives as plain block data (`$block->getData('name')`). 2. **Repeatable row fields** — declared in PHP inside a `Rows` subclass; editors can add, sort and delete unlimited rows, each row containing these fields. ### Widget parameter fields [](#widget-parameter-fields) #### Image — `Block\WidgetField\Image` [](#image--blockwidgetfieldimage) Renders a text input with a "Choose Image..." button that opens the Magento media gallery browser. Stores the **media-relative path** (e.g. `wysiwyg/hero/image.jpg`) as a plain string. ``` Image Choose image... ``` On the frontend, resolve the stored path with `$block->getImageUrl('image')` (from `Block\Widgets\AbstractColumns`) — it prefixes the store media base URL when the value isn't already absolute. #### TextArea — `Block\WidgetField\TextArea` [](#textarea--blockwidgetfieldtextarea) Plain multi-line text input (no HTML editor). Line breaks are preserved in the stored value. ``` Description ``` #### WYSIWYG — `Block\WidgetField\Wysiwyg` [](#wysiwyg--blockwidgetfieldwysiwyg) Full TinyMCE editor (variables and images enabled, nested widgets disabled). The stored value is HTML — don't `escapeHtml` it on the frontend; sanitize it instead, e.g. with `Block\Widgets\Template::stripTags()`, which ships with a sensible default tag whitelist. ``` Rich content ``` #### Title separator — `Block\WidgetField\Title` [](#title-separator--blockwidgetfieldtitle) Purely visual: renders a heading/divider inside the widget form to group fields. It stores no meaningful value — the displayed text comes from the parameter's ``. Don't read this parameter on the frontend. ``` Content]]> ``` #### Repeatable rows — `Block\WidgetField\Rows` [](#repeatable-rows--blockwidgetfieldrows) The headline feature: unlimited sortable rows, each with its own field set. The parameter **name must start with `repeatable_`** — both the save plugin (`Plugin\SaveRepeatableItems`) and the admin renderer detect repeatable values by that prefix. A widget can have several repeatable parameters, each with its own `Rows` subclass. ``` Items ``` ### Repeatable row fields [](#repeatable-row-fields) Extend `MageOS\AdvancedWidget\Block\WidgetField\Rows` and fill the `$rows` property — an ordered map of `field_key => config`: ``` class CardItem extends \MageOS\AdvancedWidget\Block\WidgetField\Rows { protected $rows = [ 'title' => [ 'label' => 'Title', 'type' => 'text', 'required' => true, 'preview' => true, ], 'image' => [ 'label' => 'Image', 'type' => 'image', 'preview' => true, ], 'style' => [ 'label' => 'Card style', 'type' => 'select', 'options' => [ 'light' => 'Light', 'dark' => 'Dark', ], 'preview' => false, ], 'background' => [ 'label' => 'Background color', 'type' => 'colorpicker', 'default' => '#1E88E5', 'description' => 'Shown as a tooltip next to the field.', 'preview' => false, ], ]; } ``` #### Row config keys [](#row-config-keys) KeyMeaning`label`Admin label for the field`type`One of the row field types below`required`Adds admin-side validation on the row`preview``true` → editable directly in the collapsed row list; `false` → only in the row's edit modal`description`Tooltip text next to the field`options``value => label` map, `select` type only`default`Starting color for a `colorpicker` field, e.g. `#FF0000` or `rgba(0,0,0,1)`; falls back to `#FFFFFF`#### Row field types [](#row-field-types) TypeAdmin controlStored value`text`Single-line text inputPlain string`textarea`Multi-line text inputPlain string, line breaks preserved`select`Dropdown built from the `options` mapThe selected option value`image`Media gallery browser buttonMedia-relative path (resolve with `getImageUrlByPath()`)`product`Product chooser gridProduct **ID** — see below`wysiwyg`TinyMCE editor in the row modalHTML string (same escaping caveats as the WYSIWYG parameter)`colorpicker`[JSColor](https://jscolor.com/) picker (rgba format); starting color set via the row's `default` keyCSS color string, e.g. `rgba(255,255,255,1)`Notes: - `text` and `textarea` are built in; `select`, `image`, `product`, `wysiwyg` and `colorpicker` are registered as custom field types in `etc/adminhtml/di.xml` (the `customFields` argument of `Block\Adminhtml\Renderer\Repeatable`). Third-party modules can register additional types through the same DI argument — each entry pairs a `type` name with a JS component and a `.phtml` partial. - **`product`**: the field key must start with `product` — the admin renderer then auto-populates the sibling display keys `_sku`, `_name` and `_image` for the row list. On the frontend, load the product from the stored ID; `ViewModel\ProductData::getProductById()` does this and pre-resolves `mageos_main_image`, `mageos_swatch_image`, `mageos_small_image` and `mageos_thumb_image` URLs on the product. ### Reading values on the frontend [](#reading-values-on-the-frontend) Extend `MageOS\AdvancedWidget\Block\Widgets\AbstractColumns` in your widget block: ``` foreach ($this->getRepeatableField('repeatable_items') as $item) { $title = $item['title'] ?? ''; $image = $this->getImageUrlByPath($item['image'] ?? ''); // ... } ``` Available helpers: MethodPurpose`getRepeatableField($name)`Decoded array of row arrays for a repeatable parameter`getRepeatableFieldAsObject($name)`Same rows as `DataObject`s (`$item->getTitle()`)`getImageUrl($field)` / `getImageUrlByPath($path)`Resolve a stored media-relative path into a full media URL`getPreparedUrl($url)`Normalize relative link values against the store base URL`getPreparedDescription($field)`Replace `\EOL` markers with ``🔧 Installation -------------- [](#-installation) 1. Install it into your Mage-OS/Magento 2 project with composer: ``` composer require mage-os/module-advanced-widget ``` 2. Enable module ``` bin/magento module:enable MageOS_AdvancedWidget bin/magento setup:upgrade ``` 🤝 Changelog ----------- [](#-changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. 📄 License --------- [](#-license) The MIT License (MIT). Please see [License File](LICENSE) for more information. ### Attribution [](#attribution) This software uses Open Source software. See the [ATTRIBUTION](ATTRIBUTION.md) page for these projects. ### Health Score 51 — FairBetter than 95% of packages Maintenance94 Actively maintained with recent releases Popularity28 Limited adoption so far Community20 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~29 days Recently: every ~15 days Total 11 Last Release 20d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/f46100c19b4689a8076cb2a4e9e6e2ddc378211d64bad5290ccb21abd85b6a0a?d=identicon)[Mage-OS](/maintainers/Mage-OS) --- Top Contributors [![dadolun95](https://avatars.githubusercontent.com/u/8927461?v=4)](https://github.com/dadolun95 "dadolun95 (13 commits)")[![yuriy-boyko](https://avatars.githubusercontent.com/u/20790946?v=4)](https://github.com/yuriy-boyko "yuriy-boyko (9 commits)")[![SamueleMartini](https://avatars.githubusercontent.com/u/40766441?v=4)](https://github.com/SamueleMartini "SamueleMartini (4 commits)")[![rhoerr](https://avatars.githubusercontent.com/u/13335952?v=4)](https://github.com/rhoerr "rhoerr (2 commits)")[![Sental](https://avatars.githubusercontent.com/u/35261502?v=4)](https://github.com/Sental "Sental (1 commits)") --- Tags adminadobecommerceecommerceextensionmage-osmage-os-labmagentomagento2page-builder ### Embed Badge ![Health badge](/badges/mage-os-module-advanced-widget/health.svg) ``` [![Health](https://phpackages.com/badges/mage-os-module-advanced-widget/health.svg)](https://phpackages.com/packages/mage-os-module-advanced-widget) ``` ### Alternatives [swissup/theme-frontend-breeze-blank Clean, lightning-fast breeze-powered theme. 1667.5k8](/packages/swissup-theme-frontend-breeze-blank)[markshust/magento2-module-pagebuildersourcecode The Page Builder Source Code module adds a Source Code button to the toolbar of the Page Builder WYSIWYG editor. 119119.9k](/packages/markshust-magento2-module-pagebuildersourcecode)[firegento/magento2-content-provisioning N/A 4465.9k1](/packages/firegento-magento2-content-provisioning)[mage-os/module-page-builder-template-import-export PageBuilder template import/export module 2020.4k](/packages/mage-os-module-page-builder-template-import-export)[mage-os/module-page-builder-widget PageBuilder cms widget module 2923.2k12](/packages/mage-os-module-page-builder-widget)[scandipwa/catalog-graphql Catalog-specific modifications for ScandiPWA 17237.8k2](/packages/scandipwa-catalog-graphql) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)