0

I have created a custom module that is simply a link that shows a modal with a picture on it. I have connected the module with an attribute and the module works for that specific product attribute. However in the rest of the products, I get an error in Google Inspector, plus the functionality breaks (i.e. Product image not loading and cart content is not visible).

Any ideas? Thank you in advance

The template code:

Vendor/Module/view/frontend/templates/catalog/product/view/addto.phtml

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

// @codingStandardsIgnoreFile

/** @var $block \Magento\Catalog\Block\Product\View*/
?>

<?php
$product = $block->getProduct();
?>

<?php if( $product->getData('size_chart') ): ?>

<?php
$sc = $product->getData('size_chart');
$sc = 'Vendor_Module::documents/' . $sc . '?iframe=true';
?>

<a id="click-me" href="#" class="action open-modal-form mailto friend feature feature-icon-hover">
<span class="icon ib ib-hover ic ic-tshirt icon-color-productview"></span>
        <span class="label"><p class="text">Size Chart</p></span></a>


<div id="popup-modal" style="display:none;">
    <img src="<?php echo $this->getViewFileUrl($sc); ?>"/>
</div>

<?php endif; ?>

<div class="product-addto-links" data-role="add-to-links">
    <?= $block->getChildHtml() ?>
</div>

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: $.mage.__('Size chart'),
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

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

            //$('#popup-modal').modal('openModal');
            $("#click-me").on('click',function(){
                $("#popup-modal").modal("openModal");
            });
        }
    );
</script>

And the error that I inspect in Google:

jquery.js:3762 Uncaught TypeError: Cannot read property 'nodeName' of undefined
    at acceptData (jquery.js:3762)
    at internalData (jquery.js:3830)
    at Function.data (jquery.js:4031)
    at $.(anonymous function).(anonymous function)._createWidget (https://leptokaropoulos.gr/pub/static/version1529493861/frontend/Infortis/lepto/el_GR/jquery/jquery-ui.js:545:6)
    at new $.(anonymous function).(anonymous function) (https://leptokaropoulos.gr/pub/static/version1529493861/frontend/Infortis/lepto/el_GR/jquery/jquery-ui.js:363:9)
    at $.(anonymous function).(anonymous function) (https://leptokaropoulos.gr/pub/static/version1529493861/frontend/Infortis/lepto/el_GR/jquery/jquery-ui.js:357:11)
    at joust-duffle-bag:1516
    at Object.execCb (require.js:1650)
    at Module.check (require.js:866)
    at Module.<anonymous> (require.js:1113)
0

I simply put the js script inside the if clause.

0

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.