From 3538a69402d3f5b65e45a0a83cb17196f65b0270 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Thu, 8 Aug 2024 14:42:01 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Only=20recreate=20payment?= =?UTF-8?q?=20button=20when=20needed?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Check if the button is still in DOM before recreating it --- .../js/modules/Renderer/PaymentButton.js | 34 +++++++++++++++++-- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js b/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js index 6994691ae..bb9eda70c 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js @@ -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(); + } } }