在本文中,我将向您展示如何围绕此创建最基本的功能。

很多时候,我们需要在用户访问网站时显示一些模态叠加信息。

我们可以用它来做很多事情,比如时事通讯订阅表格,优惠券代码或者其他

一般信息。

 

挑战

当客户访问我们的网站时,我们希望
在模式覆盖中显示特定于负载的静态块内容,并仅向每个客户显示一次。

 

解决方案:

我们应该从Magento 2中创建新模块开始。

为此,首先创建app/code/Magease/ModalOverlay/registration.php
其中包含以下内容:

<?php
/**
 * @category    Magease
 * @package     Magease_ModalOverlay
 * @copyright   Copyright (c) Magease (http://magease.net/)
 */
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magease_ModalOverlay',
    __DIR__
);

继续创建app/code/Magease/ModalOverlay/etc/module.xml
添加以下内容:

<?xml version="1.0"?>
<!--
  @category    Magease
  @package     Magease_ModalOverlay
  @copyright   Copyright (c) Magease (http://magease.net/)
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magease_ModalOverlay" setup_version="1.0.0">
    </module>
</config>

这将在Magento 2中创建一个新模块,我们现在要做的是创建将以模态显示的块,为此,让我们继续创建另一个名为
app/code/Magease/ModalOverlay/Block/ModalOverlay.php的文件。
文件内容如下:

<?php
 
namespace Magease\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
 *
 * @category    Magease
 * @package     Magease_ModalOverlay
 * @copyright   Copyright (c) Magease (http://magease.net/)
 */
class ModalOverlay extends Template
{
    /**
     * @var BlockRepositoryInterface
     */
    private $blockRepository;
 
    /**
     * ModalOverlay constructor.
     *
     * @param BlockRepositoryInterface $blockRepository
     * @param Context $context
     * @param array $data
     */
    public function __construct(
        BlockRepositoryInterface $blockRepository,
        Context $context,
        array $data = []
    ) {
        $this->blockRepository = $blockRepository;
 
        parent::__construct($context, $data);
    }
 
    /**
     * Retrieve modal overlay content
     *
     * @param $identifier
     * @return bool|string
     */
    public function getContent($identifier)
    {
        try {
            /** @var BlockInterface $block */
            $block = $this->blockRepository->getById($identifier);
            $content = $block->getContent();
        } catch (LocalizedException $e) {
            $content = false;
        }
 
        return $content;
    }
}

新创建的块需要有一个模板,所以让我们创建它并初始化我们的JavaScript app/code/Magease/ModalOverlay/view/frontend/templates/modal_overlay.phtml

<?php
/**
 * @category    Magease
 * @package     Magease_ModalOverlay
 * @copyright   Copyright (c) Magease (http://magease.net/)
 */
?>
<?php /** @var Magease\ModalOverlay\Block\ModalOverlay $block */ ?>
<?php if ($content = $block->getContent('this-should-be-renamed')) :?>
<div id="modal-overlay" style="display:none;">
    <?php /* @noEscape */ echo $content ?>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "modal_overlay": {
                        "component": "Magease_ModalOverlay/js/modal_overlay"
                    }
                 }
            }
        }
    }
</script>
<?php endif;?>

让我们在每个页面上将先前创建的块添加到布局中。
为此,创建app/code/Magease/ModalOverlay/view/frontend/layout/default.xml 并添加以下内容:

<?xml version="1.0"?>
<!--
  @category    Magease
  @package     Magease_ModalOverlay
  @copyright   Copyright (c) Magease (http://magease.net/)
-->
<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="Magease\ModalOverlay\Block\ModalOverlay"
                   template="Magease_ModalOverlay::modal_overlay.phtml"
                   name="modalOverlay"
                   as="modalOverlay"/>
        </referenceContainer>
    </body>
</page>

最后,让我们将以下内容添加到app/code/Magease/ModalOverlay/view/frontend/web/js/modal_overlay.js

/**
 * @category    Magease
 * @package     Magease_ModalOverlay
 * @copyright   Copyright (c) Magease(http://magease.net/)
 */
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;
        }
 
    });
});

 

结论

剩下的就是创建一个静态块并激活模块。
这将为您提供一个基本模块,您可以根据自己的需要进行修改。