diff --git a/modules/ppcp-applepay/resources/js/ApplepayButton.js b/modules/ppcp-applepay/resources/js/ApplepayButton.js index babca29f3..d9d971ff9 100644 --- a/modules/ppcp-applepay/resources/js/ApplepayButton.js +++ b/modules/ppcp-applepay/resources/js/ApplepayButton.js @@ -10,7 +10,7 @@ import {apmButtonsInit} from "../../../ppcp-button/resources/js/modules/Helper/A class ApplepayButton { constructor(context, externalHandler, buttonConfig, ppcpConfig) { - apmButtonsInit(); + apmButtonsInit(ppcpConfig); this.isInitialized = false; diff --git a/modules/ppcp-button/resources/css/gateway.scss b/modules/ppcp-button/resources/css/gateway.scss index 40326c921..ee848f0cd 100644 --- a/modules/ppcp-button/resources/css/gateway.scss +++ b/modules/ppcp-button/resources/css/gateway.scss @@ -21,6 +21,13 @@ // Prevents spacing after button group. #ppc-button-ppcp-gateway { line-height: 0; + + div[class^="item-"] { + margin-top: 14px; + &:first-child { + margin-top: 0; + } + } } #ppc-button-minicart { diff --git a/modules/ppcp-button/resources/js/button.js b/modules/ppcp-button/resources/js/button.js index e0cd517ab..40997d15a 100644 --- a/modules/ppcp-button/resources/js/button.js +++ b/modules/ppcp-button/resources/js/button.js @@ -22,6 +22,7 @@ import FormValidator from "./modules/Helper/FormValidator"; import {loadPaypalScript} from "./modules/Helper/ScriptLoading"; import buttonModuleWatcher from "./modules/ButtonModuleWatcher"; 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, // but I think we care mainly about the script loading, so one spinner should be enough. @@ -145,6 +146,7 @@ const bootstrap = () => { }; const onSmartButtonsInit = () => { + jQuery(document).trigger('ppcp-smart-buttons-init', this); buttonsSpinner.unblock(); }; const renderer = new Renderer(creditCardRenderer, PayPalCommerceGateway, onSmartButtonClick, onSmartButtonsInit); @@ -217,6 +219,8 @@ const bootstrap = () => { messageRenderer, ); messagesBootstrap.init(); + + apmButtonsInit(PayPalCommerceGateway); }; document.addEventListener( diff --git a/modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js b/modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js index 97242f615..ebe0d5051 100644 --- a/modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js +++ b/modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js @@ -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) { 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 { - constructor(selector) { + constructor(selector, selectorInContainer) { this.selector = selector; + this.selectorInContainer = selectorInContainer; this.containers = []; // Reloads button containers. @@ -20,6 +36,10 @@ export class ApmButtons { this.refresh(); }).resize(); + jQuery(document).on('ppcp-smart-buttons-init', () => { + this.refresh(); + }); + // Observes for new buttons. (new MutationObserver(this.observeElementsCallback.bind(this))) .observe(document.body, { childList: true, subtree: true }); @@ -76,7 +96,7 @@ export class ApmButtons { const $firstElement = $container.children(':visible').first(); // Assign margins to buttons - $container.find(this.selector).each((index, el) => { + $container.find(this.selectorInContainer).each((index, el) => { const $el = jQuery(el); if ($el.is($firstElement)) { diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js index 5200743a0..3331a4d49 100644 --- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js +++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js @@ -8,7 +8,7 @@ import {apmButtonsInit} from "../../../ppcp-button/resources/js/modules/Helper/A class GooglepayButton { constructor(context, externalHandler, buttonConfig, ppcpConfig) { - apmButtonsInit(); + apmButtonsInit(ppcpConfig); this.isInitialized = false;