woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Merge pull request #2 from inpsyde/feature-separate-context-bootstappers

Browse source 
Separate bootstrap logic based on the button context
This commit is contained in:
David Remer 2020-04-09 15:10:10 +03:00 • committed by GitHub
commit bd8e69129f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 225 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

2
modules.local/ppcp-button/assets/js/button.js
View file

File diff suppressed because one or more lines are too long

2
modules.local/ppcp-button/assets/js/button.js.map
View file

File diff suppressed because one or more lines are too long

128
modules.local/ppcp-button/resources/js/button.js
View file

@ -1,117 +1,79 @@
import Renderer from './modules/Renderer';
import SingleProductConfig from './modules/SingleProductConfig';
import UpdateCart from './modules/UpdateCart';
import ErrorHandler from './modules/ErrorHandler';
import CartConfig from './modules/CartConfig';
import CheckoutConfig from './modules/CheckoutConfig';
import CheckoutConfig from "./modules/CheckoutConfig";
import MiniCartBootstap from './modules/MiniCartBootstap';
import SingleProductBootstap from './modules/SingleProductBootstap';
import CartBootstrap from './modules/CartBootstap';
import CheckoutBootstap from './modules/CheckoutBootstap';
import Renderer from './modules/Renderer';
const bootstrap = ()=> {
const context = PayPalCommerceGateway.context;
const bootstrap = () => {
const renderer = new Renderer;
const errorHandler = new ErrorHandler();
const cartConfigurator = new CartConfig(
const cartConfig = new CartConfig(
PayPalCommerceGateway,
errorHandler,
);
const checkoutConfig = new CheckoutConfig(
PayPalCommerceGateway,
errorHandler
);
// Configure mini cart buttons
if (document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)) {
const context = PayPalCommerceGateway.context;
const renderer = new Renderer(
PayPalCommerceGateway.button.mini_cart_wrapper
if (context === 'mini-cart' || context === 'product') {
const miniCartBootstap = new MiniCartBootstap(
PayPalCommerceGateway,
renderer,
cartConfig,
);
renderer.render(cartConfigurator.configuration())
}
jQuery( document.body ).on( 'wc_fragments_loaded wc_fragments_refreshed', () => {
if (! document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)) {
return;
}
const renderer = new Renderer(
PayPalCommerceGateway.button.mini_cart_wrapper
);
renderer.render(cartConfigurator.configuration())
} );
// Configure context buttons
if (! document.querySelector(PayPalCommerceGateway.button.wrapper)) {
return;
miniCartBootstap.init();
}
const renderer = new Renderer(
PayPalCommerceGateway.button.wrapper
);
let configurator = null;
if (context === 'product') {
if (! document.querySelector('form.cart')) {
return;
}
const updateCart = new UpdateCart(
PayPalCommerceGateway.ajax.change_cart.endpoint,
PayPalCommerceGateway.ajax.change_cart.nonce
);
configurator = new SingleProductConfig(
const singleProductBootstap = new SingleProductBootstap(
PayPalCommerceGateway,
updateCart,
renderer.showButtons.bind(renderer),
renderer.hideButtons.bind(renderer),
document.querySelector('form.cart'),
errorHandler
renderer,
);
singleProductBootstap.init();
}
if (context === 'cart') {
configurator = cartConfigurator;
jQuery( document.body ).on( 'updated_cart_totals updated_checkout', () => {
renderer.render(configurator.configuration())
});
}
if (context === 'checkout' ) {
configurator = new CheckoutConfig(
const cartBootstrap = new CartBootstrap(
PayPalCommerceGateway,
errorHandler
renderer,
cartConfig,
);
if (!document.querySelector(PayPalCommerceGateway.button.cancel_wrapper)) {
const toggleButtons = () => {
const currentPaymentMethod = jQuery('input[name="payment_method"]:checked').val();
if (currentPaymentMethod !== 'ppcp-gateway') {
renderer.hideButtons();
jQuery('#place_order').show();
} else {
renderer.showButtons();
jQuery('#place_order').hide();
}
}
jQuery(document.body).on('updated_checkout', () => {
renderer.render(configurator.configuration());
jQuery(document.body).trigger('payment_method_selected')
});
jQuery(document.body).on('payment_method_selected', toggleButtons );
toggleButtons();
}
}
if (! configurator) {
console.error('No context for button found.');
return;
cartBootstrap.init();
}
renderer.render(configurator.configuration());
}
if (context === 'checkout') {
const checkoutBootstap = new CheckoutBootstap(
PayPalCommerceGateway,
renderer,
checkoutConfig,
);
checkoutBootstap.init();
}
};
document.addEventListener(
'DOMContentLoaded',
() => {
if (! typeof(PayPalCommerceGateway)) {
if (!typeof (PayPalCommerceGateway)) {
console.error('PayPal button could not be configured.');
return;
}
const script = document.createElement('script');
script.setAttribute('src', PayPalCommerceGateway.button.url);
script.addEventListener('load', (event) => {
bootstrap();
})
});
document.body.append(script);
}
},
);

1
modules.local/ppcp-button/resources/js/modules/ButtonsToggleListener.js
View file

@ -24,6 +24,7 @@ class ButtonsToggleListener {
}
this.observer = new MutationObserver(callback);
this.observer.observe(this.element, config);
callback();
}
disconnect()

