woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-08-31 04:58:28 +08:00
Code Issues Projects Packages Wiki Activity Actions 18

✨ Add Google Pay preview button to ACP tab

Browse source 
Note: `phpcbf` adjusted tons of whitespace.
This commit is contained in:
Philipp Stracker 2024-06-07 12:28:49 +02:00
parent b1cc83b238
commit c03f83f2e5
No known key found for this signature in database
3 changed files with 124 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

44
modules/ppcp-wc-gateway/resources/js/gateway-settings.js
View file

@ -4,6 +4,7 @@ import Renderer from '../../../ppcp-button/resources/js/modules/Renderer/Rendere
import MessageRenderer from "../../../ppcp-button/resources/js/modules/Renderer/MessageRenderer";
import {setVisibleByClass, isVisible} from "../../../ppcp-button/resources/js/modules/Helper/Hiding";
import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder";
import {wrap} from "../../../../.ddev/wordpress/wp-includes/js/dist/vendor/regenerator-runtime";
document.addEventListener(
'DOMContentLoaded',
@ -312,6 +313,7 @@ document.addEventListener(
const payLaterMessagingLocations = ['product', 'cart', 'checkout', 'shop', 'home', 'general'];
const paypalButtonLocations = ['product', 'cart', 'checkout', 'mini-cart', 'cart-block', 'checkout-block-express', 'general'];
// Default preview buttons; on "Standard Payments" tab.
paypalButtonLocations.forEach((location) => {
const inputNamePrefix = location === 'checkout' ? '#ppcp-button' : '#ppcp-button_' + location;
const wrapperName = location.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('');
@ -330,6 +332,48 @@ document.addEventListener(
createButtonPreview(() => getButtonSettings('#ppcp' + wrapperName + 'ButtonPreview', fields));
});
/**
* Inspect DOM to find APM button previews; on tabs like "Advanced Card Payments".
*
* How it works:
*
* 1. Add a <div> to hold the preview button to the settings page:
* - `id="ppcp[NAME]ButtonPreview"`
* - `data-ppc-apm-preview="[NAME]"`
* 2. Mark all fields that are relevant for the preview button:
* - custom_attribute: `data-ppcp-apm-name="[NAME]"`
* - custom_attribute: `data-ppcp-field-name="[FIELD]"`
*
* This block will find all marked input fields and trigger a re-render of the
* preview button when one of those fields value changes.
*
* Example: See the ppcp-google-pay "extensions.php" file.
*/
document.querySelectorAll('[data-ppcp-apm-preview]').forEach(item => {
const buttonType = item.dataset.ppcpApmPreview;
const fields = document.querySelectorAll(`[data-ppcp-apm-name="${buttonType}"]`)
const getSettings = () => {
const buttonConfig = {
wrapper: `#ppcp${buttonType}ButtonPreview`,
style: {},
};
fields.forEach(input => {
const field = input.dataset.ppcpFieldName;
buttonConfig.style[field] = input.value;
});
return { button: buttonConfig };
};
const renderButtonPreview = (settings) => {
jQuery(document).trigger(`ppcp_paypal_render_preview_${buttonType}`, settings);
};
renderPreview(getSettings, renderButtonPreview)
});
payLaterMessagingLocations.forEach((location) => {
const inputNamePrefix = '#ppcp-pay_later_' + location + '_message';
const wrapperName = location.charAt(0).toUpperCase() + location.slice(1);