rerender when price on single product changes

This commit is contained in:
David Remer 2020-08-19 13:40:29 +03:00
parent 3d22b11f56
commit 7db17b6426
3 changed files with 38 additions and 5 deletions

View file

@ -27,6 +27,7 @@ const bootstrap = () => {
const singleProductBootstrap = new SingleProductBootstap(
PayPalCommerceGateway,
renderer,
messageRenderer,
);
singleProductBootstrap.init();

View file

@ -3,9 +3,10 @@ import UpdateCart from "../Helper/UpdateCart";
import SingleProductActionHandler from "../ActionHandler/SingleProductActionHandler";
class SingleProductBootstap {
constructor(gateway, renderer) {
constructor(gateway, renderer, messages) {
this.gateway = gateway;
this.renderer = renderer;
this.messages = messages;
}
init() {
@ -35,6 +36,15 @@ class SingleProductBootstap {
() => {
this.renderer.showButtons(this.gateway.button.wrapper);
this.renderer.showButtons(this.gateway.hosted_fields.wrapper);
let priceText = "0";
if (document.querySelector('form.cart ins .woocommerce-Price-amount')) {
priceText = document.querySelector('form.cart ins .woocommerce-Price-amount').innerText;
}
else if (document.querySelector('form.cart .woocommerce-Price-amount')) {
priceText = document.querySelector('form.cart .woocommerce-Price-amount').innerText;
}
const amount = parseInt(priceText.replace(/([^\d,\.\s]*)/g, ''));
this.messages.renderWithAmount(amount)
},
() => {
this.renderer.hideButtons(this.gateway.button.wrapper);

View file

@ -5,10 +5,7 @@ class MessageRenderer {
}
render() {
if (typeof paypal.Messages === 'undefined' || typeof this.config.wrapper === 'undefined' ) {
return;
}
if (! document.querySelector(this.config.wrapper)) {
if (! this.shouldRender()) {
return;
}
@ -18,5 +15,30 @@ class MessageRenderer {
style: this.config.style
}).render(this.config.wrapper);
}
renderWithAmount(amount) {
if (! this.shouldRender()) {
return;
}
console.log(amount);
paypal.Messages({
amount,
placement: this.config.placement,
style: this.config.style
}).render(this.config.wrapper);
}
shouldRender() {
if (typeof paypal.Messages === 'undefined' || typeof this.config.wrapper === 'undefined' ) {
return false;
}
if (! document.querySelector(this.config.wrapper)) {
return false;
}
return true;
}
}
export default MessageRenderer;