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.

3

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);}
  • 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
0

The most common and effective methods to increase the conversion rate is using popup ads. But you should consider displaying your popups at the right time and in the proper manner in order to avoid avoidance. Free popup for Magento 2 meets all your requirements for an eye-catchy popup with proper display.

There is a universal extension to create popups with any HTML content, image or form when pages are a load to grab user attention. You can promote your products, news, ads events etc by collecting data from users by any kind of form

Features:

You can fully control the appearance of your popups by defining the following options: Html content with any widgets Decide whether the popup will be visible to for all pages or just the homepage Show Different popup for special customer group Window dimension You can also customize your Start and end date For Buying Extension visit: https://www.elsner.com/magento-extension/promotional-register-newsletter-popup-magento-2

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.