Magento 2 – Add Newsletter Modal Popup to CMS Home Page

javascriptmagento2

I made a popup like this 

<?php
    $newsletterHtml = $block->getChildHtml('subscribe');
?>

<div id="custom-popup-modal">
    <div class="col-sm-6">
        <div class="static_content">
            <h5 class="min-title-bold">JOIN THE PARTY</h5>
            <h2 class="min-title-large">GET 15% OFF YOUR FIRST ORDER*</h2>
            <p class="small-content">Subscribers only discounts, first look at new products, and cutting-edges tips</p>
            <?php echo $newsletterHtml; ?>
            <p class="micro-text">*Promo code will be emailed to the address you enter, New subscribers only</p>
        </div>
    </div>
    <div class="col-sm-6 img-section">
        <!-- <button id="Cross-popup"   class="" type="button" data-role="action"><span>X</span></button> -->

        <img src='<?php echo $this->getUrl('pub/media/').'cms/image-email.gif'; ?>' />
    </div>
</div>

<script type="text/javascript" xml="space">

    require(['jquery','Magento_Ui/js/modal/modal'],

        function($,modal) {

            var options = {
                type: 'popup',
                responsive: true,
            };

            var popup = modal(options, $('#custom-popup-modal'));
            $( document ).ready(function() {
                $('#custom-popup-modal').modal('openModal');
            });
        }
    );

</script>

Now I want to add this on home page. I didnt have idea how can I add it . using block ? then I dont know how to assign this code to block .

Best Answer

Try Below code. Make sure jQuery has been loading on home page. You can add any image by WYSIWYG editor.

<div id="custom-popup-modal">
    <div class="col-sm-6">
        <div class="static_content">
            <h5 class="min-title-bold">JOIN THE PARTY</h5>
            <h2 class="min-title-large">GET 15% OFF YOUR FIRST ORDER*</h2>
            <p class="small-content">Subscribers only discounts, first look at new products, and cutting-edges tips</p>
            {{block class="Magento\Newsletter\Block\Subscribe" name="static.newsletter" template="Magento_Newsletter::subscribe.phtml"}}
            <p class="micro-text">*Promo code will be emailed to the address you enter, New subscribers only</p>
        </div>
    </div>
    <div class="col-sm-6 img-section">
        <img src='' /> <!-- add image by WYSIWYG editor -->
    </div>
</div>

<script type="text/javascript" xml="space">
    require(['jquery','Magento_Ui/js/modal/modal'],
        function($,modal) {
            var options = {
                type: 'popup',
                responsive: true,
            };
            var popup = modal(options, $('#custom-popup-modal'));
            $( document ).ready(function() {
                $('#custom-popup-modal').modal('openModal');
            });
        }
    );
</script>
Related Topic