mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
show buttons on mini-cart and cart
This commit is contained in:
parent
cc732840b1
commit
41f86426d8
6 changed files with 125 additions and 39 deletions
|
@ -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());
|
||||
}
|
||||
);
|
42
modules.local/ppcp-button/resources/js/modules/CartConfig.js
Normal file
42
modules.local/ppcp-button/resources/js/modules/CartConfig.js
Normal 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;
|
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue