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.
asked Apr 13, 2018 at 7:03
-
Why author of accepted answer didn't mention that solution is taken from here: inchoo.net/magento-2/… ?– Tomas NovoselićCommented Oct 26, 2018 at 15:39
-
Stolen is a big word :P But agree, he could put credit to the author.– GregCommented Oct 26, 2018 at 15:46
-
I agree, it is corrected.– Tomas NovoselićCommented 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– Teja Bhagavan KolleparaCommented 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.– Kalpit ShahCommented Feb 26, 2020 at 9:34
Add a comment
|
1 Answer
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.
- app/code/Example/ModalOverlay/registration.php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Example_ModalOverlay',
__DIR__
);
- 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>
- 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;
}
}
- 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 } ?>
- 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>
- 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.
answered Apr 13, 2018 at 7:03
-
1
-
Can u please tell me what is use of
storage.keyat this pop?– Amit Bera ♦Commented Apr 13, 2018 at 7:16 -
I tried The above Process But i haven't got anything.Like pop @Kazim Noorani Commented Apr 13, 2018 at 9:58
-
-