1

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.

Second thing is i am not using bootstrap so that .modal could not worked in this case. Any suggestion how can i achieve this ?

Also i want the default news letter functionality in that pop up. I tried to search the news letter fields in the code but not succeeded. Any kind of help would be much appreciated.

6

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);}
| improve this answer | |
  • hi ! if i want to add this on home where should i include it in the code files or from the admin side? – tech_geek Sep 25 '17 at 18:32
  • I would create a new template file and then add this to your cms_index_index.xml so that its added to homepage. – harri Sep 25 '17 at 18:56
  • is it possible to add this from the admin side?? like content>pages>home page ?? actually i am quite new to magento and did not know how to add the template files – tech_geek Sep 25 '17 at 18:58
  • is it possible to add this from the admin side?? like content>pages>home page ?? actually i am quite new to magento and did not know how to add the template files – tech_geek Sep 25 '17 at 18:58
  • Most of it should be if you add to cms. Just not that php code form the newsletter. You could just get the hgtml markup for this tho. – harri Sep 25 '17 at 19:02

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.