BCTHEME154: fix issue with add product to cart on ie11 (#1762)

Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed failing to add product to cart on IE11 [#1762](https://github.com/bigcommerce/cornerstone/pull/1762)
 - Fixed overlaping at footer columns when long texts (without spaces) are entered [#1753](https://jira.bigcommerce.com/browse/BCTHEME-43)
 
 ## 4.9.0 (07-28-2020)

assets/js/polyfills.js

@@ -3,6 +3,8 @@ import 'regenerator-runtime/runtime';
 import 'whatwg-fetch';
 import objectFitImages from 'object-fit-images';
 
+require('formdata-polyfill');
+
 document.addEventListener('DOMContentLoaded', () => {
     objectFitImages();
 });

assets/js/theme/common/product-details.js

@@ -6,6 +6,7 @@ import modalFactory, { showAlertModal } from '../global/modal';
 import _ from 'lodash';
 import Wishlist from '../wishlist';
 import { normalizeFormData } from './utils/api';
+import { isBrowserIE, convertIntoArray } from './utils/ie-helpers';
 
 export default class ProductDetails {
     constructor($scope, context, productAttributesData = {}) {
@@ -108,15 +109,20 @@ export default class ProductDetails {
             if (type === 'set-rectangle' || type === 'set-radio' || type === 'swatch' || type === 'input-checkbox' || type === 'product-list') {
                 const checked = value.querySelector(':checked');
                 if (checked) {
+                    const getSelectedOptionLabel = () => {
+                        const productVariantslist = convertIntoArray(value.children);
+                        const matchLabelForCheckedInput = inpt => inpt.dataset.productAttributeValue === checked.value;
+                        return productVariantslist.filter(matchLabelForCheckedInput)[0];
+                    };
                     if (type === 'set-rectangle' || type === 'set-radio' || type === 'product-list') {
-                        const label = checked.labels[0].innerText;
+                        const label = isBrowserIE ? getSelectedOptionLabel().innerText.trim() : checked.labels[0].innerText;
                         if (label) {
                             options.push(`${optionTitle}:${label}`);
                         }
                     }
 
                     if (type === 'swatch') {
-                        const label = checked.labels[0].children[0];
+                        const label = isBrowserIE ? getSelectedOptionLabel().children[0] : checked.labels[0].children[0];
                         if (label) {
                             options.push(`${optionTitle}:${label.title}`);
                         }

assets/js/theme/common/utils/ie-helpers.js

@@ -0,0 +1,3 @@
+export const isBrowserIE = navigator.userAgent.includes('Trident');
+
+export const convertIntoArray = collection => Array.prototype.slice.call(collection);

package.json

@@ -11,6 +11,7 @@
     "creditcards": "^3.0.1",
     "easyzoom": "^2.5.3",
     "focus-within-polyfill": "^5.0.9",
+    "formdata-polyfill": "^3.0.20",
     "foundation-sites": "^5.5.3",
     "jquery": "^3.5.1",
     "jquery.tabbable": "^1.0.1",