show buttons on mini-cart and cart

This commit is contained in:
David Remer 2020-04-08 12:33:34 +03:00
parent cc732840b1
commit 41f86426d8
6 changed files with 125 additions and 39 deletions

View file

@ -2,6 +2,7 @@ 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";
document.addEventListener(
'DOMContentLoaded',
@ -10,38 +11,66 @@ document.addEventListener(
console.error('PayPal button could not be configured.');
return;
}
if (! document.querySelector(PayPalCommerceGateway.button.wrapper)) {
console.error('No wrapper for PayPal button found.');
return;
}
const context = PayPalCommerceGateway.context;
if (context === 'product' && ! document.querySelector('form.cart') ) {
return;
}
const errorHandler = new ErrorHandler();
const renderer = new Renderer({
url: PayPalCommerceGateway.button.url,
wrapper:PayPalCommerceGateway.button.wrapper
});
const updateCart = new UpdateCart(
PayPalCommerceGateway.ajax.change_cart.endpoint,
PayPalCommerceGateway.ajax.change_cart.nonce
);
let configurator = null;
if (context === 'product') {
configurator = new SingleProductConfig(
const defaultConfigurator = new CartConfig(
PayPalCommerceGateway,
updateCart,
renderer.showButtons.bind(renderer),
renderer.hideButtons.bind(renderer),
document.querySelector('form.cart'),
errorHandler
);
}
if (! configurator) {
console.error('No context for button found.');
return;
}
renderer.render(configurator.configuration());
// Configure mini cart buttons
if (document.querySelector(PayPalCommerceGateway.button.mini_cart_wrapper)) {
const renderer = new Renderer(
PayPalCommerceGateway.button.url,
PayPalCommerceGateway.button.mini_cart_wrapper
);
renderer.render(defaultConfigurator.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.url,
PayPalCommerceGateway.button.mini_cart_wrapper
);
renderer.render(defaultConfigurator.configuration())
} );
// Configure context buttons
if (! document.querySelector(PayPalCommerceGateway.button.wrapper)) {
return;
}
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(
PayPalCommerceGateway,
updateCart,
renderer.showButtons.bind(renderer),
renderer.hideButtons.bind(renderer),
document.querySelector('form.cart'),
errorHandler
);
}
if (context === 'cart') {
configurator = defaultConfigurator;
}
if (! configurator) {
console.error('No context for button found.');
return;
}
const renderer = new Renderer(
PayPalCommerceGateway.button.url,
PayPalCommerceGateway.button.wrapper
);
renderer.render(configurator.configuration());
}
);

View file

@ -0,0 +1,42 @@
class CartConfig {
constructor(config, errorHandler) {
this.config = config;
this.errorHandler = errorHandler;
}
configuration() {
const createOrder = (data, actions) => {
return fetch(this.config.ajax.create_order.endpoint, {
method: 'POST',
body: JSON.stringify({
nonce: this.config.ajax.create_order.nonce,
purchase_units:[]
})
}).then(function (res) {
return res.json();
}).then(function (data) {
if (!data.success) {
//Todo: Error handling
return;
}
return data.data.id;
});
}
const onApprove = (data, actions) => {
return actions.redirect(this.config.redirect);
}
return {
createOrder,
onApprove,
onError: (error) => {
this.errorHandler.message(error);
}
}
}
}
export default CartConfig;

View file

@ -1,8 +1,9 @@
class Renderer {
constructor(config)
constructor(url, wrapper)
{
this.config = config;
this.url = url;
this.wrapper = wrapper;
}
render(buttonConfig)
@ -11,7 +12,7 @@ class Renderer {
const script = document.createElement('script');
if (typeof paypal !== 'object') {
script.setAttribute('src', this.config.url);
script.setAttribute('src', this.url);
script.addEventListener('load', (event) => {
this.renderButtons(buttonConfig);
})
@ -27,17 +28,17 @@ class Renderer {
paypal.Buttons(
buttonConfig
).render(this.config.wrapper);
).render(this.wrapper);
}
hideButtons()
{
document.querySelector(this.config.wrapper).style.display = 'none';
document.querySelector(this.wrapper).style.display = 'none';
}
showButtons()
{
document.querySelector(this.config.wrapper).style.display = 'block';
document.querySelector(this.wrapper).style.display = 'block';
}
}