How to Add Hyvä Popup Modal in Magento 2
Today we will learn how to add the popup modal on the Hyvä theme in Magneto 2
Hyvä popup modal is used to display additional popup information, popup forms ,etc. in magento 2
In this example, I will show you how to create a sample popup using the Hyvä popup modal.
Firstly, we need to create a layout file on which we want to display the popup:
Add the below code in hyva_webkul_hyvapopup_add.xml file at path-
app/code/Webkul/HyvaPopup/view/frontend/layout/
<?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">Webkul_HyvaPopup::Template.phtml</argument>
</action>
</referenceBlock>
</body>
</page>
Now add the template on which you want to add the popup
Create Template.phtml file at the below path:
app/code/Webkul/HyvaPopup/view/frontend/templates/
<?php
$modalViewModel = $viewModels->require(\Hyva\Theme\ViewModel\Modal::class);
?>
<div class="text-sm">
<div class="wk-seller-card-row" x-data="hyva.modal()">
<?= $escaper->escapeHtml(__('Sample Popup Modal')) ?>
<?php
$modal = $modalViewModel->createModal()->withTemplate('Webkul_HyvaPopup::Popup.phtml');
$modalBlock = $modal->getContentRenderer();
$data = "sample data";
$modal->withAriaLabel('Sample Popup modal')
->withDialogRefName('popupRefName')
->withDialogClasses('inline-block max-h-screen overflow-auto bg-white shadow-xl rounded-lg text-gray-700 w-3/4 rounded-sm p-4');
$modalBlock->setData('popupRefName', ['formAction' => $block->getStatusFormAction()]) ?>
<?= /* @noEscape */ $modal ?>
<a id="popup button" href="#" class="text-blue-900 font-bold" @click='show("popupRefName", $event)'>
<?= $escaper->escapeHtml(__('OPen Popup'))?>
</a>
</div>
</div>
In above code:
withAriaLabel – > Includes popup Label
withDialogRefName – >Includes reference name of popup
withDialogClasses – >Includes Tailwind CSS classes for adding style in popup.
At last, we need to create a Popup.phtml file which will contain the structure of popup.
Create Popup.phtml at app/code/Webkul/HyvaPopup/view/frontend/templates/
<?= 'The content to be displayed in Popup ' ?>
Output:
For more reference please visit the modal dialog overview
Support
If you have any queries please contact us at Webkul Support System.
If you’re looking to create a custom e-commerce website, it’s a great idea to Hire Hyva Magento developers who can help you build a powerful and scalable online store.