If a customer forgets to choose the product option of the configurable product on the product listing page and click "add to cart" it is redirecting you to the product view page with the message: "You need to choose options for your item."

I just want to show this message in a popup without redirecting on the product view page.

I makes a change on list.phtml file, so if someone click add to cart its shows required field message similar in configurable product view page. I just add validate-product.js in product listing page, but its return message not a popup.

source: Add configurable products to cart display waring message instead of redirecting

Here is my code:

], function ($) {
'use strict';

$.widget('mage.productValidate', {
    options: {
        bindSubmit: false,
        radioCheckboxClosest: '.nested',
        addToCartButtonSelector: '.action.tocart'

     * Uses Magento's validation widget for the form object.
     * @private
    _create: function () {
        var bindSubmit = this.options.bindSubmit;

            radioCheckboxClosest: this.options.radioCheckboxClosest,

             * Uses catalogAddToCart widget as submit handler.
             * @param {Object} form
             * @returns {Boolean}
            submitHandler: function (form) {
                var jqForm = $(form).catalogAddToCart({
                    bindSubmit: bindSubmit

                jqForm.catalogAddToCart('submitForm', jqForm);

                return true;
        $(this.options.addToCartButtonSelector).attr('disabled', false);

        $.widget('vendor.modalForm', {
            options: {
                modalForm: '#modal-form',
                modalButton: '.tocart'
            _create: function () {
                this.options.modalOption = this._getModalOptions();
            _getModalOptions: function () {
                 * Modal options
                var options = {
                    type: 'popup',
                    responsive: true,
                    title: '',
                    innerScroll: true,
                    buttons: false

                return options;
            _bind: function () {
                var modalOption = this.options.modalOption;
                var modalForm = this.options.modalForm;

                $(document).on('click', this.options.modalButton, function () {
                    //Initialize modal
                    //open modal

        return $.vendor.modalForm;

// return $.mage.productValidate;

I also create div tag with id in list.phtml, but I think I am doing wrong, let me know if anyone have another suggestion or any advice for it.

1 Answer 1


You need to override


you can override submitForm function

submitForm: function (form) {
        var i = 0;
        form.find('input').each(function () {

For Temporary Solution I am attaching a module git link. please clone it app/code folder and register it. Folder structure should be app/code/Ktpl/ProductModal

Git Repository

  • please install module from git
    – 26vivek
    Dec 17, 2019 at 10:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.