fix(storefront): bctheme-448 fix multiple swatch options

bigcommerce · Apr 19, 2021 · c542921 · c542921
1 parent 2e7effa
commit c542921
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git 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
@@ -18,7 +18,8 @@ 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'));
 
         const $form = $('form[data-cart-item-add]', $scope);
         const $productOptionsElement = $('[data-product-option-change]', $form);
@@ -43,10 +44,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));
             });
         }
 
@@ -218,12 +226,21 @@ 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`);
+
+        // save swatch option initial message text only once
+        this.swatchGroupIdList.each((_, swatchGroupId) => {
+            if (!this.swatchInitMessageStorage[swatchGroupId]) {
+                this.swatchInitMessageStorage[swatchGroupId] = $(`#${swatchGroupId} ~ .swatch-option-message`).text().trim();
+            }
+        });
 
-        $('[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
@@ -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>