From 4c8ca6f5bd79afeb96e44f59ce0eee5aed28184f Mon Sep 17 00:00:00 2001
From: "alex.saiannyi" <alexander.saiannyi@bigcommerce.com>
Date: Mon, 19 Apr 2021 08:52:10 +0300
Subject: [PATCH] fix(storefront): bctheme-448 fix multiple swatch options

---
 CHANGELOG.md                                  |  1 +
 assets/js/theme/common/product-details.js     | 35 +++++++++++++++----
 .../components/products/options/swatch.html   |  4 +--
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2d5715e6c..be6fc61651 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed displaying swatch name for multiple swatch options on page. [#2040](https://github.com/bigcommerce/cornerstone/pull/2040)
 - Incorrect focus order for product carousels. [#2034](https://github.com/bigcommerce/cornerstone/pull/2034)
 - Removed duplicates of main tag.[#2032](https://github.com/bigcommerce/cornerstone/pull/2032)
 - Hamburger Menu Icon missing on Google AMP Pages. [#2022](https://github.com/bigcommerce/cornerstone/pull/2022)
diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
index b698f15d77..77ccea8116 100644
--- a/assets/js/theme/common/product-details.js
+++ b/assets/js/theme/common/product-details.js
@@ -18,7 +18,9 @@ export default class ProductDetails extends ProductDetailsBase {
         this.imageGallery.init();
         this.listenQuantityChange();
         this.$swatchOptionMessage = $('.swatch-option-message');
-        this.swatchOptionMessageInitText = this.$swatchOptionMessage.text();
+        this.swatchInitMessageStorage = {};
+        this.swatchGroupIdList = $('[id^="swatchGroup"]').map((_, group) => $(group).attr('id'));
+        this.storeInitMessagesForSwatches();
 
         const $form = $('form[data-cart-item-add]', $scope);
         const $productOptionsElement = $('[data-product-option-change]', $form);
@@ -43,10 +45,17 @@ export default class ProductDetails extends ProductDetailsBase {
 
         if (context.showSwatchNames) {
             this.$swatchOptionMessage.removeClass('u-hidden');
-            $productSwatchGroup.on('change', ({ target }) => this.showSwatchNameOnOption($(target)));
+
+            $productSwatchGroup.on('change', ({ target }) => {
+                const swatchGroupElement = target.parentNode.parentNode;
+
+                this.showSwatchNameOnOption($(target), $(swatchGroupElement));
+            });
 
             $.each($productSwatchGroup, (_, element) => {
-                if ($(element).is(':checked')) this.showSwatchNameOnOption($(element));
+                const swatchGroupElement = element.parentNode.parentNode;
+
+                if ($(element).is(':checked')) this.showSwatchNameOnOption($(element), $(swatchGroupElement));
             });
         }
 
@@ -76,6 +85,16 @@ export default class ProductDetails extends ProductDetailsBase {
         this.previewModal = modalFactory('#previewModal')[0];
     }
 
+    storeInitMessagesForSwatches() {
+        if (this.swatchGroupIdList.length && isEmpty(this.swatchInitMessageStorage)) {
+            this.swatchGroupIdList.each((_, swatchGroupId) => {
+                if (!this.swatchInitMessageStorage[swatchGroupId]) {
+                    this.swatchInitMessageStorage[swatchGroupId] = $(`#${swatchGroupId} ~ .swatch-option-message`).text().trim();
+                }
+            });
+        }
+    }
+
     setProductVariant() {
         const unsatisfiedRequiredFields = [];
         const options = [];
@@ -218,12 +237,14 @@ export default class ProductDetails extends ProductDetailsBase {
      * if this setting is enabled in Page Builder
      * show name for swatch option
      */
-    showSwatchNameOnOption($swatch) {
+    showSwatchNameOnOption($swatch, $swatchGroup) {
         const swatchName = $swatch.attr('aria-label');
+        const activeSwatchGroupId = $swatchGroup.attr('aria-labelledby');
+        const $swatchOptionMessage = $(`#${activeSwatchGroupId} ~ .swatch-option-message`);
 
-        $('[data-product-attribute="swatch"] [data-option-value]').text(swatchName);
-        this.$swatchOptionMessage.text(`${this.swatchOptionMessageInitText} ${swatchName}`);
-        this.setLiveRegionAttributes(this.$swatchOptionMessage, 'status', 'assertive');
+        $('[data-option-value]', $swatchGroup).text(swatchName);
+        $swatchOptionMessage.text(`${this.swatchInitMessageStorage[activeSwatchGroupId]} ${swatchName}`);
+        this.setLiveRegionAttributes($swatchOptionMessage, 'status', 'assertive');
     }
 
     setLiveRegionAttributes($element, roleType, ariaLiveStatus) {
diff --git a/templates/components/products/options/swatch.html b/templates/components/products/options/swatch.html
index d3a5fb0a4e..8470a42f97 100644
--- a/templates/components/products/options/swatch.html
+++ b/templates/components/products/options/swatch.html
@@ -1,5 +1,5 @@
-<div class="form-field" data-product-attribute="swatch" role="radiogroup" aria-labelledby="swatchGroup">
-    <label class="form-label form-label--alternate form-label--inlineSmall" id="swatchGroup">
+<div class="form-field" data-product-attribute="swatch" role="radiogroup" aria-labelledby="swatchGroup_{{id}}">
+    <label class="form-label form-label--alternate form-label--inlineSmall" id="swatchGroup_{{id}}">
         {{this.display_name}}:
         <span data-option-value></span>