Merge pull request scandipwa#4956 from neeeeecka/4955-product-item-re…

…direct
scandipwa · Jun 23, 2022 · 3f60152 · 3f60152
2 parents 711c40c + 3a7a7eb
commit 3f60152
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/packages/scandipwa/src/component/AddToCart/AddToCart.component.js b/packages/scandipwa/src/component/AddToCart/AddToCart.component.js
@@ -35,6 +35,8 @@ export class AddToCart extends PureComponent {
         layout: LayoutType.isRequired
     };
 
+    handleButtonClick = this.handleButtonClick.bind(this);
+
     renderCartIcon() {
         const { isIconEnabled } = this.props;
 
@@ -45,18 +47,26 @@ export class AddToCart extends PureComponent {
         return <CartIcon />;
     }
 
+    handleButtonClick(e) {
+        // Prevent container Link from triggering redirect
+        e.stopPropagation();
+        e.preventDefault();
+
+        const { addProductToCart } = this.props;
+        addProductToCart();
+    }
+
     render() {
         const {
             mix,
-            addProductToCart,
             layout,
             isDisabled,
             isAdding
         } = this.props;
 
         return (
             <button
-              onClick={ addProductToCart }
+              onClick={ this.handleButtonClick }
               block="Button AddToCart"
               mix={ mix }
               mods={ { layout } }

diff --git a/packages/scandipwa/src/component/AddToCart/AddToCart.container.js b/packages/scandipwa/src/component/AddToCart/AddToCart.container.js
@@ -96,16 +96,14 @@ export class AddToCartContainer extends PureComponent {
         [PRODUCT_TYPE.grouped]: this.validateGroup.bind(this)
     };
 
-    async addProductToCart(e) {
+    async addProductToCart() {
         const { product, addToCart, updateSelectedValues } = this.props;
         await updateSelectedValues();
 
         if ((!product || Object.keys(product).length === 0) && !addToCart) {
             return;
         }
 
-        e.preventDefault();
-        e.stopPropagation();
         this.setState({ isAdding: true });
 
         if (!this.validate()) {

diff --git a/packages/scandipwa/src/component/ProductCard/ProductCard.component.js b/packages/scandipwa/src/component/ProductCard/ProductCard.component.js
@@ -82,9 +82,9 @@ export class ProductCard extends Product {
 
     className = 'ProductCard';
 
-    registerSharedElement = this.registerSharedElement.bind(this);
+    handleLinkClick = this.handleLinkClick.bind(this);
 
-    registerSharedElement() {
+    handleLinkClick() {
         const { registerSharedElement, isPlp } = this.props;
 
         if (!isPlp) {
@@ -232,7 +232,7 @@ export class ProductCard extends Product {
               block="ProductCard"
               elem="Link"
               to={ linkTo }
-              onClick={ this.registerSharedElement }
+              onClick={ this.handleLinkClick }
               mix={ mix }
             >
               { children }
@@ -256,6 +256,7 @@ export class ProductCard extends Product {
             || (type === PRODUCT_TYPE.configurable
                && Object.values(this.getConfigurableAttributes()).some((value) => value.attribute_values.length === 0));
         const configureCustomize = options.some(({ required = false }) => required);
+
         const configureDownloadableLinks = PRODUCT_TYPE.downloadable && links_purchased_separately === 1;
 
         return configureBundleAndGrouped || configureConfig || configureCustomize || configureDownloadableLinks;
@@ -268,15 +269,17 @@ export class ProductCard extends Product {
             inStock
         } = this.props;
 
-        if (inStock && this.requiresConfiguration()) {
+        const requiresConfiguration = this.requiresConfiguration();
+
+        if (inStock && requiresConfiguration) {
             return (
-                <button
-                  block="Button AddToCart"
-                  mods={ { layout } }
-                  onClick={ showSelectOptionsNotification }
-                >
-                    { __('Add to cart') }
-                </button>
+                    <button
+                      block="Button AddToCart"
+                      mods={ { layout } }
+                      onClick={ showSelectOptionsNotification }
+                    >
+                        { __('Add to cart') }
+                    </button>
             );
         }