Skip to content

Commit ec0dd52

Browse files
pedrosilva-ptpedrosilva-pt
committed
Adjustments to apm button layouts.
1 parent 55c7900 commit ec0dd52

File tree

11 files changed

+159
-174
lines changed

11 files changed

+159
-174
lines changed

‎modules/ppcp-applepay/resources/css/styles.scss

Lines changed: 15 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
.ppcp-button-applepay {
2+
// Should replicate apm-button.scss sizes.
3+
--apple-pay-button-height: 45px;
4+
--apple-pay-button-min-height: 35px;
5+
--apple-pay-button-width: 100%;
6+
--apple-pay-button-max-width: 750px;
7+
--apple-pay-button-border-radius: 4px;
8+
--apple-pay-button-overflow: hidden;
9+
210
.ppcp-width-min & {
311
--apple-pay-button-height: 35px;
412
}
@@ -8,14 +16,6 @@
816
.ppcp-width-500 & {
917
--apple-pay-button-height: 55px;
1018
}
11-
}
12-
13-
#applepay-container, .ppcp-button-applepay {
14-
--apple-pay-button-min-height: 35px;
15-
--apple-pay-button-width: 100%;
16-
--apple-pay-button-max-width: 750px;
17-
--apple-pay-button-border-radius: 4px;
18-
--apple-pay-button-overflow: hidden;
1919

2020
&.ppcp-button-pill {
2121
--apple-pay-button-border-radius: 50px;
@@ -26,41 +26,19 @@
2626
}
2727
}
2828

