2020年7月30日
浏览量 22
3 min read
在本文中，我将向您展示如何围绕此创建最基本的功能。
很多时候，我们需要在用户访问网站时显示一些模态叠加信息。
我们可以用它来做很多事情，比如时事通讯订阅表格，优惠券代码或者其他
一般信息。
挑战
当客户访问我们的网站时，我们希望
在模式覆盖中显示特定于负载的静态块内容，并仅向每个客户显示一次。
解决方案：
我们应该从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;
}
});
});
结论
剩下的就是创建一个静态块并激活模块。
这将为您提供一个基本模块，您可以根据自己的需要进行修改。
