3

I am using a modal pop up. I want to embed a youtube video and a field to enter the code in the pop up. I ahve already dispalyed some content in the pop up.

This is my phtml file

<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile
?>
<?php if ($block->isPossibleOnepageCheckout()):?>
    <button type="button"
            data-role="proceed-to-checkout"
            id="checkout-button"
            title="<?php /* @escapeNotVerified */ echo __('Proceed to Checkout') ?>"
            class="action primary checkout<?php echo($block->isDisabled()) ? ' disabled' : ''; ?>"
            <?php if ($block->isDisabled()):?>disabled="disabled"<?php endif; ?>>
        <span><?php /* @escapeNotVerified */ echo __('Proceed to Checkout') ?></span>
    </button>
<?php endif?>

<div id="custom_popup" style="display:none;">
    <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('terms-conditions')->toHtml();?>
    <fieldset class="fieldset">
        <div class="field">
            <label for="terms" class="label"><span><?php echo $this->escapeHtml(__('I have read the terms and conditions')); ?></span></label>
            <div class="control">
                <input type="checkbox" name="checkbox" id="checkbox" class="checkbox" title="<?php echo $this->escapeHtml(__('Terms')); ?>">
            </div>
        </div>
    </fieldset>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Terms and Conditions',
                buttons: [{
                    text: $.mage.__('OK'),
                    class: '',
                    click: function () {
                        if($("#checkbox" ).is(':checked')){
                          window.location='<?php echo $block->getCheckoutUrl();?>';
                        } else{
                            alert("Please agree to the terms and conditions");

                        }
                    }
                }]
            };

            var popup = modal(options, $('#custom_popup'));
            $("#checkout-button").on('click',function(){ 
                $("#custom_popup").modal("openModal");
            });

        }
    );
</script>

How is it possible to do the above mentioned. Please help.

Thanks in advance.

3

You simple add your embedded code in custom_popup div.

<div id="custom_popup" style="display:none;">
    <div class="youtube-video">
        <iframe width="854" height="480" src="https://www.youtube.com/embed/UKlkIzD-Yj8" frameborder="0" allowfullscreen></iframe>
    </div>
    <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('terms-conditions')->toHtml();?>
    <fieldset class="fieldset">
        <div class="field">
            <label for="terms" class="label"><span><?php echo $this->escapeHtml(__('I have read the terms and conditions')); ?></span></label>
            <div class="control">
                <input type="checkbox" name="checkbox" id="checkbox" class="checkbox" title="<?php echo $this->escapeHtml(__('Terms')); ?>">
            </div>
        </div>
    </fieldset>
</div>
  • Thank you. It worked. Can you please help me to add a field to enter the code (just like captcha) – Vindhuja May 9 '17 at 7:28
  • @V.P If you get your answer. Accept this answer for help other developers. and please add new question for "add filed to enter code". – Prince Patel May 9 '17 at 7:34
  • How is it possible to identify the end of the video.ie, I want to show a field after the user has viewed the whole video. Please help. – Vindhuja May 11 '17 at 5:26
  • Refer This Link: stackoverflow.com/questions/7853904/… – Prince Patel May 11 '17 at 5:40

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.