Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make missing swatches modal reappear #49

Open
wants to merge 4 commits into
base: next
Choose a base branch
from
+86 −203
Open

Make missing swatches modal reappear #49

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6647db5
Remove unused `swatches-validation-ext` file from Magento_Swatches dir
jtomaszewski Dec 31, 2020
86feffd
fix(swatches-validation-ext): Make the modal reappear after it is clo…
jtomaszewski Dec 31, 2020
02d6e1b
fix(swatches-validation-ext): Make the overlay clickable
jtomaszewski Dec 31, 2020
f71a988
fix(swatches): Hide error messages about missing swatch selection
jtomaszewski Dec 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 78 additions & 76 deletions src/Magento_Catalog/web/js/swatches-validation-ext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,84 +18,86 @@ define([

var $form = $(this);

if (
!$('#missing-swatches-modal').length &&
$form.is('#product_addtocart_form')
) {
$('body').prepend(
'<div id="missing-swatches-modal"></div>'
);

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('<div id="missing-swatches-modal"></div>');

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);
}
});
});
},
});

Expand Down
107 changes: 0 additions & 107 deletions src/Magento_Swatches/web/js/swatches-validation-ext.js
View file
Open in desktop

This file was deleted.

28 changes: 8 additions & 20 deletions src/components/swatches/swatches.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -451,12 +439,12 @@ $swatches_tooltip-thumbnail-height: #{map-get(
.missing-swatches-modal {
max-width: 40rem;
margin-left: auto;

.mage-error {
padding-top: 0.8rem;
}

.swatch-attribute + .swatch-attribute {
margin-top: 2rem;
}
}
}