woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 16:24:33 +08:00
Code Issues Projects Packages Wiki Activity Actions

Merge pull request #1908 from woocommerce/PCP-2468-incorrect-margins-when-pay-pal-buttons-are-rendered-as-separate-gateways

Browse source 
Incorrect margins when PayPal buttons are rendered as separate gateways. (2468)
This commit is contained in:
Emili Castells 2023-12-18 14:58:01 +01:00 • committed by GitHub
commit 26cff0154b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
modules/ppcp-applepay/resources/js/ApplepayButton.js
View file

@ -10,7 +10,7 @@ import {apmButtonsInit} from "../../../ppcp-button/resources/js/modules/Helper/A
class ApplepayButton { class ApplepayButton {
constructor(context, externalHandler, buttonConfig, ppcpConfig) { constructor(context, externalHandler, buttonConfig, ppcpConfig) {
apmButtonsInit(); apmButtonsInit(ppcpConfig);
this.isInitialized = false; this.isInitialized = false;

7
modules/ppcp-button/resources/css/gateway.scss
View file

@ -21,6 +21,13 @@
// Prevents spacing after button group. // Prevents spacing after button group.
#ppc-button-ppcp-gateway { #ppc-button-ppcp-gateway {
line-height: 0; line-height: 0;
div[class^="item-"] {
margin-top: 14px;
&:first-child {
margin-top: 0;
}
}
} }
#ppc-button-minicart { #ppc-button-minicart {

4
modules/ppcp-button/resources/js/button.js
View file

@ -22,6 +22,7 @@ import FormValidator from "./modules/Helper/FormValidator";
import {loadPaypalScript} from "./modules/Helper/ScriptLoading"; import {loadPaypalScript} from "./modules/Helper/ScriptLoading";
import buttonModuleWatcher from "./modules/ButtonModuleWatcher"; import buttonModuleWatcher from "./modules/ButtonModuleWatcher";
import MessagesBootstrap from "./modules/ContextBootstrap/MessagesBootstap"; import MessagesBootstrap from "./modules/ContextBootstrap/MessagesBootstap";
import {apmButtonsInit} from "./modules/Helper/ApmButtons";
// TODO: could be a good idea to have a separate spinner for each gateway, // TODO: could be a good idea to have a separate spinner for each gateway,
// but I think we care mainly about the script loading, so one spinner should be enough. // but I think we care mainly about the script loading, so one spinner should be enough.
@ -145,6 +146,7 @@ const bootstrap = () => {
}; };
const onSmartButtonsInit = () => { const onSmartButtonsInit = () => {
jQuery(document).trigger('ppcp-smart-buttons-init', this);
buttonsSpinner.unblock(); buttonsSpinner.unblock();
}; };
const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick, onSmartButtonsInit); const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick, onSmartButtonsInit);
@ -217,6 +219,8 @@ const bootstrap = () => {
messageRenderer, messageRenderer,
); );
messagesBootstrap.init(); messagesBootstrap.init();
apmButtonsInit(PayPalCommerceGateway);
}; };
document.addEventListener( document.addEventListener(

28
modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js
View file

@ -1,15 +1,31 @@
export const apmButtonsInit = (selector = '.ppcp-button-apm') => { export const apmButtonsInit = (config, selector = '.ppcp-button-apm') => {
let selectorInContainer = selector;
if (window.ppcpApmButtons) { if (window.ppcpApmButtons) {
return; return;
} }
window.ppcpApmButtons = new ApmButtons(selector);
if (config && config.button) {
// If it's separate gateways, modify wrapper to account for the individual buttons as individual APMs.
const wrapper = config.button.wrapper;
const isSeparateGateways = jQuery(wrapper).children('div[class^="item-"]').length > 0;
if (isSeparateGateways) {
selector += `, ${wrapper} div[class^="item-"]`;
selectorInContainer += `, div[class^="item-"]`;
}
}
window.ppcpApmButtons = new ApmButtons(selector, selectorInContainer);
} }
export class ApmButtons { export class ApmButtons {
constructor(selector) { constructor(selector, selectorInContainer) {
this.selector = selector; this.selector = selector;
this.selectorInContainer = selectorInContainer;
this.containers = []; this.containers = [];
// Reloads button containers. // Reloads button containers.
@ -20,6 +36,10 @@ export class ApmButtons {
this.refresh(); this.refresh();
}).resize(); }).resize();
jQuery(document).on('ppcp-smart-buttons-init', () => {
this.refresh();
});
// Observes for new buttons. // Observes for new buttons.
(new MutationObserver(this.observeElementsCallback.bind(this))) (new MutationObserver(this.observeElementsCallback.bind(this)))
.observe(document.body, { childList: true, subtree: true }); .observe(document.body, { childList: true, subtree: true });
@ -76,7 +96,7 @@ export class ApmButtons {
const $firstElement = $container.children(':visible').first(); const $firstElement = $container.children(':visible').first();
// Assign margins to buttons // Assign margins to buttons
$container.find(this.selector).each((index, el) => { $container.find(this.selectorInContainer).each((index, el) => {
const $el = jQuery(el); const $el = jQuery(el);
if ($el.is($firstElement)) { if ($el.is($firstElement)) {

2
modules/ppcp-googlepay/resources/js/GooglepayButton.js
View file

@ -8,7 +8,7 @@ import {apmButtonsInit} from "../../../ppcp-button/resources/js/modules/Helper/A
class GooglepayButton { class GooglepayButton {
constructor(context, externalHandler, buttonConfig, ppcpConfig) { constructor(context, externalHandler, buttonConfig, ppcpConfig) {
apmButtonsInit(); apmButtonsInit(ppcpConfig);
this.isInitialized = false; this.isInitialized = false;