diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e8d240b59..4129d52d7c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # Changelog ## Draft +- Fixed shift in change options popup on Cart page.[#2071](https://github.com/bigcommerce/cornerstone/pull/2071) - Translation Gap: Compare products error message. [#2061](https://github.com/bigcommerce/cornerstone/pull/2061) - Translation Gap: Gift Certificate -> Code required message. [#2064](https://github.com/bigcommerce/cornerstone/pull/2064) - Added translation for invalid quantity value error on Cart. [#2062](https://github.com/bigcommerce/cornerstone/pull/2062) diff --git a/assets/js/theme/cart.js b/assets/js/theme/cart.js index a08e11dc31..84f7d31725 100644 --- a/assets/js/theme/cart.js +++ b/assets/js/theme/cart.js @@ -4,7 +4,7 @@ import checkIsGiftCertValid from './common/gift-certificate-validator'; import { createTranslationDictionary } from './common/utils/translations-utils'; import utils from '@bigcommerce/stencil-utils'; import ShippingEstimator from './cart/shipping-estimator'; -import { defaultModal } from './global/modal'; +import { defaultModal, ModalEvents } from './global/modal'; import swal from './global/sweet-alert'; import CartItemDetails from './common/cart-item-details'; @@ -158,9 +158,20 @@ export default class Cart extends PageManager { utils.api.productAttributes.configureInCart(itemId, options, (err, response) => { modal.updateContent(response.content); - const $productOptionsContainer = $('[data-product-attributes-wrapper]', this.$modal); - const modalBodyReservedHeight = $productOptionsContainer.outerHeight(); - $productOptionsContainer.css('height', modalBodyReservedHeight); + const optionChangeHandler = () => { + const $productOptionsContainer = $('[data-product-attributes-wrapper]', this.$modal); + const modalBodyReservedHeight = $productOptionsContainer.outerHeight(); + + if ($productOptionsContainer.length && modalBodyReservedHeight) { + $productOptionsContainer.css('height', modalBodyReservedHeight); + } + }; + + if (this.$modal.hasClass('open')) { + optionChangeHandler(); + } else { + this.$modal.one(ModalEvents.opened, optionChangeHandler); + } this.productDetails = new CartItemDetails(this.$modal, context);