How To Hide Hyva Modals On Page Load Without Overriding Vendor Templates

Hide Hyva Modals on Page Load in Magento’s Hyva theme without modifying vendor templates! By using a simple CSS and JavaScript approach, you can hide modals until they’re fully initialized, ensuring a seamless page load experience for your users. In this guide, we’ll walk you through an efficient, upgrade-safe solution that keeps your vendor files untouched.

In Magento’s Hyva theme, modals within the /vendor/ directory can cause a brief and distracting flash on page load, as they appear momentarily before full initialization. Adding the x-cloak attribute to hide these elements until the alpine:init event can resolve this issue, but directly editing files in /vendor/ isn’t practical or efficient. Instead, let’s explore a CSS and JavaScript solution that allows you to hide Hyva modals on page load effectively without modifying any vendor files.

Why Hide Hyva Modals on Page Load?

The default modal behavior in Hyva themes can lead to a brief flash on screen as these elements load, which can be distracting for users. By hiding modals on page load and only displaying them when they are fully initialized, we can create a smoother, more polished user experience.

Implementing a CSS Solution to Hide Hyva Modals on Page Load

This solution leverages CSS to hide all elements containing the hyva.modal data attribute until Alpine.js completes its initialization. By using CSS and JavaScript, we ensure the modals remain hidden initially and are only shown once they’re ready.

Step 1: Add CSS to Hide Modals on Page Load

In your theme’s _theme.scss file, add the following CSS code:

body:not([data-hyva-modal-ready]) [x-data*="hyva.modal"] {
  @apply !hidden;
}

This CSS rule uses the !hidden class to ensure any modal with the hyva.modal attribute stays hidden on page load. Once Alpine is ready, we’ll set a custom data-hyva-modal-ready attribute on the body element, allowing the modals to display.

To toggle the visibility of these modals at the correct time, we’ll use a small JavaScript snippet. Create a file named hyva-modal-ready.phtml in your Magento_Theme/web/js directory and include the following code:

<script>
  document.addEventListener('alpine:init', () => {
    document.querySelector('body').setAttribute('data-hyva-modal-ready', true);
  });
</script>

This script listens for the alpine:init event, which signals that Alpine.js is ready and has initialized its components. Once Alpine is initialized, the data-hyva-modal-ready attribute is added to the body, triggering our CSS rule to reveal the modals.

Step 3: Add the Script to Magento Layout

Next, you’ll need to load this script on your page. To do so, register the script in the Magento_Theme/layout/default.xml file by adding this block:

<page>
    <body>
        <referenceBlock name="before.body.end">
            <block name="hyva-modal-ready" template="Magento_Theme::js/hyva-modal-ready.phtml" after="-" />
        </referenceBlock>
    </body>
</page>

By placing this block in the before.body.end section, the script will load just before the end of the body tag, which is the optimal placement for initialization scripts.

Understanding the CSS and JavaScript Approach

With this setup, the CSS hides all Hyva modal components on page load. When Alpine.js initializes, the JavaScript adds a data-hyva-modal-ready attribute to the body tag, which in turn activates the CSS rule, allowing the modals to become visible. This method avoids the need for directly modifying vendor templates, which keeps your code cleaner, upgrade-safe, and more maintainable.

Conclusion

By implementing a CSS and JavaScript-based approach to hide Hyva modals on page load, you can enhance user experience without the hassle of modifying vendor files. This method is clean, upgrade-safe, and asynchronous, ensuring that modals appear only when fully initialized. Give this solution a try to improve the visual consistency and professionalism of your Hyva-themed Magento store.

Tips for real-world Alpine.js
Scroll to Top Button in Hyvä

FixNBlog