Hyva Widgets

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 :

• Using native technologies well established into Magento 2
• No additional dependencies except Hyvä theme.
• Familiar and simplistic interface
• Native TinyMCE Drag and Drop functionality.

Requirements

• Magento 2.4 or higher
• Hyvä Themes version 1.1.10 or higher
• Access to Hyvä Themes

Installation

1. Install via composercomposer require hyva-themes/magento2-hyva-widgets
2. Enabling the modulebin/magento module:enable Hyva_Widgetsbin/magento setup:upgrade
3. Adjusting the Tailwind Purge settings in ./app/design/frontend/[Your]/[Theme]/web/tailwind/tailwind.config.js, add the hyva-themes/magento-hyva-widgets module to the purge list configuration.

   purge: {

               content: [

                  ...

   '../../../../../../../vendor/hyva-themes/magento2-hyva-widgets/**/*.phtml'

                ]

   }

4. Build the styles.css file Then run npm run build-prod from the web/tailwind directory of your theme.

Usage

Widgets can be added by Admin in Content> Widgets, or by the WYSYWIG / PageBuilder editor.

1. First, go to the Magento admin UI and navigate to Content -> Pages -> e.g. Homepage.
2. Open the Content section Enable Editor by clicking the "Show / Hide" button .
3. Click on the Insert Widget icon. Select the widget type from the drop down eg: Hyva Content Widget.
4. A widget popup will appear with a list of options.
5. When you are done editing, press "Insert Widget" in the top right corner and save the page.
6. In production mode, the Block HTML and Full Page Cache needs to be "Refreshed" for the changes to be applied on the frontend

Development

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.

Widget Types

We currently have four types of widgets that we can implement.

Hyvä Banner Widget

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.

Hyvä Category Products

We can show a listing of products from a certain category. We can list those as a grid or slider

Hyvä Content Widget

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.

Hyvä Multi Field Widget

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