1

How to create a popup?

I want to create a popup for every page unless the customer clicked close. I want to show a popup with the cms block content.

I am not sure what to do or how to start I have looked at few from inchoo and here but they both didn’t help.

2 Answers 2

2

Here is the module also can manage Popup settings from Admin Panel. You can download from Github

enter image description here

2

you can try this way..!

app/code/VENDOR/MODULE/view/frontend/layout/default.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="before.body.end">
            <block class="VENDOR\MODULE\Block\Popup" name="popup.config" template="VENDOR_MODULE::popup.phtml" />
        </referenceContainer>
    </body>
</page>

app/code/VENDOR/MODULE/Block/Popup.php

<?php

namespace Vendor\Module\Block;

class Popup extends \Magento\Framework\View\Element\Template
{
    public function __construct
    (
        \Magento\Framework\Stdlib\CookieManagerInterface $cookieManager,
        \Magento\Framework\View\Element\Template\Context $context
    )
    {
        $this->_cookieManager = $cookieManager;
        parent::__construct($context);
    }

    public function getShowPopup()
    {
        $showpopup = $this->_cookieManager->getCookie('showpopup');
        if(!empty($showpopup) && $showpopup == 'no')
            return 'no';
        else
            return 'yes';
    }
}

app/code/VENDOR/MODULE/view/frontend/templates/popup.phtml

<?php if($block->getShowPopup() != 'no'): ?>
    <div id="popup-modal">
        Hiren Goswami
    </div>

    <script type="text/javascript">
        require(['jquery', 'Magento_Ui/js/modal/modal', 'mage/cookies'],function($, modal, cookies)
        {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: 'mymodal1',
                    click: function () 
                    {
                        console.log('Continue...')
                    }
                }]
            };

            var popup = modal(options, $('#popup-modal'));

            $('#popup-modal').modal('openModal').on('modalclosed', function() 
            {
                $.cookie('showpopup', 'no', { path: '/' });
            });
        });
    </script>
<?php endif; ?>
2
  • This isn't loading up, I have followed this but not displaying I have the block, layout, template not doing Jan 16, 2020 at 9:32
  • 1
    check template(popup.phtml) file is called or not ??
    – Hiren
    Jan 16, 2020 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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