Magento ๐Ÿฎ

Magento2 | PWA | GraphQL

ยป ยป ยป Add Notification Popup Based on start date and end date In Magento2

Add Notification Popup Based on start date and end date In Magento2

By

In this post i will show you how to open a popup with the magento's powerful ui component with once per session in the frontend. A cookie is set with mage/cookies to prevent the notification popup from showing again.

You can find complete module on git hub at Vmr_NotificationPopup



This simple module provides an own configuration tab in the backend. It's disabled by default, content for headline and text as well as start date and end date can be set in the backend.

Create folder in app/code/Vmr/NotificationPopup

Add registration.php file in it:
?
1
2
3
4
5
6
7
8
<?php
use Magento\Framework\Component\ComponentRegistrar;
 
ComponentRegistrar::register(
    ComponentRegistrar::MODULE,
    'Vmr_NotificationPopup',
    __DIR__
);
Add composer.json file in it:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
     
{
    "name": "vmr/module-notificationpopup",
    "description": "Simple Module to Enable popup in Magento2",
    "type": "magento2-module",
    "license": "MIT",
    "authors": [
        {
            "email": "info@mage2gen.com",
            "name": "Mage2Gen"
        },
        {
            "email": "vijaymrami@gmail.com",
            "name": "vijay rami"
        }
    ],
    "minimum-stability": "dev",
    "require": {},
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "Vmr\\NotificationPopup\\": ""
        }
    }
}
Add etc/module.xml file:
?
1
2
3
4
<?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="Vmr_NotificationPopup" setup_version="1.0.0"/>
</config>
Give System configuration at admin by creating file at etc/adminhtml/system.xml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="vmr" translate="label" sortOrder="0">
            <label>VMR</label>
        </tab>
        <section id="notification_popup" translate="label" type="text" sortOrder="100" showInDefault="1"
                 showInWebsite="1"
                 showInStore="1">
            <label>Notification Popup</label>
            <tab>vmr</tab>
            <resource>Vmr_NotificationPopup::config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1"
                   showInStore="1">
                <label>General Configuration</label>
                <field id="enable" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="0"
                       showInStore="0">
                    <label>Module Enable</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="display_heading" translate="label" type="text" sortOrder="20" showInDefault="1"
                       showInWebsite="1" showInStore="1">
                    <label>Heading</label>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
                <field id="display_text" translate="label" type="textarea" sortOrder="30" showInDefault="1"
                       showInWebsite="1" showInStore="1">
                    <label>Text</label>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
                <field id="start_date" translate="label" type="date" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="40">
                    <label>Start Date</label>
                    <frontend_model>Vmr\NotificationPopup\Block\Adminhtml\System\Config\Date</frontend_model>
                    <validate>required-entry</validate>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
                <field id="end_date" translate="label" type="date" showInDefault="1" showInWebsite="1" showInStore="1" sortOrder="50">
                    <label>End Date</label>
                    <frontend_model>Vmr\NotificationPopup\Block\Adminhtml\System\Config\Date</frontend_model>
                    <validate>required-entry</validate>
                    <depends>
                        <field id="enable">1</field>
                    </depends>
                </field>
            </group>
        </section>
    </system>
</config>
Provide default configuration in etc/config.xml file.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
    <default>
        <notification_popup>
            <general>
                <enable>0</enable>
                <display_heading>Default Heading</display_heading>
                <display_text>Hello World</display_text>
            </general>
        </notification_popup>
    </default>
</config>
We will also provide acl configuration by creating file at etc/acl.xml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
    <acl>
        <resources>
            <resource id="Magento_Backend::admin">
                <resource id="Magento_Backend::stores">
                    <resource id="Magento_Backend::stores_settings">
                        <resource id="Magento_Config::config">
                            <resource id="Vmr_NotificationPopup::config"
                                      title="Config Section for Notification Popup" sortOrder="50"/>
                        </resource>
                    </resource>
                </resource>
            </resource>
        </resources>
    </acl>
</config>
Now as per highlighted code in etc/adminhtml/system.xml file, we will add Datepicker configuration file.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
  
namespace Vmr\NotificationPopup\Block\Adminhtml\System\Config;
  
use Magento\Config\Block\System\Config\Form\Field;
use Magento\Framework\Data\Form\Element\AbstractElement;
use Magento\Framework\Stdlib\DateTime;
  
