1

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 .

  • is your home page calling from CMS page or from PHTML file ? – Abhishek Panchal Nov 28 '17 at 14:35
  • @AbhishekPanchal I made a cms page from admin side. – ephemeral Nov 28 '17 at 14:36
3

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>
  • what is this block for ?{{block class="Magento\Newsletter\Block\Subscribe" name="static.newsletter" template="Magento_Newsletter::subscribe.phtml"}} – ephemeral Nov 28 '17 at 14:44
  • its a newsletter block which you called via PHP but that's not right. This is a proper way to insert Block inside any CMS page – Abhishek Panchal Nov 28 '17 at 14:46
  • okay okay that , text field and button ? So I dont need to add this in phtml file ? anything ? – ephemeral Nov 28 '17 at 14:46
  • Yes that Block will call Subscriber.phtml file. What ever is in that file will call under small-content <p> tag – Abhishek Panchal Nov 28 '17 at 14:48
  • okay let me try. – ephemeral Nov 28 '17 at 14:55

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.