28
modules.local/ppcp-button/resources/js/modules/CartBootstap.js Normal file
View file

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

56
modules.local/ppcp-button/resources/js/modules/CheckoutBootstap.js Normal file
View file

@ -0,0 +1,56 @@
class CheckoutBootstap {
constructor(gateway, renderer, configurator) {
this.gateway = gateway;
this.renderer = renderer;
this.configurator = configurator;
}
init() {
if (!this.shouldRender()) {
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();
}
};
jQuery(document.body).on('updated_checkout', () => {
this.renderer.render(
buttonWrapper,
this.configurator.configuration(),
);
toggleButtons();
});
jQuery(document.body).on('payment_method_selected', () => {
toggleButtons();
});
this.renderer.render(
buttonWrapper,
this.configurator.configuration(),
);
}
shouldRender() {
if (document.querySelector(this.gateway.button.cancel_wrapper)) {
return false;
}
return document.querySelector(this.gateway.button.wrapper) !== null;
}
}
export default CheckoutBootstap;

29
modules.local/ppcp-button/resources/js/modules/MiniCartBootstap.js Normal file
View file

@ -0,0 +1,29 @@
class MiniCartBootstap {
constructor(gateway, renderer, configurator) {
this.gateway = gateway;
this.renderer = renderer;
this.configurator = configurator;
}
init() {
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;

30
modules.local/ppcp-button/resources/js/modules/Renderer.js
View file

@ -1,26 +1,24 @@
class Renderer {
constructor(wrapper)
{
this.wrapper = wrapper;
}
render(buttonConfig)
{
render(wrapper, buttonConfig) {
if (this.isAlreadyRendered(wrapper)) {
return;
}
paypal.Buttons(
buttonConfig
).render(this.wrapper);
buttonConfig,
).render(wrapper);
}
hideButtons()
{
document.querySelector(this.wrapper).style.display = 'none';
isAlreadyRendered(wrapper) {
return document.querySelector(wrapper).hasChildNodes();
}
showButtons()
{
document.querySelector(this.wrapper).style.display = 'block';
hideButtons(element) {
document.querySelector(element).style.display = 'none';
}
showButtons(element) {
document.querySelector(element).style.display = 'block';
}
}

50
modules.local/ppcp-button/resources/js/modules/SingleProductBootstap.js Normal file
View file

@ -0,0 +1,50 @@
import ErrorHandler from './ErrorHandler';
import UpdateCart from './UpdateCart';
import SingleProductConfig from './SingleProductConfig';
class SingleProductBootstap {
constructor(gateway, renderer) {
this.gateway = gateway;
this.renderer = renderer;
}
init() {
if (!this.shouldRender()) {
return;
}
const errorHandler = new ErrorHandler();
const updateCart = new UpdateCart(
this.gateway.ajax.change_cart.endpoint,
this.gateway.ajax.change_cart.nonce,
);
const buttonWrapper = this.gateway.button.wrapper;
const configurator = new SingleProductConfig(
this.gateway,
updateCart,
() => {
this.renderer.showButtons(buttonWrapper);
},
() => {
this.renderer.hideButtons(buttonWrapper);
},
document.querySelector('form.cart'),
errorHandler,
);
this.renderer.render(
buttonWrapper,
configurator.configuration(),
);
}
shouldRender() {
if (document.querySelector('form.cart') === null) {
return false;
}
return document.querySelector(this.gateway.button.wrapper) !== null;
}
}
export default SingleProductBootstap;