Ensure ‘Proceed to Checkout’ Button Does Not Collapse Through WooPay Direct Checkout Flow #9172
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Test the buildOption 1. Jetpack Beta
Option 2. Jurassic Ninja - available for logged-in A12s🚀 Launch a JN site with this branch 🚀 ℹ️ Install this Tampermonkey script to get more options. Build info:
Note: the build is updated when a new commit is pushed to this PR. |
|
Size Change: +111 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
…-collapsing-in-dc
reykjalin
approved these changes
Jul 26, 2024
There was a problem hiding this comment.
Tests well on Tsubaki, Twenty-Twenty Four, and Storefront! Although the spinner doesn't appear in the Storefront mini-cart, but that's true for develop as well, so not an issue.
It's really clever to hide the content of the button and then overlay the spinner! I would not have thought of that, super impressed 👏
Although I wonder how that works for people with screen readers 🤔 Should we set aria-hidden="false" on the content to remove it from the vision of accessibility devices?
Good call. I'll create a separate issue for this in order to avoid blocking this PR. |
lovo-h
deleted the
fix/9165-prevent-proceed-to-checkout-from-collapsing-in-dc
branch
lovo-h
added a commit
that referenced
this pull request
Aug 1, 2024
…Direct Checkout Flow (#9172) Co-authored-by: Kristófer Reykjalín <13835680+reykjalin@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #9165
Changes proposed in this Pull Request
The changes in this PR ensure that the
Proceed to Checkoutbutton does not collapse after being clicked while using the WooPay Direct Checkout (DC) flow.When the
Proceed to Checkoutbutton is clicked in the DC flow, the button's content is replaced with a loading spinner. However, since the button is set to hug the content when the button's content is replaced with the loading spinner, the button changes widths since the spinner is more narrow than the existing content.The changes in this PR ensure that the content remains but is hidden. Then, it adds the spinner on top of the content to ensure the button's width does not resize.
Testing instructions
Tip
The following tests should be performed on more than one theme.
Prerequisites
Test: Ensure
Proceed to Checkoutbutton does not collapse in classic cart[woocommerce_cart]shortcode.Proceed to Checkoutbutton.Test: Ensure
Go to Checkoutbutton does not collapse in wc-blocks mini-cartwc-blocks footer mini-cart.mini-cartwidget to the sidebar.Go to Checkoutbutton.Test: Ensure
Go to Checkoutbutton does not collapse in wc-blocks footer mini-cartGo to Checkoutbutton.npm run changelogto add a changelog file, choosepatchto leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.Post merge