1

I got below error randomly in front-end and when all modal popup not working when below error occurs. Uncaught TypeError: Cannot read property 'version' of undefined

enter image description here

I have override admin product-gallery.js and its working fine.

requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Catalog/js/product-gallery': {
                'Hs_Mageenhancement/js/product-gallery-mixin': true
            }
        }
    }
};

Below is the code of product-gallery-mixin.js and path of js is app/code/Hs/Mageenhancement/view/adminhtml/web/js/product-gallery-mixin.js

define([
    'jquery',
    'underscore',
    'mage/template',
    'uiRegistry'    
], function($, _, mageTemplate, registry){
    'use strict';
    return function (widget) {
        $.widget('mage.productGallery', widget, {
            /**
             * Initializes dialog element.
             */
            _initDialog: function () {
                var $dialog = $(this.dialogContainerTmpl());

                $dialog.modal({
                    'type': 'slide',
                    title: $.mage.__('Image Detail'),
                    buttons: [],

                    /** @inheritdoc */
                    opened: function () {
                        $dialog.trigger('open');
                    },

                    /** @inheritdoc */
                    closed: function () {
                        $dialog.trigger('close');
                    }
                });

                $dialog.on('open', this.onDialogOpen.bind(this));
                $dialog.on('close', function () {
                    var $imageContainer = $dialog.data('imageContainer');

                    $imageContainer.removeClass('active');
                    $dialog.find('#hide-from-product-page').remove();
                });

                $dialog.on('change', '[data-role=type-selector]', function () {
                    var parent = $(this).closest('.item'),
                        selectedClass = 'selected';

                    parent.toggleClass(selectedClass, $(this).prop('checked'));
                });

                $dialog.on('change', '[data-role=type-selector]', $.proxy(this._notifyType, this));

                $dialog.on('change', '[data-role=visibility-trigger]', $.proxy(function (e) {
                    var imageData = $dialog.data('imageData');

                    this.element.trigger('updateVisibility', {
                        disabled: $(e.currentTarget).is(':checked'),
                        imageData: imageData
                    });
                }, this));

                $dialog.on('change', '[data-role="image-description"]', function (e) {
                    var target = $(e.target),
                        targetName = target.attr('name'),
                        desc = target.val(),
                        imageData = $dialog.data('imageData');

                    this.element.find('input[type="hidden"][name="' + targetName + '"]').val(desc);

                    imageData.label = desc;
                    imageData['label_default'] = desc;

                    this.element.trigger('updateImageTitle', {
                        imageData: imageData
                    });
                }.bind(this));

                $dialog.on('change', '[data-role=image-related-tire-price]', $.proxy(function (e) {
                    var target = $(e.target),
                        targetName = target.attr('name'),
                        tirePriceQty = target.val(),
                        imageData = $dialog.data('imageData');

                    this.element.find('input[type="hidden"][name="' + targetName + '"]').val(tirePriceQty);                
                }, this));

                this.$dialog = $dialog;
            }
        });
        return $.mage.productGallery;
    }
});

Also added popup code into .phtml file.

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

            var contactPopup = modal(contactOptions, $('#contact-popup-mpdal'));
            $("#ContactUsModal").on('click',function(){
                $("#contact-popup-mpdal").modal("openModal");
            });

            var pricePromiseOptions = {
                type: 'popup',
                title: $.mage.__('Price Match Promise Terms and Conditions'),
                responsive: true,
                innerScroll: false,
                buttons: [{
                    text: $.mage.__('Close'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var pricePromisePopup = modal(pricePromiseOptions, $('#price-promise-popup-mpdal'));
            $("#price_promise").on('click',function(){
                $("#price-promise-popup-mpdal").modal("openModal");
            });

            var privacyPolicyOptions = {
                type: 'popup',
                title: $.mage.__('Privacy Policy'),
                responsive: true,
                innerScroll: false,
                buttons: [{
                    text: $.mage.__('Close'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var privacyPolicyPopup = modal(privacyPolicyOptions, $('#privacy-policy-popup-mpdal'));
            $("#privacy_policy").on('click',function(){
                $("#privacy-policy-popup-mpdal").modal("openModal");
            });

            var cookiesPolicyOptions = {
                type: 'popup',
                title: $.mage.__('Cookie Policy'),
                responsive: true,
                innerScroll: false,
                buttons: [{
                    text: $.mage.__('Close'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var cookiesPolicyPopup = modal(cookiesPolicyOptions, $('#cookie-policy-popup-mpdal'));
            $("#cookies_policy").on('click',function(){
                $("#cookie-policy-popup-mpdal").modal("openModal");
            });

            var termsConditionOptions = {
                type: 'popup',
                title: $.mage.__('Terms and Conditions'),
                responsive: true,
                innerScroll: false,
                buttons: [{
                    text: $.mage.__('Close'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var termsConditionPopup = modal(termsConditionOptions, $('#terms-condition-popup-mpdal'));
            $("#TermsCondiModal").on('click',function(){
                $("#terms-condition-popup-mpdal").modal("openModal");
            });

        }
    );
</script>

Another popup code as below.

<script>
        require(
            [
                'jquery',
                'Magento_Ui/js/modal/modal',
                'mage/validation'
            ],
            function(
                $,
                modal
            ) {
                jQuery(document).ready(function(){
                    var options = {
                        type: 'popup',
                        title: $.mage.__('All Reviews'),
                        responsive: true,
                        innerScroll: false,
                        buttons: [{
                            text: $.mage.__('Close'),
                            class: '',
                            click: function () {
                                this.closeModal();
                            }
                        }]
                    };

                    var popup = modal(options, $('#list-review-popup-mpdal'));
                    jQuery("#ListReview").on('click',function(){
                        jQuery("#list-review-popup-mpdal").modal("openModal");
                    });

                    var reviewFormOptions = {
                        type: 'popup',
                        title: $.mage.__('Write a Review'),
                        responsive: true,
                        innerScroll: true,
                        buttons: [{
                            text: $.mage.__('Close'),
                            class: '',
                            click: function () {
                                this.closeModal();
                            }
                        }]
                    };

                    var reviewFormPopup = modal(reviewFormOptions, $('#submit-review-popup-mpdal'));
                    jQuery("#SubmitReview").on('click',function(){
                        jQuery("#submit-review-popup-mpdal").modal("openModal");
                    });

                    var dataForm = $('#review-form');
                    dataForm.mage('validation', {});
                    jQuery('body').on('click', '#review-form .action.submit', function(e){
                        e.preventDefault();
                        e.stopImmediatePropagation();
                        if(dataForm.validation('isValid')) {
                            jQuery.ajax({
                                type: 'post',
                                url: jQuery('#review-form').attr('action'),
                                data: jQuery('#review-form').serialize(),
                                cache: false,
                                showLoader: 'true',
                                success: function(response) {
                                    var message = response.message;
                                    if(response.success) {
                                        jQuery('#feedback_review').removeClass('error-msg');
                                        jQuery('#feedback_review').addClass('Succ-msg');
                                    } else {
                                        jQuery('#feedback_review').removeClass('Succ-msg');
                                        jQuery('#feedback_review').addClass('error-msg');
                                    }
                                    jQuery('#feedback_review').html(message).show();
                                }
                            });
                        }
                        return false;
                    });

                });
            }
        );
    </script>

Is there any issue related to popups?

Please help to resolve issue.

  • Upgrade jquery-ui from 1.10 to 1.12. – Bhushan Aug 28 at 6:54

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.