What are Hyva widgets and how to use them?

According to builtwidth, Hyvä themes is used by 2000+ merchants across the globe, with leading stores in the Netherlands (from where it started), following the USA ( a leading e-commerce market). Hyvä Theme always takes advantage of every chance to improve and add value to their clients. That is the reason why we love Hyvä as a Magento agency, and so do the merchants. To maintain the bar, they introduced a feature called Hyvä widgets with the help of Bemeir team. They provide developers with pre-built components that can be quickly customized and reused across different pages and sections of the website. This approach significantly reduces development time and ensures consistency in design and functionality throughout the storefront. By the end of this article, you'll learn about hyvä widgets, understand their types and content fields, and learn how effectively you can use them in your Hyvä-based Magento store.

What is Hyvä widgets?

Hyva widgets are modular components that encapsulate specific CMS blocks and can be easily integrated into Hyva-based frontend projects. They are designed to simplify frontend development for Magento 2 stores by providing reusable building CMS blocks for creating user interfaces. It has witnessed significant development efforts reduced yet giving admins to update the content without any dependencies and worry that they might break the UI!

Here's how Hyva widgets work:

• Each widget is a self-contained component that displays certain content.
• Widgets can include buttons, sliders, product grids, navigation menus, and more.
• Developers can customize widgets' appearance, behavior, and functionality to suit their project requirements.
• Widgets are designed to be flexible and easily extensible, allowing developers to create new widgets or modify existing ones as needed in the native Magento 2 functionality without any other dependencies.
• Hyva widgets adhere to best practices for frontend development, such as clean HTML structure, separation of concerns, and efficient rendering.
• Hyva widgets help developers create strict outlines of rules that adhere to the UI layouts and allow merchants to amend the content without ruining the website's beautification.

How do Hyva widgets resolve the challenges?

Hyvä Widgets is a collection of components easy to configure through various fields, such as image upload, WYSIWYG, text, color pickers, sliders, and dynamic product listings from categories. Using Magento 2 admin layout functionality, you can seamlessly integrate the widgets into CMS pages either as standalone widgets or within containers.

• Addressing CMS Extension Challenges: Hyvä Widgets address the challenges posed by comprehensive CMS extensions like PageBuilder, which often introduce considerable dependencies. This can create a delicate balance between versatility and complexity. Hyvä Widgets provides a toolkit with precisely defined content upload restrictions to tackle this challenge, enabling admins to work effectively within the website's design system.
• User-Friendly Interface and Functionality: Hyvä Widgets provide a user-friendly interface, making content creation effortless. Native TinyMCE Drag and Drop functionality ensures seamless modifications.
• Utilizing Hyvä Widgets for Development: Developers can easily create custom content templates and layouts using Hyvä Widgets, which utilize the power of Hyvä Theme and Tailwind/Alpine technologies. By steering clear of custom page builders and relying on native Magento 2 technologies, Hyvä Widgets simplify and make the development process more efficient.

Hyvä Widgets offers a solution that utilizes Magento 2's native technologies, avoids unnecessary dependencies, and balances its simplicity and versatility for developers and admins.

Using Hyva Widgets in Development

Before installing Hyvä Widgets, make sure to check the following pointers.

• Compatibility
• Magento 2.4.3 or Higher Versions

• Requirements
• Magento 2.4.3 or Higher
• Hyva themes version 1.1.10 or higher
• Hyva theme license and access via Private Packagist

Installation Process of Hyvä Widgets

Depending on your nature, you can install the Hyva widgets within your Hyva themes. There are different ways depending on License holders, contributors, and tech partners.

For Hyvä License Holders

If you have already purchased the Hyva theme license, then this is a value addition. The process for the license holder is pretty simple.

• To proceed, please open the terminal or command prompt on your device.
• To install the widgets, use the composer and run the following command:

composer require hyva-themes/magento2-hyva-widgets

Now, you have access to all the hyva widgets to explore and expedite the development with these creative-prebuilt components.

For Contributors and Technology Partners

If you want to contribute or extend their native functionality as their tech partner, you must take more steps while installing the widgets.

To get the access, make sure that you have their Gitlab access, set your public SSH key on your Gitlab, and then configure the composer with the below command:

