fix(storefront): BCTHEME-264 fix update discount banner on PDP

bigcommerce · Jan 28, 2021 · e365d01 · e365d01
1 parent fdf0cff
commit e365d01
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed Discount Banner update on adding item to Cart from PDP [#1974](https://github.com/bigcommerce/cornerstone/pull/1974)
 - Updated Cornerstone theme and respected variants to meet the verticals/industries documented in BCTHEME-387
 - Fixed selecting certain option types which pushes window view to the bottom of the page. [#1959](https://github.com/bigcommerce/cornerstone/pull/1959)
 - Fixed case when default option is out of stock add to cart button does not populate for in stock options. [#1955](https://github.com/bigcommerce/cornerstone/pull/1955)

diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
@@ -401,13 +401,28 @@ export default class ProductDetails extends ProductDetailsBase {
             const $cartQuantity = $('[data-cart-quantity]', modal.$content);
             const $cartCounter = $('.navUser-action .cart-count');
             const quantity = $cartQuantity.data('cartQuantity') || 0;
+            const $promotionBanner = $('[data-promotion-banner]');
+            const $backToShopppingBtn = $('.previewCartCheckout > [data-reveal-close]');
+            const $modalCloseBtn = $('#previewModal > .modal-close');
+            const bannerUpdateHandler = () => {
+                const $productContainer = $('#main-content > .container');
+
+                $productContainer.append('<div class="loadingOverlay pdp-update"></div>');
+                $('.loadingOverlay.pdp-update', $productContainer).show();
+                window.location.reload();
+            };
 
             $cartCounter.addClass('cart-count--positive');
             $body.trigger('cart-quantity-update', quantity);
 
             if (onComplete) {
                 onComplete(response);
             }
+
+            if ($promotionBanner.length && $backToShopppingBtn.length) {
+                $backToShopppingBtn.on('click', bannerUpdateHandler);
+                $modalCloseBtn.on('click', bannerUpdateHandler);
+            }
         });
     }
 

diff --git a/templates/components/common/alert/alert-info.html b/templates/components/common/alert/alert-info.html
@@ -1,4 +1,4 @@
-<div class="alertBox alertBox--info">
+<div class="alertBox alertBox--info" data-promotion-banner>
     <div class="alertBox-column alertBox-icon">
         <icon glyph="ic-success" class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></icon>
     </div>