Required field alert in product detail page in mobile devices

In mobile devices with small screen, you may not see the required message when click on the Add To Cart button. Your customers may thing your website is stuck, but it's not. We will solve the problem!

Edit file assets/js/theme/common/product-details.js

Add the below Javascript to the end of constructor function (before the return line)

        $scope.on('click', '#form-action-addToCart', (event, reAlert) => {
            const $target = $(event.currentTarget);
            let invalid = false;
            $('[data-cart-item-add] input[required]').each((idx, elm) => {
                const $elm = $(elm);
                const name = $elm.attr('name');
                const type = $elm.attr('type');
                if (type === 'radio' || type == 'checkbox') {
                    const $inputChecked = $(`[name="${name}"]:checked`, $scope);
                    if (!$inputChecked.length || !$inputChecked.val()) {
                        invalid = name;
                        return false;
                    }
                } else {
                    if (!$(`[name="${name}"]`, $scope).val()) {
                        invalid = name;
                        return false;
                    }
                } 
            });

            if (invalid) {
                $('html, body').animate({
                    scrollTop: ($(`[name="${invalid}"]`, $scope).eq(0).offset().top - ($(window).height() / 2)),
                }, 300);

                if (!reAlert) {
                    setTimeout(() => {
                        $target.trigger('click', true);
                    }, 400);
                }
            }
        });