composer config repositories.hyva-themes/magento2-hyva- widgets vcs git@gitlab.hyva.io:hyva-themes/magento2-hyva- widgets.git composer require hyva-themes/magento2-hyva-widgets:dev-main

Enable Hyvä Widgets

To enable Hyva widgets, run the following commands to activate the module:

bin/magento module:enable Hyva_Widgets bin/magento setup:upgrade

Configure Tailwind for Hyvä Widgets

You have to adjust the Tailwind Purge settings to ensure that the hyva widgets are correctly integrated with the hyva themes. Follow the steps below:

• Find the Tailwind configuration file by navigating to 

  ./app/design/frontend/[Your]/[Theme]/web/tailwind/tailwind.config.js

• Add the hyva-themes/magento-hyva-widgets module to the purge setting as led:

purge: {
    content: [
        ...
        '../../../../../../../vendor/hyva-themes/magento2-hyva-widgets/**/*.phtml'
    ]
}

Building Your Custom Theme with Hyvä Widgets

To ensure that the changes you made using Hyvä Widgets are visible on your website, please follow these steps:

• Navigate to the web/tailwind directory of your theme.
• Run the command

  npm run build-prod

   to generate the styles.css file.

Once you have completed these steps, your changes should be reflected on your website.

Configuration Notes

There are two ways to insert Hyvä Widgets: through the Admin section under Content > Widgets, or using a WYSIWYG editor or PageBuilder.

Hyvä Widgets provides a powerful solution to enhance your Magento website's functionality. Follow this direction to successfully install and configure Hyvä Widgets, ensuring efficient and effective e-commerce operations.

How to use Hyva widgets?

Let's understand the widgets and how to use them for the interactive website features. You can create the widget instances to add exciting features to your Magento website. See how:

Adding a New Widget

To add a new widget within your hyva theme, follow the steps to count on:

Step 1:Log into your Magento Admin UI.

Step 2:Navigate to Content, then Pages, and select a page like Home.

Step 3:Click the "Show/Hide" button to open the Editor.

Step 4:Click "Insert Widget" at the top right.

Step 5:Select the Hyva content widget from the dropdown list

Step 6:Choose your options from the "Widget Options" box that appears

Step 7:Click "Insert Widget" at the top right

Step 8:Save your changes before leaving the page.

Step 9:In "production mode," click "Block HTML" and refresh the Full Page Cache.

This applies recent changes to the storefront and makes the widget visible on your website's main page.

Making your own development following Hyva modules

If you want to build and modify something, this is for you.

Location of the Hyva widget module:

vendor/hyva-themes/magento2-hyva-widgets/src

Understanding the module

This module follows the same structure as other standard Hyvä modules. You can find the main code in the src/ directory of the module. Now, let's understand the folders in the module:

• The Block Folder:This folder contains PHP block classes that regulate the display of content on your website.
• The etc Folder:This folder includes a widget.xml file that lets you set up different widgets. As a developer, you can add fields, change settings, or create new widgets based on the blueprints from this folder.
• The Observer Folder:This folder addresses a specific issue concerning widget images' web addresses. However, there is an unresolved issue with directives in Magento 2.
• The Plugin Folder:This folder contains a fix for a widget problem that sometimes arises due to specific symbols. However, the Hyvä team is still investigating the root cause of this issue.
• The ViewModel Folder:This folder has a class named CategoryProducts that supports a specific widget. It helps the category slider widget display products from selected categories.
• The view/frontend Folder:This folder is essential for front-end developers. It has two sub-folders, templates, and web.
• The Templates Folder:This folder allows you to customize your widget's appearance using simple coding languages such as JS, Tailwind, and Alpine. If you want to modify a design, create a new folder called Hyva_Widgets/templates/widget/ and copy the design as you want to have.
• The web Folder:This folder contains a specific code for a slider widget.

This is an overview of the Hyvä Widgets development module. Explore the module to make changes to your website. Let's review the available Hyvä Widgets types.

What are the types of Hyvä widgets?

There are four primary Hyva widgets available with the hyva themes, and they are the Hyvä Multi Field Widget, Banner Widget, Category Products, and Content Widget.

