3

In the Magento 2.3.1 on the configurable product detail page.

If size/color is not selected and clicking on add to cart the page is scrolling down.

is this a good behavior?

How can we stop scrolling in this case?

4
  • Is there any console error?
    – pontikos
    Nov 2, 2019 at 12:22
  • you should see a "This is a required field." message. Check your browser console for error messages.
    – paj
    Nov 2, 2019 at 12:30
  • there is no error in the browser console. the message 'This is a required field.' is displaying below the size thumbnails on the product detail page. the message is okay if we not select the size, but the page should not scroll down to the description tab when clicked on the add to cart button. please help on this. Nov 4, 2019 at 10:16
  • This issue is fixed in Magento upgraded version 2.3.3 Dec 3, 2019 at 10:15

1 Answer 1

2

There are 2 Methods of doing this.

First Method:-

You need to Override this file into your custom Theme.

Core File :-

/vendor/magento/magento2-base/lib/web/mage/validation.js

Overrided File :-

/app/design/frontend/[theme_vendor]/[theme]/web/mage/

then Delete/Comment the code on line 1961 in Magento 2.3.2

From

if (firstActive.length) {
     $('html, body').animate({
         scrollTop: firstActive.offset().top
     });
     firstActive.focus();
}

To

if (firstActive.length) {                   
    firstActive.focus();
}

Second Method:-

Here is a solution with a mixin to avoid overwriting the whole file:

1) app/design/frontend/[theme_vendor]/[theme]/Magento_Theme/requirejs-config.js

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Magento_Theme/js/lib/mage/validation-mixin': true
            }
        }
    }
};

2)app/design/frontend/[theme_vendor]/[theme]/Magento_Theme/web/js/lib/mage/validation-mixin.js

define([
    'jquery'
], function ($) {
    'use strict';

    return function (widget) {

        $.widget('mage.validation', widget, {
            /**
             * Handle form validation. Focus on first invalid form field.
             *
             * @param {jQuery.Event} event
             * @param {Object} validation
             */
            listenFormValidateHandler: function (event, validation) {
                let firstActive = $(validation.errorList[0].element || []),
                    lastActive = $(validation.findLastActive() ||
                        validation.errorList.length && validation.errorList[0].element || []),
                    parent, windowHeight, successList;

                if (lastActive.is(':hidden')) {
                    parent = lastActive.parent();
                    windowHeight = $(window).height();
                    $('html, body').animate({
                        scrollTop: parent.offset().top - windowHeight / 2
                    });
                }

                // ARIA (removing aria attributes if success)
                successList = validation.successList;

                if (successList.length) {
                    $.each(successList, function () {
                        $(this)
                            .removeAttr('aria-describedby')
                            .removeAttr('aria-invalid');
                    });
                }

                if (firstActive.length) {
                    /* vertically center the first field on the screen. This is best for UX but if you prefer to avoid the scrolling completelly, just remove the next line and the function "scrollToCenterFormFieldOnError" below. */
                    scrollToCenterFormFieldOnError(firstActive);
                    firstActive.focus();
                }
            }
        });

        function scrollToCenterFormFieldOnError(firstActive) {
            let fieldTop = firstActive.offset().top,
                fieldHeight = firstActive.height(),
                windowHeight = $(window).height(),
                offset;

            offset = fieldTop - ((windowHeight / 2) - (fieldHeight / 2));

            $('html, body').stop().animate({
                scrollTop: offset
            });
        }

        return $.mage.validation;
    }
});

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.