0

As no one helped me before. That's why I am asking again for help in creating a cookie that help to display popup only one time. What should I change in this script so that it displays popup only one time? I am using the following code ;

 <script>
                require([
                    "jquery",
                    'Magento_Ui/js/modal/modal',

                    "jquery/jquery.cookie"
                ], function(  $, modal  ) {
                    //<![CDATA[
                    $(function () {
                        function setCookie(cname, cvalue, exdays) {
                            var d = new Date();
                            d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                            var expires = "expires="+d.toUTCString();
                            document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
                        }
                        function getCookie(cname) {
                            var name = cname + "=";
                            var ca = document.cookie.split(';');
                            for(var i = 0; i < ca.length; i++) {
                                var c = ca[i];
                                while (c.charAt(0) == ' ') {
                                    c = c.substring(1);
                                }
                                if (c.indexOf(name) == 0) {
                                    return c.substring(name.length, c.length);
                                }
                            }
                            return null;
                        }

                        var subscribeFlag = getCookie('cleverNewsletterSubscribeFlag');

                        $('#zoo_newsletter .subcriper_label input').on('click', function () {
                            if ($(this).parent().find('input:checked').length > 0) {
                                setCookie('cleverNewsletterSubscribe','true',2147483647);
                            } else {
                                setCookie('cleverNewsletterSubscribe',null,1);
                            }
                        });

                        $('#zoo_newsletter button.btn-novetty').on('click', function () {
                            var button = $(this);
                            setTimeout(function () {
                                if (!button.parent().find('input#zoo-newsletter').hasClass('validation-failed')) {
                                    setCookie('cleverNewsletterSubscribeFlag','true',2147483647);
                                }
                            }, 500);
                        });

                        if (!(subscribeFlag) && !getCookie('cleverNewsletterSubscribe')) {
                            var options = {
                                type: 'popup',
                                modalClass: 'zoo-newsletter-popup',
                                responsive: true
                            };
                            var popup = modal(options, $('#zoo_newsletter'));
                            setTimeout(function(){
                                $('#zoo_newsletter').modal('openModal');
                            },<?php echo $delay; ?>);

                        }
                    });
                    //]]>
                })

Any help and consideration is appreciated

5
  • yeah @ben because no one is answering any of my question. what else should i do?
    – Laiba
    Feb 27 '18 at 11:39
  • 1
    Be patient and wait, asking a question multiple times does not increase the chance of someone answering it. Most people here have jobs to do at the same time as helping so we can't answer straight away. If it's urgent then adding a bounty often incentives people, so answer some questions to get some points then add a bounty.
    – Ben Crook
    Feb 27 '18 at 11:41
  • just a little help in creating cookie... :( please
    – Laiba
    Feb 27 '18 at 11:42
  • I can't quite work out what your code is doing, if you add some comments to the code explaining each part it'll be easier to understand and easier for people to help.
    – Ben Crook
    Feb 27 '18 at 11:44
  • no worries. it will be very good if uh just tell me the code of cookie that will restrict popup to display only one time :)
    – Laiba
    Feb 27 '18 at 11:48
0

I hope below code help you...

<div id="singup_popup_overlay" class="newsletter_popup">
<div id="singup_popup" class="newsletter_popup_title">
    <div class="newsletter_img">
        <img src="<?php echo $block->getViewFileUrl('images/new.png')?>"/>
    </div>
    <div class="newsletter_popup_content">
        <div id="signup_close" class="close_button">
            <i class="fa fa-times" aria-hidden="true"></i>
        </div>
        <div class="title">
            <h3><?php echo __('Newsletter')?></h3>
        </div>
        <p><?php echo __('Sign Up for exclusive updates, new arrivals and insider-only discounts')?></p>
        <?php echo $block->getLayout()->createBlock("Magento\Newsletter\Block\Subscribe")->setTemplate('Magento_Newsletter::subscribe.phtml')->toHtml(); ?>
    </div>
</div>

<script type="text/javascript">
require(['jquery'],function(){

    function setCookie(cname,cvalue,exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays*24*60*60*1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

    function checkCookie(cname) {
        var user=getCookie(cname);
        if (user != "") {
            return "1";
        } else {
            return "0";
        }
    }

    jQuery(document).ready(function () {
        var popupShow = checkCookie("signup_popup_show");
        if(popupShow != "1") {
            jQuery('body').addClass("no-scroll");
            jQuery('#singup_popup_overlay').fadeIn('fast');
            jQuery('#singup_popup').fadeIn('fast');
        }
    });
    jQuery('#signup_close').click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        jQuery('body').removeClass("no-scroll");
        jQuery('#singup_popup_overlay').fadeOut('fast');
        jQuery('#singup_popup').fadeOut('fast');

        setCookie("signup_popup_show", 1, 1);
    });
    jQuery('#singup_popup_overlay').click(function () {
        jQuery('body').removeClass("no-scroll");
        jQuery(this).fadeOut('fast');
        jQuery('#singup_popup').fadeOut('fast');
    });
});

5
  • where should i paste this code? and should i place this code together? as a phtml file?
    – Laiba
    Feb 27 '18 at 12:17
  • Yes, you have to place this code together in a phtml file. Once it works, then replace html with your one. and selector of script with your one. Feb 27 '18 at 12:26
  • what i've done is replace my js with your js
    – Laiba
    Feb 27 '18 at 12:34
  • First of all check this code, if it work as you want then after replace. Feb 27 '18 at 12:36
  • Javascript shouldn't really be added to a PHTML file, this guide explains how to add JS.
    – Ben Crook
    Feb 27 '18 at 12:58

Not the answer you're looking for? Browse other questions tagged or ask your own question.