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

bigcommerce · Jan 27, 2021 · 8d74e96 · 8d74e96
1 parent fdf0cff
commit 8d74e96
Show file tree

Hide file tree

Showing 3 changed files with 18 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 [#1973](https://github.com/bigcommerce/cornerstone/pull/1973)
 - 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
@@ -17,6 +17,7 @@ export default class ProductDetails extends ProductDetailsBase {
         this.imageGallery = new ImageGallery($('[data-image-gallery]', this.$scope));
         this.imageGallery.init();
         this.listenQuantityChange();
+        this.$promotionBanner = null;
 
         const $form = $('form[data-cart-item-add]', $scope);
         const $productOptionsElement = $('[data-product-option-change]', $form);
@@ -293,6 +294,7 @@ export default class ProductDetails extends ProductDetailsBase {
         const originalBtnVal = $addToCartBtn.val();
         const waitMessage = $addToCartBtn.data('waitMessage');
 
+        this.$promotionBanner = $('[data-marketing-banner]');
         // Do not do AJAX if browser doesn't support FormData
         if (window.FormData === undefined) {
             return;
@@ -401,13 +403,27 @@ 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 $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.history.go(0);
+            };
 
             $cartCounter.addClass('cart-count--positive');
             $body.trigger('cart-quantity-update', quantity);
 
             if (onComplete) {
                 onComplete(response);
             }
+
+            if (this.$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-marketing-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>