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>
Was it helpful?

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
scroll top