fix(storefront): BCTHEME-431 remove horizontal scroll on swatch optio…

…ns PDP (#2023)
bigcommerce · Mar 31, 2021 · 8dbd88b · 8dbd88b
1 parent dc9d19e
commit 8dbd88b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed unnecessary horizontal scroll on swatch options on PDP. [#2023](https://github.com/bigcommerce/cornerstone/pull/2023)
 
 ## 5.3.0 (03-25-2021)
 - Remove AddThis for social sharing, replace with provider sharing links. [#1997](https://github.com/bigcommerce/cornerstone/pull/1997)

diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
@@ -25,6 +25,21 @@ export default class ProductDetails extends ProductDetailsBase {
         const hasOptions = $productOptionsElement.html().trim().length;
         const hasDefaultOptions = $productOptionsElement.find('[data-default]').length;
         const $productSwatchGroup = $('[id*="attribute_swatch"]', $form);
+        const $productSwatchLabels = $('.form-option-swatch', $form);
+        const placeSwatchLabelImage = (_, label) => {
+            const $optionImage = $('.form-option-expanded', $(label));
+            const optionImageWidth = $optionImage.outerWidth();
+            const extendedOptionImageOffsetLeft = 55;
+            const { right } = label.getBoundingClientRect();
+            const emptySpaceToScreenRightBorder = window.screen.width - right;
+            const shiftValue = optionImageWidth - emptySpaceToScreenRightBorder;
+
+            if (emptySpaceToScreenRightBorder < (optionImageWidth + extendedOptionImageOffsetLeft)) {
+                $optionImage.css('left', `${shiftValue > 0 ? -shiftValue : shiftValue}px`);
+            }
+        };
+
+        $(window).on('load', () => $.each($productSwatchLabels, placeSwatchLabelImage));
 
         if (context.showSwatchNames) {
             this.$swatchOptionMessage.removeClass('u-hidden');