class Date extends Field
{
    /**
     * @param \Magento\Framework\Data\Form\Element\AbstractElement $element
     * @return void
     */
    public function render(AbstractElement $element)
    {
        $element->setDateFormat(DateTime::DATE_INTERNAL_FORMAT);
        $element->setTimeFormat('HH:mm:ss');
        $element->setShowsTime(true);
        //$element->setMinDate(0);
        return parent::render($element);
    }
}
After that create default.xml layout file at view/frontend/layout/default.xml
?
1
2
3
4
5
6
7
8
9
10
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"
      layout="1column">
    <body>
        <referenceContainer name="before.body.end">
            <block class="Vmr\NotificationPopup\Block\NotificationPopup" name="notification_popup"
                   template="notification_popup.phtml"/>
        </referenceContainer>
    </body>
</page>
Now you have to create a block and template file. First create a block file at Block/NotificationPopup.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<?php
namespace Vmr\NotificationPopup\Block;
 
use Magento\Framework\Stdlib\DateTime\DateTime;
use Magento\Framework\View\Element\Template\Context;
 
class NotificationPopup extends \Magento\Framework\View\Element\Template
{
    /**
     * @var DateTime
     */
    private $dateTime;
     
    /**
     * Validator constructor.
     *
     * @param DateTime $dateTime
     */
    public function __construct(
        DateTime $dateTime,
        Context $context,
        array $data = []
        ) {
            $this->dateTime = $dateTime;
            parent::__construct($context, $data);
    }
    /**
     * Enable or disable the notification popup
     *
     * @return mixed
     */
    public function getNotificationPopupEnable()
    {
        return $this->_scopeConfig->getValue('notification_popup/general/enable');
    }
 
    /**
     * Show the heading of the notification popup
     *
     * @return string
     */
    public function getNotificationPopupDisplayHeading()
    {
        return $this->_scopeConfig->getValue('notification_popup/general/display_heading');
    }
 
    /**
     * Show the text of the notification popup
     *
     * @return string
     */
    public function getNotificationPopupDisplayText()
    {
        return $this->_scopeConfig->getValue('notification_popup/general/display_text');
    }
     
    public function getNotificationStartDate()
    {
        return $this->_scopeConfig->getValue('notification_popup/general/start_date');
    }
     
    public function getNotificationEndDate()
    {
        return $this->_scopeConfig->getValue('notification_popup/general/end_date');
    }
     
    public function getValidateDate()
    {
        $start_date = $this->getNotificationStartDate();
        $end_date = $this->getNotificationEndDate();
         
        if ($start_date && $end_date) {
            if($start_date > $end_date){
                return false;
            }
            $now = $this->dateTime->date('Y-m-d H:i:s');
            if ($now < $start_date || $now > $end_date) {
                return false;
            }
        }
         
        return true;
    }
}
Create a template file at view/frontend/templates/notification_popup.phtml
?
1
2
3
4
5
6
7
8
<?php if ($this->getNotificationPopupEnable()): ?>
    <?php if($this->getValidateDate()): ?>
    <div id="vmr-notification_popup" style="display: none;"
         data-mage-init='{"Vmr_NotificationPopup/js/init": {"title": "<?php echo $this->getNotificationPopupDisplayHeading(); ?>"}}'>
        <?php echo $this->getNotificationPopupDisplayText(); ?>
    </div>
    <?php endif; ?>
<?php endif; ?>

Now as per highlighted code above, we will add our JS file at app/code/Vmr/NotificationPopup/view/frontend/web/js/init.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
define(
    [
        'jquery',
        'Magento_Ui/js/modal/modal',
        'mage/cookies'
    ],
    function ($, modal) {
        return function (config) {
            var options = {
                responsive: true,
                innerScroll: true,
                title: config.title
            };
 
            var popupmodal = "vmr-notification_popup";
            var $popupmodal = $("#" + popupmodal);
            var popup = modal(options, $popupmodal);
 
            if (!$.mage.cookies.get(popupmodal)) {
                $popupmodal.modal('openModal');
                $.mage.cookies.set(popupmodal, "shown");
            }
        };
    }
);
Now run below Magento Commands and see the effect:
?
1
2
3
4
5
php bin/magento set:upg
php bin/magento set:d:c
php bin/magento set:s:d -f
php bin/magento c:c
php bin/magento c:f






Related Post:

0 Comments On "Add Notification Popup Based on start date and end date In Magento2"

Back To Top