0

Does someone know how or where to get a popup on magento2 after 15 seconds, which collects email addresses for newsletter? Is there a good free extension or is it better to make it myself?

2

The biggest problem when you make a time popup is that the modal opens for each page view and if the user changes the page, the 15 seconds restarts from zero.

So in addiction to the things written before, I suggest to use a cookie to store the session and preserve your countdown.

So in your definition function you can write:

define([

    "jquery",
    "Magento_Ui/js/modal/modal",
    "mage/cookies",

], function($,modal) {

It's not so fine that the same user sees the popup each time he visit a page, but you can set a cookie when your user see the newsletter box for the first time. So just after opening the modal you can write something like:

 $.mage.cookies.set(cookie, 'yes',{lifetime: 342342342342});

Now you can open the modal only if the cookie is set to yes:

    if ($.mage.cookies.get(cookie) == 'yes') {
       // Open the modal
    }

To preserve the countdown you have to track the time from the first page load to the newsletter appearance. So start a countdown at DOM ready and update your cookie value:

    callback = callback || function(){};
    var int = setInterval(function() {
        $.mage.cookies.set('popup-timing', i);
        i-- || (clearInterval(int), callback());
    }, 1000);

Now you can set a timeout and open the modal exactly after 15 seconds since the cookie was set for the first time.

I've already done this for an internal project. Try if it fit for you.

  • Please explain some thing, donot put only link – Amit Bera May 24 '17 at 9:41
  • You are right. I'll edit the post – nuovecode May 24 '17 at 9:49
  • Absolutely amazing! Exactly what I wanted. Works great! :D Could you tell me how I could make the title of the modal "font-weight:bold;" with inline css? Which file? Also, would it be possible to add an image in the modal? Thanks alot man!! :)) – N1njaWTF May 24 '17 at 15:15
  • Edit (in your theme) view/frontend/templates/newsletter/popup.phtml – nuovecode May 24 '17 at 15:17
  • Thx. I've managed to add an image now but I cannot see any "modal-title" where I could style it inline.. – N1njaWTF May 24 '17 at 16:03
0

This answer is for display popup with custom module

Just follow this step to display popup with newsletter after 5 second(You can chnage it as your need) on homepage

app/code/Vendor/Module/view/frontend/layout/cms_index_index.xml

<?xml version="1.0" ?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Vendor_Module/js/popup.js"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\template" name="index.home" template="Vendor_Module::popup.phtml"/>
        </referenceContainer>
    </body>
</page>

app/code/Vendor/Module/view/frontend/templates/popup.phtml

<div id="popup-content" class="popup-content" style="display:none">
    <?php echo $this->getLayout()->createBlock("Magento\Newsletter\Block\Subscribe")->setTemplate("Magento_Newsletter::subscribe.phtml")->toHtml();?>
</div>

app/code/Vendor/Module/view/frontend/web/js/popup.js

require(
    ['jquery', 'Magento_Ui/js/modal/modal'],
    function($, modal) {
        setTimeout(function(){
            modal({
                autoOpen: true,
                responsive: true,
                clickableOverlay: false,
                modalClass: 'modal-custom',
                title: 'Popup'
            }, $("#popup-content"));
        },5000);
    }
);
0

Popup with custom theme

Just follow this step to display popup with newsletter after 5 seconds(You can change it as your need) on homepage

app/design/frontend/Vendor/theme/Magento_Cms/layout/cms_index_index.xml

<?xml version="1.0" ?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Magento_Cms/js/popup.js"/>
    </head>
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\template" name="index.home" template="Magento_Cms::popup.phtml"/>
        </referenceContainer>
    </body>
</page>

app/design/frontend/Vendor/theme/Magento_Cms/templates/popup.phtml

<div id="popup-content" class="popup-content" style="display:none">
    <?php echo $this->getLayout()->createBlock("Magento\Newsletter\Block\Subscribe")->setTemplate("Magento_Newsletter::subscribe.phtml")->toHtml();?>
</div>

app/design/frontend/Vendor/theme/Magento_Cms/web/js/popup.js

require(
    ['jquery', 'Magento_Ui/js/modal/modal'],
    function($, modal) {
        setTimeout(function(){
            modal({
                autoOpen: true,
                responsive: true,
                clickableOverlay: false,
                modalClass: 'modal-custom',
                title: 'Popup'
            }, $("#popup-content"));
        },5000);
    }
);

Now clear cache and do static-content deploy

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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