0

I want to show a message as a pop up on my homepage load with just a message, no email subscription, nothing. I just want to display a message. How can i do that?

1

Please try this code in homepage

<div class="callfor-popup">
   <h2>Simple Modal</h2>
</div>
<script>
   require(
       [
           'jquery',
           'Magento_Ui/js/modal/modal'
       ],
       function (
           $,
           modal
       ) {
           var modaloption = {
               type: 'popup',
               modalClass: 'modal-popup',
               responsive: true,
               innerScroll: true,
               clickableOverlay: true,
               title: 'Simple Modal'
           };
           var callforoption = modal(modaloption, $('.callfor-popup'));
           $('.callfor-popup').modal('openModal');
       }
   );
</script>
4
  • where to add a message? and where to add this code? in which file?
    – Nafsss
    Mar 16 '20 at 8:43
  • 1
    You want to add in cmspage, phtml file. "Simple Modal" is your content Mar 16 '20 at 8:44
  • which cms page?
    – Nafsss
    Mar 16 '20 at 8:46
  • content > pages > select your "Home Page" and add this code. Mar 16 '20 at 8:47
1

create module and add 2 file from your side

1. app/code/Vendor/Module/etc/module.xml

2. app/code/Vendor/Module/registration.php

3. app/code/Vendor/Module/Block/ModalOverlay.php

    namespace Vendor\Module\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;
    }
}

4. app/code/Vendor/Module/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": "Vendor_Module/js/modal_overlay"
                        }
                     }
                }
            }
        }
    </script><?php } ?>

5. app/code/Vendor/Module/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="Vendor\Module\Block\ModalOverlay"
                   template="Vendor_Module::modal_overlay.phtml"
                   name="modalOverlay"
                   as="modalOverlay"/>
        </referenceContainer>
    </body>
</page>

6. app/code/Vendor/Module/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;
        }

    });
});

Hopefully, it will work for you.

0

create popup.phtml

<div id="promotional-popup" class="white-popup-block mfp-hide">
        <div class="popup-wrap">
            <?php if($popupData->getBanner()) { ?>
            <a href="<?= $popupData->getUrl() ? $popupData->getUrl() : '#' ?> ">
                <div class="popup-img">
                    <img src="<?php /* @escapeNotVerified */ echo $this->getBaseMediaUrl() . $popupData->getBanner(); ?>" />
                </div>
            </a>
            <?php } ?>
            <div class="popup-content"><?php /* @escapeNotVerified */ echo $popupData->getContent(); ?></div>

        </div>
    </div>

    <script type="text/x-magento-init">
        {
            "*": {
                "Namespace_Popup/js/promotional" : {}
            }
        }
    </script>

create promotional.js

define([
    'jquery',
    'MagnificPopup',
    'mage/mage'
], function ($) {
    return function (config) {
        $('#newsletter-popup-form').mage('validation', {});
        $.magnificPopup.open({
            items: {
                src: '#promotional-popup',
            },
            closeOnContentClick: false,
            closeOnBgClick: true,
            enableEscapeKey: false,
            type: 'inline',
            closeBtnInside: true,
        }, 0);
    }
})
0

Magento have alert widget to show messages as alert. please check https://devdocs.magento.com/guides/v2.3/javascript-dev-guide/widgets/widget_alert.html

require([
    'Magento_Ui/js/modal/alert',
    'jquery'
], function(alert, $) { // Variable that represents the `alert` function

    alert({
        title: $.mage.__('Some title'),
        content: $.mage.__('Some content'),
        actions: {
            always: function(){}
        }
    });

});

To add this into your home page, you have many option

Option 1

Edit Home Page Content from Content > Elements > Pages select your home page and edit then add it between <script type="text/javascript"></script> block inside the page content enter image description here

Option 2 add static block with the above code from Content > Elements > Blocks then add it to the home page via a widget from Content > Widgets and add new widget then select your theme and static block type enter image description here

Then apply these configuration to add it to your homepage and use widget options to select the static block you created

enter image description here

Option 3

From Content > Design > Configuration Edit the store view configuration you want and add this content in the Footer section in Miscellaneous HTML and hit save. clean your cache and it will appear

2
  • what do i need to do to show it on homepage load
    – Nafsss
    Mar 16 '20 at 8:42
  • Please check the updated answer
    – Ahmed Atef
    Mar 16 '20 at 9:05
0

app/code/VendoreName/ModuleName/view/frontend/layout

cms_index_index.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="Magento\Framework\View\Element\Template" name="test" template="VendoreName_ModuleName::popup.phtml"></block>
        </referenceContainer>
    </body>
</page>

app/code/VendoreName/ModuleName/view/frontend/templates

popup.phtml

<div id="popup" style="display: none;">
   <h2>Your massage</h2>
</div>
<script>
   require(
       [
           'jquery',
           'Magento_Ui/js/modal/modal'
       ],
       function (
           $,
           modal
       ) {
           var modaloption = {
               type: 'popup',
               modalClass: 'my-popup',
               responsive: true,
               innerScroll: true,
               title: 'My Modal',
               buttons: []
           };
           var callforoption = modal(modaloption, $('#popup'));
           $('#popup').modal('openModal');
       }
   );
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.