5

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.

14

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

  • 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.