8

Sometimes it is required like to show promotional popup for the first time when customer visits the site. How to create popup based on cookie in magento 2? Like I want to display any CMS static block in popup.

  • Why author of accepted answer didn't mention that solution is taken from here: inchoo.net/magento-2/… ? – Tomas Novoselić Oct 26 '18 at 15:39
  • Stolen is a big word :P But agree, he could put credit to the author. – Greg Oct 26 '18 at 15:46
  • I agree, it is corrected. – Tomas Novoselić Oct 26 '18 at 16:03
  • This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Teja Bhagavan Kollepara Oct 26 '18 at 16:55
  • I recently have installed Magento 2.3 via Composer. I want to implement this modal popup on the home page. I followed the above steps, but I guess I am missing something. After creating the folders and files with the above content, I ran these commands sudo php bin/magento setup:upgrade sudo php bin/magento setup:static-content:deploy I'm wondering what I have done wrong. Can anybody point or guide me out in the right direction? I'm getting the home page displayed with no content at the moment. – Kalpit Shah Feb 26 at 9:34
23

It is very simple to create modal popup in Magento 2. Like if you want to display any static block in popup, you can do it simply by calling the content and displaying it.

We should start by creating new module in Magento 2.

  1. app/code/Example/ModalOverlay/registration.php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Example_ModalOverlay',
    __DIR__
);
  1. app/code/Example/ModalOverlay/etc/module.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Example_ModalOverlay" setup_version="1.0.0">
    </module>
</config>
  1. app/code/Example/ModalOverlay/Block/ModalOverlay.php
namespace Example\ModalOverlay\Block;

use Magento\Cms\Api\BlockRepositoryInterface;
use Magento\Cms\Api\Data\BlockInterface;
use Magento\Framework\Exception\LocalizedException;
use Magento\Framework\View\Element\Template;
use Magento\Framework\View\Element\Template\Context;

class ModalOverlay extends Template
{

    private $blockRepository;

    public function __construct(
        BlockRepositoryInterface $blockRepository,
        Context $context,
        array $data = []
    ) {
        $this->blockRepository = $blockRepository;

        parent::__construct($context, $data);
    }

    public function getContent($identifier)
    {
        try {
            /** @var BlockInterface $block */
            $block = $this->blockRepository->getById($identifier);
            $content = $block->getContent();
        } catch (LocalizedException $e) {
            $content = false;
        }

        return $content;
    }
}
  1. app/code/Example/ModalOverlay/view/frontend/templates/modal_overlay.phtml
<?php if ($content = $block->getContent('any-cms-block-indetifier-to-be-displayed')) { ?>

    <div id="modal-overlay" style="display:none;">
        <?php echo $content ?>
    </div>
    <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                        "modal_overlay": {
                            "component": "Example_ModalOverlay/js/modal_overlay"
                        }
                     }
                }
            }
        }
    </script><?php } ?>
  1. app/code/Example/ModalOverlay/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="content">
            <block class="Example\ModalOverlay\Block\ModalOverlay"
                   template="Example_ModalOverlay::modal_overlay.phtml"
                   name="modalOverlay"
                   as="modalOverlay"/>
        </referenceContainer>
    </body>
</page>
  1. app/code/Example/ModalOverlay/view/frontend/web/js/modal_overlay.js
define([
    'uiComponent',
    'jquery',
    'Magento_Ui/js/modal/modal',
    'Magento_Customer/js/customer-data'
], function (Component, $, modal, storage) {
    'use strict';

    var cacheKey = 'modal-overlay';

    var getData = function () {
        return storage.get(cacheKey)();
    };

    var saveData = function (data) {
        storage.set(cacheKey, data);
    };

    if ($.isEmptyObject(getData())) {
        var modal_overlay = {
            'modal_overlay': false
        };
        saveData(modal_overlay);
    }

    return Component.extend({

        initialize: function () {

            this._super();
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: false,
                title: false,
                buttons: false
            };

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

            modal_overlay_element.css("display", "block");

            this.openModalOverlayModal();

        },

        openModalOverlayModal:function(){
            var modalContainer = $("#modal-overlay");

            if(this.getModalOverlay()) {
               return false;
            }
            this.setModalOverlay(true);
            modalContainer.modal('openModal');
        },

        setModalOverlay: function (data) {
            var obj = getData();
            obj.modal_overlay = data;
            saveData(obj);
        },

        getModalOverlay: function () {
            return getData().modal_overlay;
        }

    });
});

It's done.

enter image description here

| improve this answer | |
  • 1
    1+ for you. Good work. – Suresh Chikani Apr 13 '18 at 7:06
  • Can u please tell me what is use of storage.key at this pop? – Amit Bera Apr 13 '18 at 7:16
  • I tried The above Process But i haven't got anything.Like pop @Kazim Noorani – Learing_Coder Apr 13 '18 at 9:58
  • Popup is not showing @Kazim Noorani – Learing_Coder Apr 13 '18 at 10:08
  • Can you please post your code? @PranayK – Kazim Noorani Apr 13 '18 at 11:28

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.