mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-04 08:47:23 +08:00
⚡️ Only recreate payment button when needed
Check if the button is still in DOM before recreating it
This commit is contained in:
parent
934441fdeb
commit
3538a69402
1 changed files with 31 additions and 3 deletions
|
@ -588,6 +588,34 @@ export default class PaymentButton {
|
|||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks, if the payment button is still attached to the DOM.
|
||||
*
|
||||
* WooCommerce performs some partial reloads in many cases, which can lead to our payment
|
||||
* button
|
||||
* to move into the browser's memory. In that case, we need to recreate the button in the
|
||||
* updated DOM.
|
||||
*
|
||||
* @return {boolean} True means, the button is still present (and typically visible) on the
|
||||
* page.
|
||||
*/
|
||||
get isButtonAttached() {
|
||||
if ( ! this.#button ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
let parent = this.#button.parentElement;
|
||||
while ( parent?.parentElement ) {
|
||||
if ( 'BODY' === parent.tagName ) {
|
||||
return true;
|
||||
}
|
||||
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Log a debug detail to the browser console.
|
||||
*
|
||||
|
@ -680,11 +708,11 @@ export default class PaymentButton {
|
|||
|
||||
this.applyWrapperStyles();
|
||||
|
||||
// Refresh or hide the actual payment button.
|
||||
if ( this.isEligible && this.isPresent && this.isVisible ) {
|
||||
if ( ! this.isButtonAttached ) {
|
||||
this.log( 'refresh.addButton' );
|
||||
this.addButton();
|
||||
} else {
|
||||
// this.removeButton();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue