mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-04 08:47:23 +08:00
Create a renderer method and fix the mini cart bootstrap init logic
This commit is contained in:
parent
7e8511732e
commit
52052ad919
4 changed files with 61 additions and 51 deletions
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
|
@ -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;
|
Loading…
Add table
Add a link
Reference in a new issue