mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-03 08:37:53 +08:00
Add card button preview
This commit is contained in:
parent
c72a335cdd
commit
6c933e52c3
2 changed files with 39 additions and 3 deletions
|
@ -77,7 +77,8 @@ document.addEventListener(
|
|||
|
||||
function createButtonPreview(settingsCallback) {
|
||||
const render = (settings) => {
|
||||
const wrapper = document.querySelector(settings.button.wrapper);
|
||||
const wrapperSelector = Object.values(settings.separate_buttons).length > 0 ? Object.values(settings.separate_buttons)[0].wrapper : settings.button.wrapper;
|
||||
const wrapper = document.querySelector(wrapperSelector);
|
||||
if (!wrapper) {
|
||||
return;
|
||||
}
|
||||
|
@ -171,7 +172,7 @@ document.addEventListener(
|
|||
.catch((error) => console.error('failed to load the PayPal JS SDK script', error));
|
||||
}
|
||||
|
||||
function getButtonSettings(wrapperSelector, fields) {
|
||||
function getButtonSettings(wrapperSelector, fields, apm = null) {
|
||||
const layoutElement = jQuery(fields['layout']);
|
||||
const layout = (layoutElement.length && layoutElement.is(':visible')) ? layoutElement.val() : 'vertical';
|
||||
const style = {
|
||||
|
@ -184,13 +185,24 @@ document.addEventListener(
|
|||
if ('height' in fields) {
|
||||
style['height'] = parseInt(jQuery(fields['height']).val());
|
||||
}
|
||||
return {
|
||||
if ('poweredby_tagline' in fields) {
|
||||
style['layout'] = jQuery(fields['poweredby_tagline']).is(':checked') ? 'vertical' : 'horizontal';
|
||||
}
|
||||
const settings = {
|
||||
'button': {
|
||||
'wrapper': wrapperSelector,
|
||||
'style': style,
|
||||
},
|
||||
'separate_buttons': {},
|
||||
};
|
||||
if (apm) {
|
||||
settings.separate_buttons[apm] = {
|
||||
'wrapper': wrapperSelector,
|
||||
'style': style,
|
||||
};
|
||||
settings.button.wrapper = null;
|
||||
}
|
||||
return settings;
|
||||
}
|
||||
|
||||
function createMessagesPreview(settingsCallback) {
|
||||
|
@ -333,6 +345,13 @@ document.addEventListener(
|
|||
});
|
||||
|
||||
createButtonPreview(() => getButtonDefaultSettings('#ppcpPayLaterButtonPreview'));
|
||||
|
||||
const apmFieldPrefix = '#ppcp-card_button_';
|
||||
createButtonPreview(() => getButtonSettings('#ppcpCardButtonPreview', {
|
||||
'color': apmFieldPrefix + 'color',
|
||||
'shape': apmFieldPrefix + 'shape',
|
||||
'poweredby_tagline': apmFieldPrefix + 'poweredby_tagline',
|
||||
}, 'card'));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue