diff --git a/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js b/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js index c6b86657c..8d6f61cb1 100644 --- a/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js +++ b/modules/ppcp-button/resources/js/modules/ContextBootstrap/SingleProductBootstap.js @@ -1,5 +1,6 @@ import UpdateCart from "../Helper/UpdateCart"; import SingleProductActionHandler from "../ActionHandler/SingleProductActionHandler"; +import {hide, show} from "../Helper/Hiding"; import {disable, enable} from "../Helper/ButtonDisabler"; class SingleProductBootstap { @@ -18,10 +19,16 @@ class SingleProductBootstap { handleChange() { if (!this.shouldRender()) { + hide(this.gateway.button.wrapper, this.formSelector); + hide(this.gateway.messages.wrapper); return; } this.render(); + + show(this.gateway.button.wrapper, this.formSelector); + show(this.gateway.messages.wrapper); + this.handleButtonStatus(); } diff --git a/modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js b/modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js index a07e81d21..82c10769f 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/MessageRenderer.js @@ -2,6 +2,7 @@ class MessageRenderer { constructor(config) { this.config = config; + this.optionsFingerprint = null; } render() { @@ -9,18 +10,20 @@ class MessageRenderer { return; } - paypal.Messages({ + const options = { amount: this.config.amount, placement: this.config.placement, style: this.config.style - }).render(this.config.wrapper); + }; + + if (this.isOptionsFingerprintEqual(options)) { + return; + } + + paypal.Messages(options).render(this.config.wrapper); jQuery(document.body).on('updated_cart_totals', () => { - paypal.Messages({ - amount: this.config.amount, - placement: this.config.placement, - style: this.config.style - }).render(this.config.wrapper); + paypal.Messages(options).render(this.config.wrapper); }); } @@ -30,17 +33,36 @@ class MessageRenderer { return; } - const newWrapper = document.createElement('div'); - newWrapper.setAttribute('id', this.config.wrapper.replace('#', '')); - - const sibling = document.querySelector(this.config.wrapper).nextSibling; - document.querySelector(this.config.wrapper).parentElement.removeChild(document.querySelector(this.config.wrapper)); - sibling.parentElement.insertBefore(newWrapper, sibling); - paypal.Messages({ + const options = { amount, placement: this.config.placement, style: this.config.style - }).render(this.config.wrapper); + }; + + if (this.isOptionsFingerprintEqual(options)) { + return; + } + + const newWrapper = document.createElement('div'); + newWrapper.setAttribute('id', this.config.wrapper.replace('#', '')); + + const oldWrapper = document.querySelector(this.config.wrapper); + const sibling = oldWrapper.nextSibling; + oldWrapper.parentElement.removeChild(oldWrapper); + sibling.parentElement.insertBefore(newWrapper, sibling); + + paypal.Messages(options).render(this.config.wrapper); + } + + isOptionsFingerprintEqual(options) { + const fingerprint = JSON.stringify(options); + + if (this.optionsFingerprint === fingerprint) { + return true; + } + + this.optionsFingerprint = fingerprint; + return false; } shouldRender() {