I was trying to implement a custom popup when a header link was clicked. Tried a few options.
1) Magento Modal
2) A JS file with toggleClass
3) DropdownDialog widget - So far the best option
1) Magento Modal
Issues noticed was the overlay was unwanted and the positioning the popup was difficult.
2) A JS file with toggleClass
Issues noticed here was the click away did not close the popup. The same header link had to be clicked to close the popup.
<?php
/** @var \Vendor\Module\Block\Link $block */
/* @var \Magento\Framework\Escaper $escaper */
?>
<li class="header-subscribe" data-mage-init='{"Vendor_Module/js/header-subscribe": {}}'>
<div class="subscribe-link"></div>
<div class="content">
<form class="form subscribe"
novalidate
action="<?= $escaper->escapeUrl($block->getFormActionUrl()) ?>"
method="post"
data-mage-init='{"validation": {"errorClass": "mage-error"}}'
id="newsletter-validate-detail">
<div class="field newsletter">
<div class="control">
<label for="newsletter">
<input name="email"
type="email"
id="newsletter-popup"
placeholder="<?= $escaper->escapeHtml(__('Your email')) ?>"
data-mage-init='{"mage/trim-input":{}}'
data-validate="{required:true, 'validate-email':true}"
/>
</label>
</div>
</div>
<div class="actions">
<button class="action subscribe primary"
title="<?= $escaper->escapeHtmlAttr(__('Sign Up')) ?>"
type="submit"
aria-label="Subscribe">
<span><?= $escaper->escapeHtml(__('Sign Up')) ?></span>
</button>
</div>
</form>
</div>
</li>
define([
'jquery'
], function($) {
return function(config, element) {
$('.subscribe-link', $(element)).click(function(){
$('.content', $(element)).toggleClass('active');
});
};
});
- Some CSS work is required
3) DropdownDialog widget
<li data-block="dropdown" class="header-subscribe">
<div class="subscribe-link action" data-trigger="trigger"></div>
<div class="block content"
data-mage-init='{
"dropdownDialog": {
"appendTo": "[data-block=dropdown]",
"triggerTarget":"[data-trigger=trigger]",
"timeout": "2000",
"closeOnMouseLeave": false,
"closeOnEscape": true,
"autoOpen": false,
"triggerClass": "",
"parentClass": "active",
"buttons": []
}
}'>
<div id="subscribe-content-wrapper">
<form class="form subscribe"
novalidate
action="<?= $escaper->escapeUrl($block->getFormActionUrl()) ?>"
method="post"
data-mage-init='{"validation": {"errorClass": "mage-error"}}'
id="newsletter-validate-detail">
<div class="field newsletter">
<div class="control">
<label for="newsletter">
<input name="email"
type="email"
id="newsletter-popup"
placeholder="<?= $escaper->escapeHtml(__('Your email')) ?>"
data-mage-init='{"mage/trim-input":{}}'
data-validate="{required:true, 'validate-email':true}"
/>
</label>
</div>
</div>
<div class="actions">
<button class="action subscribe primary"
title="<?= $escaper->escapeHtmlAttr(__('Sign Up')) ?>"
type="submit"
aria-label="Subscribe">
<span><?= $escaper->escapeHtml(__('Sign Up')) ?></span>
</button>
</div>
</form>
</div>
</div>
</li>
Top comments (0)