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.

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.