Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Add to cart button ignored redirect to cart setting #5708

Merged

Conversation

tomasztunik
Copy link
Contributor

@tomasztunik tomasztunik commented Feb 2, 2022

This fixes issue where All Products (and all other blocks) where Add to Cart button was present were ignoring the Redirect to Cart after item added setting was enabled.

We expose WooCommerce products settings in wcSettings

For the time being we expose only what is used by the blocks
which is cartRedirectAfterAdd. In the future more can be added
as needed. Setting is accessible via getSetting( 'productsSettings' ).

We namespace the settings under productsSettigns to reflect
the domain and how settings are organised in Woo admin and to
inform that this is an object with more settings within.

This setting normally was available only if AJAX add to cart was set
as a JS global wc_add_to_cart_params.cart_redirect_after_add.
By accessing the option directly we ensure it’s exposed
to blocks regardless of if AJAX option is enabled.

This adds the redirect directly on the AddToCartButton after successful
add to cart action and it follows convention that redirects or other side
effects shouldn’t happen as part of the action but rather be part of the
control that triggers such flow.

Fixes #1766

Manual Testing

How to test the changes in this Pull Request:

  1. Go to WooCommerce Settings > Products > General and toggle Redirect to the cart page after successful addition
  2. Add All Blocks and/or other products blocks.
  3. Hit the Add to Cart button
  4. If setting is enabled you should be automatically redirected to the cart

User Facing Testing

These are steps for user testing (where "user" is someone interacting with this change that is not editing any code).

  • Same as above, or
  • See steps below.

Changelog

Add to Cart button on Products listing blocks will respect the "Redirect to the cart page after successful addition" setting

For the time being we expose only what is used by the blocks
which is `cartRedirectAfterAdd`. In the future more can be added
as needed. Setting is accessible via `getSetting( 'productsSettings' )`.

We namespace the settings under productsSettigns to reflect
the domain and how settings are organised in Woo admin and to
inform that this is an object with more settings within.

This setting normally was available **only** if AJAX add to cart was set
as a js global `wc_add_to_cart_params.cart_redirect_after_add`.
By accessing the option directly we ensure it’s exposed
to blocks regardless of if AJAX option is enabled.
This adds the redirect directly on the AddToCartButton after succesful
add to cart action. This follows convention that redirects or other side
effects shouldn’t happen as part of the action but rather be part of the
control that triggers such flow.
@rubikuserbot rubikuserbot requested review from a team and sunyatasattva and removed request for a team February 2, 2022 17:13
@tomasztunik
Copy link
Contributor Author

tomasztunik commented Feb 2, 2022

I've explored hooking it up in datra/cart/actions.ts and looked into using addAction client hook but ultimately I felt that keeping this redirect side effect as part of the control that triggers it when setting is enabled is most explicit and ensures this redirect doesn't happen in unexpected situations or with controls where it wasn't meant to.

(And thanks @opr for the support and pointers!)

@tomasztunik tomasztunik requested a review from opr February 2, 2022 17:16
@github-actions
Copy link
Contributor

github-actions bot commented Feb 2, 2022

Size Change: +178 B (0%)

Total Size: 811 kB

