How to create popup in magento 2?

magento.stackexchange https://magento.stackexchange.com/questions/222159

题

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.

有帮助吗？

解决方案

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

许可以下： CC-BY-SA 和 归因
scroll top