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:
define([
'jquery',
'mage/mage',
'Magento_Catalog/product/view/validation',
'catalogAddToCart',
'Magento_Ui/js/modal/modal'
], 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;
this.element.validation({
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();
this._bind();
},
_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
$(modalForm).modal(modalOption);
//open modal
$(modalForm).trigger('openModal');
});
}
});
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.