Magento 2 Homepage Popup – Display on Page Load

magento2

In magento Home page display Once the customer clicks checkbox in the popup. It should close the popup and should not pop again.

Best Answer

You can try this way:

<div id="custom-popup-modal">
    <ul id="checkBundle">
        <li><label><input id="dont" type="checkbox" />Dont Show Popup Again</label>
    </ul>
</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, $('#custom-popup-modal'));
            if (!localStorage.getItem('popupShown')) {
                $('#custom-popup-modal').modal('openModal');

                $("#dont").click(function(){
                    localStorage.setItem('popupShown', true);
                });
            }
        }
    );
</script>

In the above code, we are checking whether the cookie is stored in the localstorage. If it is not stored in the local storage we are calling our modal popup. Only after clicking the checkbox, the cookie will be stored in the local storage.

Related Topic