magento 2 popup model need to open only one time on whole webiste after login or subscribe
-
09-10-2020 - |
Question
I created a magento 2 pop-up it is working great. I have included a newsletter form in this pop-up .Problem is that pop-up is repeated after refers button.Problem is this ,
I want open pop-up only one time .
<div id="popup-modal">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Subscribe for Our <span>exclusive offer</span></h1>
<p>Be the first to know about new arrivals exclusive offers and promotions</p>
<?php echo $block->getLayout()->createBlock('Magento\Newsletter\Block\Subscribe')->setTemplate('subscribe.phtml')->toHtml();?>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
//title: 'popup modal title',
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-modal'));
$('#popup-modal').modal('openModal');
}
);
$(document).ready(function(){
$(".actions").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
Solution
You can use the browser's localStorage to check whether or not the pop-up was shown to a client.
<div id="popup-modal">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Subscribe for Our <span>exclusive offer</span></h1>
<p>Be the first to know about new arrivals exclusive offers and promotions</p>
<?php echo $block->getLayout()->createBlock('Magento\Newsletter\Block\Subscribe')->setTemplate('subscribe.phtml')->toHtml();?>
</div>
<script>
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
//title: 'popup modal title',
buttons: [{
text: $.mage.__('Continue'),
class: '',
click: function () {
this.closeModal();
}
}]
};
var popup = modal(options, $('#popup-modal'));
if (!localStorage.getItem('popupShown')) {
$('#popup-modal').modal('openModal');
localStorage.setItem('popupShown', true);
}
}
);
$(document).ready(function(){
$(".actions").click(function(){
alert("The paragraph was clicked.");
});
});
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange