fix(storefront): BCTHEME-1184 form.serialize() ignores dropdown optio…

…n elements that have the disabled attribute
bigcommerce · Feb 1, 2023 · 9a26db9 · 9a26db9
1 parent 87b6d81
commit 9a26db9
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Draft
 - Remove xlink attributes on svg [#2322](https://github.com/bigcommerce/cornerstone/pull/2322)
+- form.serialize() ignores dropdown option elements that have the disabled attribute [#2326](https://github.com/bigcommerce/cornerstone/pull/2326)
 
 ## 6.8.0 (01-26-2023)
 - Add remote_api_scripts into cart/preview template to let GA3 snippet to fire the Product Added event, when clicking Add to cart button on Product detail page and rendering the response in popup. [#2281](https://github.com/bigcommerce/cornerstone/pull/2281)

diff --git a/assets/js/theme/common/product-details-base.js b/assets/js/theme/common/product-details-base.js
@@ -90,12 +90,19 @@ export default class ProductDetailsBase {
     updateProductAttributes(data) {
         const behavior = data.out_of_stock_behavior;
         const inStockIds = data.in_stock_attributes;
-        const outOfStockMessage = ` (${data.out_of_stock_message})`;
+        const stockMessage = this.context.stockMessage;
+        let outOfStockMessage = data.out_of_stock_message;
 
         if (behavior !== 'hide_option' && behavior !== 'label_option') {
             return;
         }
 
+        if (outOfStockMessage) {
+            outOfStockMessage = ` (${outOfStockMessage})`;
+        } else {
+            outOfStockMessage = ` (${stockMessage})`;
+        }
+
         $('[data-product-attribute-value]', this.$scope).each((i, attribute) => {
             const $attribute = $(attribute);
             const attrId = parseInt($attribute.data('productAttributeValue'), 10);
@@ -407,7 +414,6 @@ export default class ProductDetailsBase {
                 $select[0].selectedIndex = 0;
             }
         } else {
-            $attribute.attr('disabled', 'disabled');
             $attribute.html($attribute.html().replace(outOfStockMessage, '') + outOfStockMessage);
         }
     }
@@ -416,7 +422,6 @@ export default class ProductDetailsBase {
         if (behavior === 'hide_option') {
             $attribute.toggleOption(true);
         } else {
-            $attribute.prop('disabled', false);
             $attribute.html($attribute.html().replace(outOfStockMessage, ''));
         }
     }

diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -1,3 +1,5 @@
+{{inject 'stockMessage' (lang 'products.sold_out')}}
+
 <div class="productView"
     {{#if settings.data_tag_enabled}}
     data-event-type="product"