fix(storefront): BCTHEME-544 fix potential shift on change options mo…

…dal on Cart

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)

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';
 
@@ -147,6 +147,15 @@ export default class Cart extends PageManager {
 
         if (this.$modal === null) {
             this.$modal = $('#modal');
+
+            this.$modal.on(ModalEvents.opened, () => {
+                const $productOptionsContainer = $('[data-product-attributes-wrapper]', this.$modal);
+                const modalBodyReservedHeight = $productOptionsContainer.outerHeight();
+
+                if (modalBodyReservedHeight) {
+                    $productOptionsContainer.css('height', modalBodyReservedHeight);
+                }
+            });
         }
 
         const options = {
@@ -158,9 +167,7 @@ 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);
+            this.$modal.triggerHandler(ModalEvents.opened);
 
             this.productDetails = new CartItemDetails(this.$modal, context);