2

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?

  • Is there any console error? – pontikos Nov 2 '19 at 12:22
  • you should see a "This is a required field." message. Check your browser console for error messages. – paj Nov 2 '19 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. – Kamlesh Yaduwanshi Nov 4 '19 at 10:16
  • This issue is fixed in Magento upgraded version 2.3.3 – Kamlesh Yaduwanshi Dec 3 '19 at 10:15
0

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;
    }
});
| improve this answer | |

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.