Now, let's understand the purpose of each widget one by one to get a clear idea about how to use them.

Hyvä Multi Field Widget

As the name suggests, this widget creates multiple fields in the box/section. It is used as a magic box where you can put pictures, titles, buttons, and more.

What you can put inside this widget

In this widget, you will find a 'Content Field' that displays some essential elements, such as:

• Widget Title:This is like a headline, which appears as the prominent text.
• Multifield Data:Allows you to add a small note or message you want to share.
• Display Type:Select how you want to show your items. You can select between a slide show or a grid layout.

You can use "Steps" to create little boxes holding different things. You can add the following things inside each step:

• Image:Add an image or picture of your choice.
• Title:Write a big, bold name for your step.
• Description:This space allows you to write more about your step.
• Button Text:Add a button; you can write what you want it to show as a button.
• Button URL:Add a URL to the button that will be redirected to a particular page or website. You can add a page URL on your website like "/products" or another website URL as Navigate Commerce
• Action:This special button allows you to remove a step if you don't want it anymore. But don't forget to click "Save" after removing a step so your website knows about the change.

Intuitive Animations

The "Multifield Fade Animations" - a must-know animation technique that smoothly makes content appear and disappear as you scroll down a website. You can create the desired effect that best suits your website with ten different styles. To understand and get into the technical details, check out the Intersect Plugin Alpine.js Documentation.

Remember, you need Hyvä 1.1.10 or later versions to get the best out of animations.

Spacing For a neat look

Let's discuss two crucial design concepts: padding and margin.

Padding means the space inside an element, while margin deals with the space outside an element. Hyvä multifield padding lets you customize the space inside an element, while Hyvä multifield margin lets you choose how much space you want outside an element.

By using these, you can create a visually appealing website. If you want to learn more, check out the TailwindCSS Padding documentation and TailwindCSS Margin documentation guides.

Hyvä Banner Widget

Let's explore the Hyvä Banner Widget and learn about its features. The Hyvä Banner Widget helps you add eye-catching banners to your website. Banners are like big posters featuring images, text, and clickable buttons to direct visitors to specific pages or actions.

Understanding Content Field for Making Banner

The list shows the different Content Fields you can see in this widget. They are:

• Banner Image:Select an image for your website banner.
• Image Width:Keep in mind that using large images may slow down your website
• Image Height:Specify the dimensions (height & width) of the image to ensure a perfect fit
• Banner Title:Add your banner a name or headline.
• Banner Text:Add a brief message or description.
• Button Name:Choose a button name and specify where it should take visitors when clicked
• Button Link:Decide where you want your message to appear - left, middle, or right
• Text Position:Decide where you want your message to appear - left, middle, or right
• Text Color:Choose a color for your message.
• Background Color:Select colors for your text and background.
• Container:Your banner sits inside a container with a specific size from the theme.
• Inside Container:A smaller box inside the main container helps your banner stretch across the screen. If you need a different size for this box, you'll need to add another special setting.

Style your banner

You have three options to choose from for your banner display:

• Full Width:Stretches the banner from one side of the screen to the other.
• Half Left Caption:Splits the banner in two, with any words or messages appearing on the left side.
• Half Right Caption:Splits the banner in two, with any words or messages appearing on the right side.

You can select to have a see-through shade on your banner picture to ensure the words stand out. If you decide to use the shade, you can select its color. With the Hyvä Banner Widget, you can add a sleek and cool look to your website.

Animation

When you scroll down a website, the banner can smoothly appear and disappear if you scroll past it. There are ten different ways the banner can do this. If you want to learn more about how this works, you can refer to the Intersect plugin Alpine.js guide.

It's essential to note that animations will only work with the Hyvä 1.1.10 version. Earlier releases of Hyvä don't have the x-intersect plugin, which means it won't work.

Spacing for Banners

The Hyvä banner margin option allows you to customize the space around your banner. You can choose the amount of space you want at the top, bottom, left, or right by using settings like mt-8 mb-8 mr-4 ml-4. In addition, you can select other styles to achieve your desired look. If you need assistance with your spacing or margins, the TailwindCSS documentation for margins is a helpful guide that provides more information.

