10

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.

5
  • Why author of accepted answer didn't mention that solution is taken from here: inchoo.net/magento-2/… ? Oct 26, 2018 at 15:39
  • Stolen is a big word :P But agree, he could put credit to the author.
    – Greg
    Oct 26, 2018 at 15:46
  • I agree, it is corrected. Oct 26, 2018 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 Oct 26, 2018 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. Feb 26, 2020 at 9:34

1 Answer 1

25

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

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

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.