Magento2 : Pop up on page load in magento home page

Question

I thought there would be some support for the pop up in the Magento but did not succeed. I want to show the Email subscription popup on the page load on the home page.

The second thing is I am not using bootstrap so that .modal could not work in this case. Any suggestions on how can I achieve this?

Also, I want the default newsletter functionality in that popup. I tried to search the newsletter fields in the code but not succeeded. Any kind of help would be much appreciated.

Answer 1

There is support for pop ups / modals in magento 2 without the need for bootstrap. See information from dev docs below:

http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/widgets/widget_modal.html

1. Magento 2 Pop Up

Basically adding below code to your html and popup should show on page load:

<div id="custom-popup-modal">
  <p>Content Here...</p>
</div>

<script>
require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: true,
            innerScroll: true,
            modalClass: 'custom-popup-modal',
            buttons: [{
                text: $.mage.__('Close'),
                class: '',
                click: function () {
                    this.closeModal();
                }
            }]
        };

        var popup = modal(options, $('#custom-popup-modal'));

        $( document ).ready(function() {
            $('#custom-popup-modal').modal('openModal');
        });     
    }
);
</script>

I like to have a timeout on these often so that it shows after a few seconds:

setTimeout(function(){ $('#custom-popup-modal').modal('openModal'); }, 3000);

2. Adding Newsletter

Add below code to load magento newletter block within this modal:

<?php echo $this->getLayout()->createBlock('Magento\Newsletter\Block\Subscribe')->setTemplate('subscribe.phtml')->toHtml(); ?>

So your modal should now look like below:

<div id="custom-popup-modal">
<?php echo $this->getLayout()->createBlock('Magento\Newsletter\Block\Subscribe')->setTemplate('subscribe.phtml')->toHtml(); ?>
</div>

You will also need to update title in js and add additional content and some styling and this should be what you are after.

If you want to add to cms page from admin you will not be able to use the newsltter php so replace the modal content with something like below:

<form class="form subscribe" novalidate="novalidate" action="/newsletter/subscriber/new/" method="post" id="newsletter-validate-detail">
        <div class="field newsletter">
            <label class="label" for="newsletter"><span>Sign Up for Our Newsletter:</span></label>
            <div class="control">
                <input name="email" type="email" id="newsletter" placeholder="Enter your email address" data-validate="{required:true, 'validate-email':true}">
            </div>
        </div>
        <div class="actions">
            <button class="action subscribe primary" title="Subscribe" type="submit">
                <span>Subscribe</span>
            </button>
        </div>
    </form>

3. Styling Your New Popup

I have added a new class to the popup modal so you can assign styles to just this modal. As you didn't want a title i have removed title from the JS which removes the heading and includes just the close button.

Within CSS add below to remove footer:

.custom-popup-modal .modal-footer {display:none;}

You can colour it and do whatever you with this using CSS:

.custom-popup-modal .modal-inner-wrap { background: #000; }

Another nice little trick is greying out the rest of the page when modal open:

.custom-popup-modal {background-color: rgba(0,0,0,0.6);}