Add hide / show conditions on SingleProduct Buttons for when they shouldn't be rendered.

Refactor MessageRenderer not to reload when it has no changes.
This commit is contained in:
Pedro Silva 2023-06-23 15:49:08 +01:00
parent 587e065fba
commit 75bf98c174
No known key found for this signature in database
GPG key ID: E2EE20C0669D24B3
2 changed files with 44 additions and 15 deletions

View file

@ -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();
}

View file

@ -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() {