How to Display Messages in Hyvä Theme Using JS?

In this blog post, I will show you how to display messages in Hyvä theme using JS.

Hyvä provides a global function window.dispatchMessages() to show messages.

You can use this to display various types of messages on the page through JS like:

• Success: Indicates a successful operation
• Notice: Provides important information or updates
• Warning: Alerts users about potential issues
• Error: Informs users about errors or unsuccessful operations

Here’s an example JS syntax of the dispatch message array for the Hyvä theme:

window.dispatchMessages([
   {
       type: "success",
       text: "Great job! Your profile has been updated successfully."
   }
], 2000);

In the above code, the type attribute defines the message type and the text attribute contains the actual message to be shown. Optionally, you can also define the message duration in milliseconds (ms).

The above code will display the following message:

You can trigger the message dynamically using JavaScript in specific conditions.

Using JS to Display Messages on Hyvä Based on Conditions

The dispatchMessage global function can be used site-wide to show messages. You can use it to display messages, errors, and warnings on the front end based on triggers and events.

Let’s understand it through an example.

Hyvä Message Example

You can use the success message type in Hyvä to display a success message on the page. This can be useful for events like successful form submission and order placement.

For example, here’s a Javascript notifications Hyvä theme code that displays a success message on form submission:

document.querySelector("#submit-button").addEventListener("click", function() {
    // Simulating successful form submission
    window.dispatchMessages([
        {
            type: "success",
            text: "Your form has been submitted successfully!"
        }
    ], 3000); // Message disappears after 3 seconds
});

Here’s what it looks like:

Likewise, you can display notice, warning, and error messages in Hyvä by implementing a similar JavaScript.

FAQs

Can I Customize the Appearance / Colors of Hyvä Messages?

Yes, you can customize the appearance of Hyvä theme messages. To do so, you can override the default styles applied in the Tailwind CSS file.

Do Hyvä Messages Support HTML Formatting?

No, you can not use HTML content inside Hyva’s messages.

How Do I Remove a Message Before its Timeout?

There are many ways to do this — you can use PHP to remove messages from the session or

Need Help? Consult the Hyvä Experts

Meetanshi is a leading e-commerce development company offering expert Magento and Shopify development solutions. We have an in-house team of certified Magento developers that can help you easily implement a fresh Magento 2 Hyvä theme or convert your existing store theme to Hyvä.

Get started with Hyvä theme development today.