0

I want to open a popup with an external site using iframe when a custom link is clicked in addtocart.phtml. I am facing three issues

  • 1> Iframe gets loaded as soon as external site url is dynamically updated in src after swatches are clicked. So i update data-url and when link is clicked i update src by data-url

  • 2> How to resize and make this modal draggable by customer

  • 3> I capture product id and via ajax i try to pull custom product attributes to create this custom link url it takes 1-2 seconds can it be reduce

  • 4> How to create a separate file for this js currently have stored this script within templates

JS

 require(
    [
        'jquery',
        'Magento_Ui/js/modal/modal'
    ],
    function(
        $,
        modal
    ) {
        var options = {
            type: 'popup',
            responsive: true,
            title: '',
        };

        var popup = modal(options, $('#header-mpdal'));

        $("#checkoutnext").on('click',function(){
            event.preventDefault();
            $('#header-mpdal').on('visible', function() {
                clear()
            });
            $('#customframe').attr("src", '');
            srcdata = $('#customframe').attr('data-url');
            $('#customframe').attr("src", srcdata);

            $(".videoWrapper").resizable({
                //alsoResize: ".modal-dialog",
                minHeight: 300,
                minWidth: 300
            }).draggable();
            $("#header-mpdal").modal("openModal");
        });

    }

);

Link

 <a href="#" id="checkoutnext" title="<?php /* @escapeNotVerified */ echo __($buttonTitle) ?>" class="action primary " style="<?php echo ($tpdodportal =='Modal')? '':'display:none';?>" >
            <?php /* @escapeNotVerified */ echo __($custombuttonTitle) ?>
            </a>

Modal

 <div id="header-mpdal" style="display:none;">
    <div class="videoWrapper">
        <iframe id="customframe" allow="encrypted-media" allowfullscreen="" frameborder="0" src="" data-url="<?php echo $cusdesignLink;?>" style="width:100%; height:100%;margin-botton:5px;  z-index:9999999999999">
        </iframe>
    </div>
</div>

Magento 2.1 popup modal

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.