Filename Size Change
build/all-products-frontend.js 18.7 kB +2 B (0%)
build/all-products.js 33.8 kB +53 B (0%)
build/atomic-block-components/button-frontend.js 1.54 kB +61 B (+4%)
build/atomic-block-components/button.js 914 B +61 B (+7%) 🔍
build/single-product-frontend.js 22.1 kB +1 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.21 kB
build/active-filters.js 6.9 kB
build/all-reviews.js 8.07 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---8f355022.js 238 B
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.67 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/add-to-cart-frontend.js 6.89 kB
build/atomic-block-components/add-to-cart.js 6.46 kB
build/atomic-block-components/category-list-frontend.js 458 B
build/atomic-block-components/category-list.js 458 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price-frontend.js 1.75 kB
build/atomic-block-components/price.js 1.7 kB
build/atomic-block-components/rating-frontend.js 698 B
build/atomic-block-components/rating.js 700 B
build/atomic-block-components/sale-badge-frontend.js 624 B
build/atomic-block-components/sale-badge.js 623 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 386 B
build/atomic-block-components/stock-indicator--atomic-block-components/summary--atomic-block-components/title.js 452 B
build/atomic-block-components/stock-indicator-frontend.js 922 B
build/atomic-block-components/stock-indicator.js 624 B
build/atomic-block-components/summary-frontend.js 1.22 kB
build/atomic-block-components/summary.js 925 B
build/atomic-block-components/tag-list-frontend.js 459 B
build/atomic-block-components/tag-list.js 459 B
build/atomic-block-components/title-frontend.js 1.2 kB
build/atomic-block-components/title.js 932 B
build/attribute-filter-frontend.js 16.3 kB
build/attribute-filter.js 12 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.15 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 5.18 kB
build/cart-blocks/filled-cart-frontend.js 768 B
build/cart-blocks/items-frontend.js 298 B
build/cart-blocks/line-items-frontend.js 5.49 kB
build/cart-blocks/order-summary-frontend.js 8.93 kB
build/cart-blocks/totals-frontend.js 321 B
build/cart-frontend.js 45.5 kB
build/cart.js 43.7 kB
build/checkout-blocks/actions-frontend.js 1.39 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.22 kB
build/checkout-blocks/billing-address-frontend.js 888 B
build/checkout-blocks/contact-information-frontend.js 2.94 kB
build/checkout-blocks/express-payment-frontend.js 5.48 kB
build/checkout-blocks/fields-frontend.js 343 B
build/checkout-blocks/order-note-frontend.js 1.13 kB
build/checkout-blocks/order-summary-frontend.js 11.4 kB
build/checkout-blocks/payment-frontend.js 7.72 kB
build/checkout-blocks/shipping-address-frontend.js 974 B
build/checkout-blocks/shipping-methods-frontend.js 4.93 kB
build/checkout-blocks/terms-frontend.js 1.22 kB
build/checkout-blocks/totals-frontend.js 323 B
build/checkout-frontend.js 47.5 kB
build/checkout.js 45.2 kB
build/featured-category.js 8.51 kB
build/featured-product.js 9.62 kB
build/handpicked-products.js 7.09 kB
build/legacy-template.js 2.19 kB
build/mini-cart-component-frontend.js 14.2 kB
build/mini-cart-contents.js 3.82 kB
build/mini-cart-frontend.js 1.76 kB
build/mini-cart.js 6.4 kB
build/price-filter-frontend.js 12.6 kB
build/price-filter.js 8.48 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.37 kB
build/product-categories.js 3.17 kB
build/product-category.js 8.49 kB
build/product-new.js 7.67 kB
build/product-on-sale.js 7.99 kB
build/product-search.js 2.19 kB
build/product-tag.js 7.81 kB
build/product-top-rated.js 7.9 kB
build/products-by-attribute.js 8.38 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 12.6 kB
build/reviews-frontend.js 7.37 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 6.83 kB
build/stock-filter.js 6.55 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.51 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 4.74 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-editor-style-rtl.css 4.76 kB
build/wc-blocks-editor-style.css 4.76 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 21.9 kB
build/wc-blocks-style.css 21.9 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 69.7 kB
build/wc-blocks.js 2.62 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.61 kB

compressed-size-action

Copy link
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job. I love the well-thought-through PR description with all your thoughts and all that was done, and the comments in the code.

I'm just wondering… are we (or Gutenberg) not using any form of router? Redirecting via hard-coding the window.location.href feels a bit crude.

But if we don't have any routing set up, then no problem!

@github-actions github-actions bot added this to the 7.0.0 milestone Feb 8, 2022
@tomasztunik
Copy link
Contributor Author

Was curious about it as well when working on this @sunyatasattva. Woo is not a SPA and out of the box it doesn't have any routers or custom history handler contexts it seems. WooCommerce extension where it does redirect does it this way as well.

@tomasztunik tomasztunik merged commit 44b6339 into trunk Feb 9, 2022
@tomasztunik tomasztunik deleted the fix/1766-add-to-cart-button-ignored-redirect-to-cart branch February 9, 2022 08:26
@sunyatasattva sunyatasattva added focus: blocks Specific work involving or impacting how blocks behave. type: bug The issue/PR concerns a confirmed bug. block: featured product Issues related to the Featured Product block. block-type: product Issues related to/affecting all blocks related to products. and removed block: featured product Issues related to the Featured Product block. labels Feb 14, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block-type: product Issues related to/affecting all blocks related to products. focus: blocks Specific work involving or impacting how blocks behave. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

All Products: Ignores Setting - Redirect to the Cart Page on Successful Addition
2 participants