diff --git a/src/Magento_Catalog/web/js/swatches-validation-ext.js b/src/Magento_Catalog/web/js/swatches-validation-ext.js
index 5a169fadd..9febf00bc 100644
--- a/src/Magento_Catalog/web/js/swatches-validation-ext.js
+++ b/src/Magento_Catalog/web/js/swatches-validation-ext.js
@@ -18,84 +18,86 @@ define([
var $form = $(this);
- if (
- !$('#missing-swatches-modal').length &&
- $form.is('#product_addtocart_form')
- ) {
- $('body').prepend(
- ''
- );
-
- var slideModal = modal(
- {
- type: 'slide',
- responsive: true,
- clickableOverlay: false,
- title: $.mage.__('Please select missing options'),
- modalClass: 'missing-swatches-modal',
- autoOpen: true,
- focus: 'none',
- actions: {
- cancel: function() {
- $form.appendTo(
- '.cs-buybox__section--product-form'
- );
- },
+ if (!$form.is('#product_addtocart_form')) {
+ return;
+ }
+
+ if ($('#missing-swatches-modal').length) {
+ return;
+ }
+
+ $('body').prepend('');
+
+ var $modal = $('#missing-swatches-modal');
+
+ var slideModal = modal(
+ {
+ type: 'slide',
+ responsive: true,
+ clickableOverlay: true,
+ title: $.mage.__('Please select missing options'),
+ modalClass: 'missing-swatches-modal',
+ autoOpen: true,
+ focus: 'none',
+ actions: {
+ cancel: function() {
+ $form.appendTo(
+ '.cs-buybox__section--product-form'
+ );
},
- buttons: [],
},
- $('#missing-swatches-modal')
- );
-
- var $formParent = $('.cs-buybox__section--product-form');
- var $clonedForm = $form.clone();
- $formParent.css('height', $formParent.innerHeight());
-
- $('#missing-swatches-modal').on('modalclosed', function() {
- $clonedForm.remove();
- $formParent.prepend($form);
- $form.find('.product-options-bottom').show();
- $form.find('input, select').off('change.addToCart');
- });
-
- $('#missing-swatches-modal').on('modalopened', function() {
- $form.find('.product-options-bottom').hide();
- $form.appendTo(
- '.missing-swatches-modal .modal-content'
- );
- $formParent.prepend($clonedForm);
-
- $form
- .find('input, select')
- .on('change.addToCart', function() {
- if ($form.validation('isValid')) {
- $form.trigger('processStart');
-
- setTimeout(function() {
- $clonedForm.remove();
- $formParent.prepend($form);
- $form
- .find('.product-options-bottom')
- .show();
- $formParent.css('height', '');
-
- slideModal.closeModal();
-
- $form.trigger('processStop');
-
- var jqForm = $form.catalogAddToCart({
- bindSubmit: false,
- });
-
- jqForm.catalogAddToCart(
- 'submitForm',
- jqForm
- );
- }, 500);
- }
- });
- });
- }
+ buttons: [],
+ },
+ $modal
+ );
+
+ var $formParent = $('.cs-buybox__section--product-form');
+ var $clonedForm = $form.clone();
+ $formParent.css('height', $formParent.innerHeight());
+
+ $modal.on('modalclosed', function() {
+ $clonedForm.remove();
+ $formParent.prepend($form);
+ $form.find('.product-options-bottom').show();
+ $form.find('input, select').off('change.addToCart');
+ $modal.remove();
+ });
+
+ $modal.on('modalopened', function() {
+ $form.find('.product-options-bottom').hide();
+ $form.appendTo('.missing-swatches-modal .modal-content');
+ $formParent.prepend($clonedForm);
+
+ $form
+ .find('input, select')
+ .on('change.addToCart', function() {
+ if ($form.validation('isValid')) {
+ $form.trigger('processStart');
+
+ setTimeout(function() {
+ $clonedForm.remove();
+ $formParent.prepend($form);
+ $form
+ .find('.product-options-bottom')
+ .show();
+ $formParent.css('height', '');
+
+ slideModal.closeModal();
+
+ $form.trigger('processStop');
+
+ var jqForm = $form.catalogAddToCart({
+ bindSubmit: false,
+ });
+
+ jqForm.catalogAddToCart(
+ 'submitForm',
+ jqForm
+ );
+ }, 500);
+ }
+ });
+ });
},
});
diff --git a/src/Magento_Swatches/web/js/swatches-validation-ext.js b/src/Magento_Swatches/web/js/swatches-validation-ext.js
deleted file mode 100644
index f89b28e00..000000000
--- a/src/Magento_Swatches/web/js/swatches-validation-ext.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/* tslint:disable one-variable-per-declaration */
-
-/**
- * Add offcanvas with missing swatches when user forgot to choose options
- * Immediately after user checks all necessary options add product to the cart
- */
-define([
- 'jquery',
- 'underscore',
- 'Magento_Ui/js/modal/modal',
- 'mage/validation/validation',
- 'jquery-ui-modules/widget',
-], function($, _, modal) {
- 'use strict';
-
- return function(swatchRenderer) {
- $.widget('mage.validation', $.mage.validation, {
- /**
- * Handle form with swatches validation. Focus on first invalid swatch block.
- *
- * @param {jQuery.Event} event
- * @param {Object} validation
- */
- listenFormValidateHandler: function(event, validation) {
- this._super(event, validation);
-
- var $form = $(this);
-
- if (!$('#missing-swatches-modal').length) {
- $('body').prepend(
- ''
- );
-
- var slideModal = modal(
- {
- type: 'slide',
- responsive: true,
- clickableOverlay: false,
- title: $.mage.__('Please select missing options'),
- modalClass: 'missing-swatches-modal',
- autoOpen: true,
- focus: 'none',
- actions: {
- cancel: function() {
- $form.appendTo(
- '.cs-buybox__section--product-form'
- );
- },
- },
- buttons: [],
- },
- $('#missing-swatches-modal')
- );
-
- var $formParent = $('.cs-buybox__section--product-form');
- var $clonedForm = $form.clone();
- $formParent.css('height', $formParent.innerHeight());
-
- $('#missing-swatches-modal').on('modalclosed', function() {
- $clonedForm.remove();
- $formParent.prepend($form);
- $form.find('.product-options-bottom').show();
- $formParent.css('height', '');
- });
-
- $('#missing-swatches-modal').on('modalopened', function() {
- $form.find('.product-options-bottom').hide();
- $form.appendTo(
- '.missing-swatches-modal .modal-content'
- );
- $formParent.prepend($clonedForm);
-
- $form.find('input, select').on('change', function() {
- if ($form.validation('isValid')) {
- $form.trigger('processStart');
-
- setTimeout(function() {
- $clonedForm.remove();
- $formParent.prepend($form);
- $form
- .find('.product-options-bottom')
- .show();
- $formParent.css('height', '');
-
- slideModal.closeModal();
-
- $form.trigger('processStop');
-
- var jqForm = $form.catalogAddToCart({
- bindSubmit: false,
- });
-
- jqForm.catalogAddToCart(
- 'submitForm',
- jqForm
- );
- }, 500);
- }
- });
- });
- }
- },
- });
-
- return $.mage.SwatchRenderer;
- };
-});
diff --git a/src/components/swatches/swatches.scss b/src/components/swatches/swatches.scss
index 3436d49b9..04a1b9e44 100644
--- a/src/components/swatches/swatches.scss
+++ b/src/components/swatches/swatches.scss
@@ -135,25 +135,13 @@ $swatches_tooltip-thumbnail-height: #{map-get(
.swatch-opt {
font-size: $swatches--pdp_font-size;
- // Selector for error container when swatches are required but not selected.
+ // Errors are hidden, because they only appear
+ // after user clicks "Add to cart" when required swatch is not selected
+ // - however we show a modal then for the user to select it,
+ // so showing an error message is not needed.
.mage-error {
- font-size: 1em;
- width: 100%;
- margin-left: calc(#{$swatches_label-width} + #{$swatches_label-gutter});
-
- @if ($swatches_full-width-label == true) {
- margin-left: 0;
- }
-
- @include media('>=laptop') {
- margin-left: calc(
- #{$swatches_label-width-laptop-up} + #{$swatches_label-gutter}
- );
-
- @if ($swatches_full-width-label == true) {
- margin-left: 0;
- }
- }
+ visibility: hidden;
+ height: 0;
}
}
@@ -451,7 +439,7 @@ $swatches_tooltip-thumbnail-height: #{map-get(
.missing-swatches-modal {
max-width: 40rem;
margin-left: auto;
-
+
.mage-error {
padding-top: 0.8rem;
}
@@ -459,4 +447,4 @@ $swatches_tooltip-thumbnail-height: #{map-get(
.swatch-attribute + .swatch-attribute {
margin-top: 2rem;
}
-}
\ No newline at end of file
+}