Create a renderer method and fix the mini cart bootstrap init logic

This commit is contained in:
Mészáros Róbert 2020-04-09 18:45:49 +03:00
parent 7e8511732e
commit 52052ad919
4 changed files with 61 additions and 51 deletions

View file

@ -10,19 +10,23 @@ class CartBootstrap {
return;
}
jQuery(document.body).on('updated_cart_totals updated_checkout', () => {
this.renderer.render(this.configurator.configuration());
});
this.render();
this.renderer.render(
this.gateway.button.wrapper,
this.configurator.configuration(),
);
jQuery(document.body).on('updated_cart_totals updated_checkout', () => {
this.render();
});
}
shouldRender() {
return document.querySelector(this.gateway.button.wrapper) !== null;
}
render() {
this.renderer.render(
this.gateway.button.wrapper,
this.configurator.configuration(),
);
}
}
export default CartBootstrap;

View file

@ -10,38 +10,15 @@ class CheckoutBootstap {
return;
}
const buttonWrapper = this.gateway.button.wrapper;
const toggleButtons = () => {
const currentPaymentMethod = jQuery(
'input[name="payment_method"]:checked').val();
if (currentPaymentMethod !== 'ppcp-gateway') {
this.renderer.hideButtons(buttonWrapper);
jQuery('#place_order').show();
}
else {
this.renderer.showButtons(buttonWrapper);
jQuery('#place_order').hide();
}
};
this.render();
jQuery(document.body).on('updated_checkout', () => {
this.renderer.render(
buttonWrapper,
this.configurator.configuration(),
);
toggleButtons();
this.render();
});
jQuery(document.body).on('payment_method_selected', () => {
toggleButtons();
jQuery(document.body).on('updated_checkout payment_method_selected', () => {
this.switchBetweenPayPalandOrderButton();
});
this.renderer.render(
buttonWrapper,
this.configurator.configuration(),
);
}
shouldRender() {
@ -51,6 +28,26 @@ class CheckoutBootstap {
return document.querySelector(this.gateway.button.wrapper) !== null;
}
render() {
this.renderer.render(
this.gateway.button.wrapper,
this.configurator.configuration(),
);
}
switchBetweenPayPalandOrderButton() {
const currentPaymentMethod = jQuery('input[name="payment_method"]:checked').val();
if (currentPaymentMethod !== 'ppcp-gateway') {
this.renderer.hideButtons(this.gateway.button.wrapper);
jQuery('#place_order').show();
}
else {
this.renderer.showButtons(this.gateway.button.wrapper);
jQuery('#place_order').hide();
}
}
}
export default CheckoutBootstap;

View file

@ -6,24 +6,30 @@ class MiniCartBootstap {
}
init() {
this.render();
jQuery(document.body).on('wc_fragments_loaded wc_fragments_refreshed', () => {
this.render();
});
}
shouldRender() {
return document.querySelector(this.gateway.button.mini_cart_wrapper) !== null;
}
render() {
// Compared to the other bootstrapper we need the checker inside the
// renderer because the mini cart is refreshed with AJAX and the
// wrapper DOM might not be there from the start
if (!this.shouldRender()) {
return;
}
jQuery(document.body).
on('wc_fragments_loaded wc_fragments_refreshed', () => {
renderer.render(this.configurator.configuration());
});
this.renderer.render(
this.gateway.button.mini_cart_wrapper,
this.configurator.configuration(),
);
}
shouldRender() {
return document.querySelector(this.gateway.button.mini_cart_wrapper) !== null;
}
}
export default MiniCartBootstap;

View file

@ -18,24 +18,20 @@ class SingleProductBootstap {
this.gateway.ajax.change_cart.endpoint,
this.gateway.ajax.change_cart.nonce,
);
const buttonWrapper = this.gateway.button.wrapper;
const configurator = new SingleProductConfig(
this.configurator = new SingleProductConfig(
this.gateway,
updateCart,
() => {
this.renderer.showButtons(buttonWrapper);
this.renderer.showButtons(this.gateway.button.wrapper);
},
() => {
this.renderer.hideButtons(buttonWrapper);
this.renderer.hideButtons(this.gateway.button.wrapper);
},
document.querySelector('form.cart'),
errorHandler,
);
this.renderer.render(
buttonWrapper,
configurator.configuration(),
);
this.render();
}
shouldRender() {
@ -45,6 +41,13 @@ class SingleProductBootstap {
return document.querySelector(this.gateway.button.wrapper) !== null;
}
render() {
this.renderer.render(
this.gateway.button.wrapper,
this.configurator.configuration(),
);
}
}
export default SingleProductBootstap;