ACP2E-2308: [CLOUD]: Configurable product with drop down attribute throws unexpected exception error and does not allow selection when a product carousel is present on PDP

Author: bubasuma

app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js

@@ -22,6 +22,11 @@ define([
         options: {
             superSelector: '.super-attribute-select',
             selectSimpleProduct: '[name="selected_configurable_option"]',
+
+            /**
+             * @deprecated Not used anymore
+             * @see selectorProductPrice
+             */
             priceHolderSelector: '.price-box',
             spConfig: {},
             state: {},
@@ -86,7 +91,7 @@ define([
         _initializeOptions: function () {
             var options = this.options,
                 gallery = $(options.mediaGallerySelector),
-                priceBoxOptions = $(this.options.priceHolderSelector).priceBox('option').priceConfig || null;
+                priceBoxOptions = this._getPriceBoxElement().priceBox('option').priceConfig || null;
 
             if (priceBoxOptions && priceBoxOptions.optionTemplate) {
                 options.optionTemplate = priceBoxOptions.optionTemplate;
@@ -100,7 +105,7 @@ define([
 
             options.settings = options.spConfig.containerId ?
                 $(options.spConfig.containerId).find(options.superSelector) :
-                $(options.superSelector);
+                this.element.parents(this.options.selectorProduct).find(options.superSelector);
 
             options.values = options.spConfig.defaultValues || {};
             options.parentImage = $('[data-role=base-image-container] img').attr('src');
@@ -580,7 +585,7 @@ define([
          * configurable product's option selections.
          */
         _reloadPrice: function () {
-            $(this.options.priceHolderSelector).trigger('updatePrice', this._getPrices());
+            this._getPriceBoxElement().trigger('updatePrice', this._getPrices());
         },
 
         /**
@@ -654,7 +659,7 @@ define([
          * @private
          */
         _calculatePrice: function (config) {
-            var displayPrices = $(this.options.priceHolderSelector).priceBox('option').prices,
+            var displayPrices = this._getPriceBoxElement().priceBox('option').prices,
                 newPrices = this.options.spConfig.optionPrices[_.first(config.allowedProducts)] || {};
 
             _.each(displayPrices, function (price, code) {
@@ -702,8 +707,7 @@ define([
          */
         _displayRegularPriceBlock: function (optionId) {
             var shouldBeShown = true,
-                $priceBox = this.element.parents(this.options.selectorProduct)
-                    .find(this.options.selectorProductPrice);
+                $priceBox = this._getPriceBoxElement();
 
             _.each(this.options.settings, function (element) {
                 if (element.value === '') {
@@ -785,6 +789,18 @@ define([
             } else {
                 $(this.options.tierPriceBlockSelector).hide();
             }
+        },
+
+        /**
+         * Returns the price container element
+         *
+         * @returns {*}
+         * @private
+         */
+        _getPriceBoxElement: function () {
+            return this.element
+                .parents(this.options.selectorProduct)
+                .find(this.options.selectorProductPrice);
         }
     });
 

app/code/Magento/Swatches/view/base/web/js/swatch-renderer.js

@@ -280,7 +280,7 @@ define([
             // tier prise selectors end
 
             // A price label selector
-            normalPriceLabelSelector: '.product-info-main .normal-price .price-label',
+            normalPriceLabelSelector: '.normal-price .price-label',
             qtyInfo: '#qty'
         },
 
@@ -1039,18 +1039,18 @@ define([
                 $(this.options.tierPriceBlockSelector).hide();
             }
 
-            $(this.options.normalPriceLabelSelector).hide();
+            $product.find(this.options.normalPriceLabelSelector).hide();
 
-            _.each($('.' + this.options.classes.attributeOptionsWrapper), function (attribute) {
+            _.each(this.element.find('.' + this.options.classes.attributeOptionsWrapper), function (attribute) {
                 if ($(attribute).find('.' + this.options.classes.optionClass + '.selected').length === 0) {
                     if ($(attribute).find('.' + this.options.classes.selectClass).length > 0) {
                         _.each($(attribute).find('.' + this.options.classes.selectClass), function (dropdown) {
                             if ($(dropdown).val() === '0') {
-                                $(this.options.normalPriceLabelSelector).show();
+                                $product.find(this.options.normalPriceLabelSelector).show();
                             }
                         }.bind(this));
                     } else {
-                        $(this.options.normalPriceLabelSelector).show();
+                        $product.find(this.options.normalPriceLabelSelector).show();
                     }
                 }
             }.bind(this));