Hyva widgets, a set of magento widgets specifically built for hyva, which are an addition to the building tools that we get with PageBuilder. It provides users with a simple and effective CMS framework to quickly sync and build pages within a common ecosystem, without any additional requirements or libraries.They can be embedded in CMS pages directly as a widget, or can be embedded in containers using the Magento 2 admin layout functionality.
PageBuilder offers flexibility for the end user, they also add unnecessary complexity to customers who just want to log in and make the necessary content changes. Hyvä Widgets aims to provide the right amount of limitations for content creators to work within a website design system.
Developers can use them as a set of tools to create custom content templates, create custom layouts quickly, while using Hyvä Theme and Tailwind / Alpine technology.
Simplicity & delivery is the main problem they solve and they do this by :
purge: {
content: [
...
'../../../../../../../vendor/hyva-themes/magento2-hyva-widgets/**/*.phtml'
]
}
Widgets can be added by Admin in Content> Widgets, or by the WYSYWIG / PageBuilder editor.
The module follows the design of the standard Hyvä module. Source code can be found in the vendor/hyva-themes/magento2-hyva-widgets/src/ directory of the package.
The etc folder has the widget.xml file, where we can see how the different widgets are initialized. The developers can modify or create a widget. xml in their module in order to add a field, or to add additional data or to create new widgets based on the blueprints provided by the module.
The view/frontend folder contains the template folder and the web folder. The templates are built using vanilla JS, Tailwind and Alpine. They can be overridden in a theme by creating a folder Hyva_Widgets/templates/widget/ and copying the template to override. This uses the native Magento 2 theme inheritance system. The web folder contains library code for the slider widget.
The ViewModel folder contains the class CategoryProducts. It is used in the category slider widget to provide the products for the selected categories.
We currently have four types of widgets that we can implement.
We can create a banner with an image or with just a background color and add some content like heading , text or button. It has different layouts that you can select - Full width, Half left caption and Half right caption.
We can show a listing of products from a certain category. We can list those as a grid or slider
A simple content field which we can display in different ways. We can add a container around it and have some animations when it scrolls into view. It also allows using TailwindUI components.
It's a listing of items which we can show as a grid or slider.A way to add multiple images with a title description optionally a button