Hyvä Category Products

Hyvä's "Hyvä Category Products" widget allows merchants to display products from a selected category on their website. Here are the features of this widget and how to use it effectively.

Knowing the Content Field of the widget

The following options are available in the content field:

• Widget Title: This is where you can name your widget.
• Content Editor:A special tool that allows you to modify the appearance of your content. You can create headings, change the size, and more. You may use free designs from Tailwind Components to add some special touches. If you need to add code, remember to hide the editor before doing so.
• Container:This feature enables you to adjust the size of your content. If you need a different size, you can easily change it in your theme's settings.
• Background Color:You can select a color for the background of your widget.
• Inside Spacing:This feature enables you to adjust the space inside your widget. It helps keep your content organized and tidy.

Category Product List Choices

See what you will get here:

• Pick a Category:On your website, you can select a store category from a dropdown list, and the products from that category will appear.
• How Many Products:Please specify the number of products you wish to display from the category you have selected.

Animation

When you scroll down a website, the content can smoothly appear. Similarly, it can smoothly disappear if you keep scrolling and moving past the content. There are 10 different ways to choose from for this effect. If you are interested in learning more about how this works, you can refer to the Intersect plugin Alpine.js guide.

Deciding How Your Widget Looks

You can choose from three styles for your content display: Hyvä Slider, Splide.js Slider, or Grid view

Spacing

Please find the following options below:

• Inside Space:You can control the space you want to keep inside your content, such as at the top, left, bottom, or right. You can use multiple styles like "pt-8 pb-8 pl-4 pr-4" or "py-6 px-8".
• Outside Space:This option allows you to choose the space around your content, like at the top, left, bottom, or right. You can use different styles such as "mt-8 mb-8 mr-4 ml-4". You can select multiple styles if required.

Hyvä Content Widget

This is the last type of Hyva widget, so let's quickly go through it.

Content Field

The content field in this widget includes two things:

• Content Editor:Have you heard of the WYSIWYG editor? It's an amazing tool that allows you to write and design simultaneously. You can select the size of your text, add attractive designs, and much more. However, if you're copying and pasting from somewhere, it's important to hide the editor. On the other hand, if you want to use the editor and unleash its magic, make sure to show it.
• Container:Consider a container as a box where you can store your belongings. You have the flexibility to determine the size of this box. You can adjust its size by accessing a designated area called tailwind.config.js. If you're interested in learning how to do this, a guide called TailwindCSS provides assistance.

Animations

Content fade animations can make your reading experience more engaging by making the pictures in the story move as you scroll down the page. You can choose from 10 different dance moves for your pictures, and they will disappear when you scroll past them. If you are interested in learning more about how this works, you can check out a guide called the Intersect plugin Alpine.js.

A color picker is a tool that lets you to select your favorite color for the background for the widget. It's like coloring the picture of your own! So, if you have a favorite color, you can use a color picker to personalize your widget.

Spacing

When designing a webpage, there are two types of spaces to consider: inside space and outside space.

• Inside space is like the space within a picture frame, and you decide how much space you want at the top, bottom, left, and right of your picture. To define the inside space, you can refer to a guide called TailwindCSS Padding.
• Outside space is like the space around the picture frame, which is the gap between your frame and the wall. To define the outside space, you can refer to a guide called TailwindCSS Margin.

Text Font Color

The content widget allows you to choose the color of your text. This feature is most effective when used with the visual editor rather than pasting in raw HTML. The Hyvä Content Widget is a great tool that can improve the appearance and experience of your website. With an easy-to-use editor, customizable design options, and engaging animations, it's a must-have for anyone utilizing the Hyvä platform.

Working with Hyva Widgets

By now, you should have learned about Hyva widgets and how to install, configure, and use them to expedite the development process. If you are a Magento store owner, this knowledge will help you understand the value and purpose of each field in the widget and update the content without any dependencies. Developers can relax without worrying about the UI of the stores. Being a leading Hyva partner agency, we are certain and have worked on these Hyva widgets in our Magento development. If you're interested in integrating any Hyvä Widgets into your store, send us a DM.