Are you working on a Hyvä theme project and want to add a popup modal? Follow the simple steps provided in this guide to add a popup modal in the Magento 2 Hyvä theme.
Popups are visual elements that appear on top of other elements on the screen, forcing users to focus on the provided information. They are used for promoting newsletter signups, discount offers, and announcing important news.
In the Magento 2 Hyvä theme, we can display such modal popups by creating a custom module. Let’s understand it more deeply through an example.
Method to Create a Magento 2 Hyvä Theme Popup
We’ll create a custom module that displays a custom popup on the Hyvä theme.
The custom module structure will look like this:
app/code/Meetanshi/HyvaPopup/ ├── etc/ │ ├── module.xml ├── registration.php ├── view/ │ ├── frontend/ │ │ ├── layout/ │ │ │ ├── default.xml │ │ ├── templates/ │ │ │ ├── Template.phtml │ │ │ ├── Popup.phtml
Let’s go through the steps to create a custom module for showing a custom popup in Hyvä theme.
Step 1: Define & Register a Custom Module
Create a registration.php file with the given code.
app/code/Meetanshi/HyvaPopup/registration.php:<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Meetanshi_HyvaPopup',
__DIR__
);
Now, register the module by creating the module.xml file.
app/code/Meetanshi/HyvaPopup/etc/module.xml:<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Meetanshi_HyvaPopup" setup_version="1.0.0"/>
</config>
Step 2: Create a Layout File
To add the popup modal to Magento 2 Hyvä frontend, create the following XML file.
app/code/Meetanshi/HyvaPopup/view/frontend/layout/default.xml:<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="hyva_modal"/>
<body>
<referenceBlock name="header-content">
<action method="setTemplate">
<argument name="template" xsi:type="string">Meetanshi_HyvaPopup::Template.phtml</argument>
</action>
</referenceBlock>
</body>
</page>
Step 3: Create a Popup Template
Now, define a structure for the popup modal in HTML and its trigger.
app/code/Meetanshi/HyvaPopup/view/frontend/templates/Template.phtml:<?php
$modalViewModel = $viewModels->require(\Hyva\Theme\ViewModel\Modal::class);
?>
<div class="text-sm">
<div class="meetanshi-popup-container" x-data="hyva.modal()">
<?= $escaper->escapeHtml(__('Meetanshi Popup Modal')) ?>
<?php
$modal = $modalViewModel->createModal()->withTemplate('Meetanshi_HyvaPopup::Popup.phtml');
$modalBlock = $modal->getContentRenderer();
$modal->withAriaLabel('Meetanshi Popup Modal')
->withDialogRefName('popupRef')
->withDialogClasses('inline-block max-h-screen overflow-auto bg-white shadow-xl rounded-lg text-gray-700 w-3/4 p-4');
?>
<?= /* @noEscape */ $modal ?>
<a id="popup_button" href="#" class="text-blue-900 font-bold" @click='show("popupRef", $event)'>
<?= $escaper->escapeHtml(__('Open Meetanshi Popup'))?>
</a>
</div>
</div>
The above code uses Hyvä’s modal system and displays the popup when the user clicks the “Open Meetanshi Popup” button. It loads the popup from the Popup.phtml file.
You can customize the code and its trigger as per your design requirements.
Step 4: Add Popup Content
Now, we will define the content to be shown in the Hyvä theme popup.
app/code/Meetanshi/HyvaPopup/view/frontend/templates/Popup.phtml:<?= 'Meetanshi Special Offer: Get 20% Off! 🎉' ?>
Once the module is created, run the following commands:
- bin/magento module:enable Meetanshi_HyvaPopup
- bin/magento setup:upgrade
- bin/magento cache:flush
Now, test the popup modal on the Magento 2 Hyvä front end. You can modify the logic in the template.phtml file to show it dynamically and change its content from the Popup.phtml file.
Meetanshi is a well-known Magento and Shopify development company, offering expert Hyvä theme development services. Partner with us today to transform your Magento store with a fast-loading Hyvä theme.