29-
.woocommerce-checkout {
30-
#applepay-container, .ppcp-button-applepay {
31-
--apple-pay-button-border-radius: 4px;
32-
&.ppcp-button-pill {
33-
--apple-pay-button-border-radius: 50px;
34-
}
35-
}
36-
}
37-
38-
.ppcp-has-applepay-block {
39-
40-
.wp-block-woocommerce-checkout {
41-
#applepay-container, .ppcp-button-applepay {
42-
margin: 0;
43-
--apple-pay-button-margin: 0;
44-
--apple-pay-button-height: 48px;
45-
&.ppcp-button-pill {
46-
--apple-pay-button-border-radius: 50px;
47-
}
48-
}
49-
}
29+
.wp-block-woocommerce-checkout, .wp-block-woocommerce-cart {
30+
.ppcp-button-applepay {
31+
--apple-pay-button-margin: 0;
5032

51-
.wp-block-woocommerce-cart {
52-
#applepay-container, .ppcp-button-applepay {
53-
margin: 0;
54-
--apple-pay-button-margin: 0;
55-
--apple-pay-button-height: 48px;
33+
apple-pay-button {
34+
min-width: 0;
35+
width: 100%;
36+
--apple-pay-button-width-default: 100%;
5637
}
5738
}
5839
}
5940

6041
.wp-admin {
61-
.ppcp-button-applepay {
62-
pointer-events: none;
63-
}
6442
&.ppcp-non-ios-device {
6543
.ppcp-button-applepay {
6644
apple-pay-button {
@@ -69,10 +47,3 @@
6947
}
7048
}
7149
}
72-
73-
// todo remove
74-
.ppcp-button-applepay {
75-
apple-pay-button {
76-
display: block !important;
77-
}
78-
}

‎modules/ppcp-applepay/resources/js/ApplepayButton.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import {setEnabled} from '../../../ppcp-button/resources/js/modules/Helper/Butto
55
import FormValidator from "../../../ppcp-button/resources/js/modules/Helper/FormValidator";
66
import ErrorHandler from '../../../ppcp-button/resources/js/modules/ErrorHandler';
77
import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder";
8-
import {apmButtonInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButton";
8+
import {apmButtonsInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButtons";
99

1010
class ApplepayButton {
1111

1212
constructor(context, externalHandler, buttonConfig, ppcpConfig) {
13-
apmButtonInit();
13+
apmButtonsInit();
1414

1515
this.isInitialized = false;
1616

@@ -63,7 +63,7 @@ class ApplepayButton {
6363
this.initEventHandlers();
6464
this.isInitialized = true;
6565
this.applePayConfig = config;
66-
const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin || true; // todo remove
66+
const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin;
6767

6868
if (isEligible) {
6969
this.fetchTransactionInfo().then(() => {

‎modules/ppcp-applepay/resources/js/boot-block.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,6 @@ const ApplePayComponent = () => {
2323
const manager = new ApplepayManager(buttonConfig, ppcpConfig);
2424
manager.init();
2525
};
26-
useEffect(() => {
27-
const bodyClass = 'ppcp-has-applepay-block';
28-
if (!document.body.classList.contains(bodyClass)) {
29-
document.body.classList.add(bodyClass);
30-
}
31-
}, []);
3226

3327
useEffect(() => {
3428
// Load ApplePay SDK

‎modules/ppcp-blocks/resources/css/gateway.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,14 @@
22

33
li[id^="express-payment-method-ppcp-"] {
44
line-height: 0;
5+
6+
// Set min-width to 0 as the buttons need to fit in a tight grid.
7+
.paypal-buttons {
8+
min-width: 0 !important;
9+
}
510
}
611

712
.ppcp-button-apm {
813
@include apm-button.button;
914
}
15+

‎modules/ppcp-button/resources/css/gateway.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
line-height: 0;
2424
}
2525

26+
#ppc-button-minicart {
27+
line-height: 0;
28+
display: block;
29+
}
30+
2631
.ppcp-button-apm {
2732
@include apm-button.button;
2833
}

‎modules/ppcp-button/resources/css/mixins/apm-button.scss

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,22 @@
11

22
@mixin button {
3-
min-width: 200px;
3+
overflow: hidden;
4+
min-width: 0;
45
max-width: 750px;
56
line-height: 0;
7+
border-radius: 4px;
8+
9+
// Defaults
10+
height: 45px;
11+
margin-top: 14px;
12+
13+
&.ppcp-button-pill {
14+
border-radius: 50px;
15+
}
16+
17+
&.ppcp-button-minicart {
18+
display: block;
19+
}
620

721
.ppcp-width-min & {
822
height: 35px;
@@ -15,4 +29,14 @@
1529
.ppcp-width-500 & {
1630
height: 55px;
1731
}
32+
33+
// No margin on block layout.
34+
.wp-block-woocommerce-checkout &, .wp-block-woocommerce-cart & {
35+
margin: 0;
36+
min-width: 0;
37+
}
38+
39+
.wp-admin & {
40+
pointer-events: none;
41+
}
1842
}

‎modules/ppcp-button/resources/js/modules/Helper/ApmButton.js

Lines changed: 0 additions & 83 deletions
This file was deleted.

‎modules/ppcp-button/resources/js/modules/Helper/ApmButtons.js

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
2+
export const apmButtonsInit = (selector = '.ppcp-button-apm') => {
3+
if (window.ppcpApmButtons) {
4+
return;
5+
}
6+
window.ppcpApmButtons = new ApmButtons(selector);
7+
}
8+
9+
export class ApmButtons {
10+
11+
constructor(selector) {
12+
this.selector = selector;
13+
this.containers = [];
14+
15+
// Reloads button containers.
16+
this.reloadContainers();
17+
18+
// Refresh button layout.
19+
jQuery(window).resize(() => {
20+
this.refresh();
21+
}).resize();
22+
23+
// Observes for new buttons.
24+
(new MutationObserver(this.observeElementsCallback.bind(this)))
25+
.observe(document.body, { childList: true, subtree: true });
26+
}
27+
28+
observeElementsCallback(mutationsList, observer) {
29+
const observeSelector = this.selector + ', .widget_shopping_cart, .widget_shopping_cart_content';
30+
31+
let shouldReload = false;
32+
for (let mutation of mutationsList) {
33+
if (mutation.type === 'childList') {
34+
mutation.addedNodes.forEach(node => {
35+
if (node.matches && node.matches(observeSelector)) {
36+
shouldReload = true;
37+
}
38+
});
39+
}
40+
}
41+
42+
if (shouldReload) {
43+
this.reloadContainers();
44+
this.refresh();
45+
}
46+
};
47+
48+
reloadContainers() {
49+
jQuery(this.selector).each((index, el) => {
50+
const parent = jQuery(el).parent();
51+
if (!this.containers.some($el => $el.is(parent))) {
52+
this.containers.push(parent);
53+
}
54+
});
55+
console.log('this.containers', this.containers);
56+
}
57+
58+
refresh() {
59+
for (const container of this.containers) {
60+
const $container = jQuery(container);
61+
62+
// Check width and add classes
63+
const width = $container.width();
64+
65+
$container.removeClass('ppcp-width-500 ppcp-width-300 ppcp-width-min');
66+
67+
if (width >= 500) {
68+
$container.addClass('ppcp-width-500');
69+
} else if (width >= 300) {
70+
$container.addClass('ppcp-width-300');
71+
} else {
72+
$container.addClass('ppcp-width-min');
73+
}
74+
75+
// Check first apm button
76+
const $firstApmButton = $container.find(this.selector + ':visible').first();
77+
const $firstElement = $container.children(':visible').first();
78+
79+
let isFirstElement = false;
80+
if ($firstApmButton.is($firstElement)) {
81+
isFirstElement = true;
82+
}
83+
84+
// Assign margins to buttons
85+
$container.find(this.selector).each((index, el) => {
86+
const $el = jQuery(el);
87+
const height = $el.height();
88+
89+
if (isFirstElement) {
90+
$el.css('margin-top', `0px`);
91+
return true;
92+
}
93+
94+
$el.css('margin-top', `${Math.round(height * 0.3)}px`);
95+
});
96+
97+
}
98+
}
99+
100+
}

0 commit comments

Comments
 (0)