mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-30 05:00:51 +08:00
Fix apm button styling
This commit is contained in:
Pedro Silva
parent
45516d0075
commit
46c575a401
16 changed files with 163 additions and 32 deletions
|
|
@ -1,26 +1,34 @@
|
|||
#applepay-container, .ppcp-button-applepay {
|
||||
.ppcp-button-applepay {
|
||||
.ppcp-width-min & {
|
||||
--apple-pay-button-height: 35px;
|
||||
}
|
||||
.ppcp-width-300 & {
|
||||
--apple-pay-button-height: 45px;
|
||||
--apple-pay-button-min-height: 40px;
|
||||
}
|
||||
.ppcp-width-500 & {
|
||||
--apple-pay-button-height: 55px;
|
||||
}
|
||||
}
|
||||
|
||||
#applepay-container, .ppcp-button-applepay {
|
||||
--apple-pay-button-min-height: 35px;
|
||||
--apple-pay-button-width: 100%;
|
||||
--apple-pay-button-max-width: 750px;
|
||||
--apple-pay-button-border-radius: 4px;
|
||||
--apple-pay-button-overflow: hidden;
|
||||
margin:7px 0;
|
||||
|
||||
&.ppcp-button-pill {
|
||||
--apple-pay-button-border-radius: 50px;
|
||||
}
|
||||
|
||||
&.ppcp-button-minicart {
|
||||
--apple-pay-button-display: block;
|
||||
--apple-pay-button-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-checkout {
|
||||
#applepay-container, .ppcp-button-applepay {
|
||||
margin-top: 0;
|
||||
--apple-pay-button-border-radius: 4px;
|
||||
--apple-pay-button-height: 45px;
|
||||
&.ppcp-button-pill {
|
||||
--apple-pay-button-border-radius: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,13 @@ import {setEnabled} from '../../../ppcp-button/resources/js/modules/Helper/Butto
|
|||
import FormValidator from "../../../ppcp-button/resources/js/modules/Helper/FormValidator";
|
||||
import ErrorHandler from '../../../ppcp-button/resources/js/modules/ErrorHandler';
|
||||
import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder";
|
||||
import {apmButtonInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButton";
|
||||
|
||||
class ApplepayButton {
|
||||
|
||||
constructor(context, externalHandler, buttonConfig, ppcpConfig) {
|
||||
apmButtonInit();
|
||||
|
||||
this.isInitialized = false;
|
||||
|
||||
this.context = context;
|
||||
|
|
@ -60,7 +63,7 @@ class ApplepayButton {
|
|||
this.initEventHandlers();
|
||||
this.isInitialized = true;
|
||||
this.applePayConfig = config;
|
||||
const isEligible = this.applePayConfig.isEligible;
|
||||
const isEligible = (this.applePayConfig.isEligible && window.ApplePaySession) || this.buttonConfig.is_admin;
|
||||
|
||||
if (isEligible) {
|
||||
this.fetchTransactionInfo().then(() => {
|
||||
|
|
@ -84,6 +87,10 @@ class ApplepayButton {
|
|||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
jQuery('#' + this.buttonConfig.button.wrapper).hide();
|
||||
jQuery('#' + this.buttonConfig.button.mini_cart_wrapper).hide();
|
||||
jQuery('#express-payment-method-ppcp-applepay').hide();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -179,13 +186,15 @@ class ApplepayButton {
|
|||
appleContainer.innerHTML = `<apple-pay-button id="${id}" buttonstyle="${color}" type="${type}" locale="${language}">`;
|
||||
}
|
||||
|
||||
jQuery('#' + wrapper).addClass('ppcp-button-' + ppcpStyle.shape);
|
||||
const $wrapper = jQuery('#' + wrapper);
|
||||
$wrapper.addClass('ppcp-button-' + ppcpStyle.shape);
|
||||
|
||||
if (ppcpStyle.height) {
|
||||
jQuery('#' + wrapper).css('--apple-pay-button-height', `${ppcpStyle.height}px`)
|
||||
$wrapper.css('--apple-pay-button-height', `${ppcpStyle.height}px`)
|
||||
$wrapper.css('height', `${ppcpStyle.height}px`)
|
||||
}
|
||||
|
||||
jQuery(wrapper).append(appleContainer);
|
||||
jQuery(wrapper).append(appleContainer); // ToDo: this selector doesnt seem valid.
|
||||
}
|
||||
|
||||
//------------------------
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/Wi
|
|||
buttonConfig.button.wrapper = selector.replace('#', '');
|
||||
applyConfigOptions(buttonConfig);
|
||||
|
||||
const wrapperElement = `<div id="${selector.replace('#', '')}" class="ppcp-button-applepay"></div>`;
|
||||
const wrapperElement = `<div id="${selector.replace('#', '')}" class="ppcp-button-apm ppcp-button-applepay"></div>`;
|
||||
|
||||
if (!jQuery(selector).length) {
|
||||
jQuery(ppcpConfig.button.wrapper).after(wrapperElement);
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ const ApplePayComponent = () => {
|
|||
}, [paypalLoaded, applePayLoaded]);
|
||||
|
||||
return (
|
||||
<div id={buttonConfig.button.wrapper.replace('#', '')}></div>
|
||||
<div id={buttonConfig.button.wrapper.replace('#', '')} className="ppcp-button-apm ppcp-button-applepay"></div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -968,7 +968,7 @@ class ApplePayButton implements ButtonInterface {
|
|||
add_action(
|
||||
$render_placeholder,
|
||||
function () {
|
||||
echo '<span id="applepay-container-minicart" class="ppcp-button-applepay ppcp-button-minicart"></span>';
|
||||
echo '<span id="applepay-container-minicart" class="ppcp-button-apm ppcp-button-applepay ppcp-button-minicart"></span>';
|
||||
},
|
||||
21
|
||||
);
|
||||
|
|
@ -981,7 +981,7 @@ class ApplePayButton implements ButtonInterface {
|
|||
*/
|
||||
protected function applepay_button(): void {
|
||||
?>
|
||||
<div id="applepay-container">
|
||||
<div id="applepay-container" class="ppcp-button-apm ppcp-button-applepay">
|
||||
<?php wp_nonce_field( 'woocommerce-process_checkout', 'woocommerce-process-checkout-nonce' ); ?>
|
||||
</div>
|
||||
<?php
|
||||
|
|
|
|||
|
|
@ -149,6 +149,7 @@ class DataToAppleButtonScripts {
|
|||
return array(
|
||||
'sdk_url' => $this->sdk_url,
|
||||
'is_debug' => defined( 'WP_DEBUG' ) && WP_DEBUG ? true : false,
|
||||
'is_admin' => false,
|
||||
'preferences' => array(
|
||||
'checkout_data_mode' => $checkout_data_mode,
|
||||
),
|
||||
|
|
@ -204,6 +205,7 @@ class DataToAppleButtonScripts {
|
|||
return array(
|
||||
'sdk_url' => $this->sdk_url,
|
||||
'is_debug' => defined( 'WP_DEBUG' ) && WP_DEBUG ? true : false,
|
||||
'is_admin' => false,
|
||||
'preferences' => array(
|
||||
'checkout_data_mode' => $checkout_data_mode,
|
||||
),
|
||||
|
|
@ -252,6 +254,7 @@ class DataToAppleButtonScripts {
|
|||
return array(
|
||||
'sdk_url' => $this->sdk_url,
|
||||
'is_debug' => defined( 'WP_DEBUG' ) && WP_DEBUG ? true : false,
|
||||
'is_admin' => true,
|
||||
'preferences' => array(
|
||||
'checkout_data_mode' => $checkout_data_mode,
|
||||
),
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@use "mixins/apm-button" as apm-button;
|
||||
|
||||
#place_order.ppcp-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
@ -15,3 +17,12 @@
|
|||
.ppc-button-wrapper #ppcp-messages:first-child {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
// Prevents spacing after button group.
|
||||
#ppc-button-ppcp-gateway {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.ppcp-button-apm {
|
||||
@include apm-button.button;
|
||||
}
|
||||
|
|
|
|||
18
modules/ppcp-button/resources/css/mixins/apm-button.scss
Normal file
18
modules/ppcp-button/resources/css/mixins/apm-button.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
|
||||
@mixin button {
|
||||
min-width: 200px;
|
||||
max-width: 750px;
|
||||
line-height: 0;
|
||||
|
||||
.ppcp-width-min & {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.ppcp-width-300 & {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.ppcp-width-500 & {
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
83
modules/ppcp-button/resources/js/modules/Helper/ApmButton.js
Normal file
83
modules/ppcp-button/resources/js/modules/Helper/ApmButton.js
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
|
||||
export const apmButtonInit = (selector = '.ppcp-button-apm') => {
|
||||
if (window.apmButton) {
|
||||
return;
|
||||
}
|
||||
window.apmButton = new ApmButton(selector);
|
||||
}
|
||||
|
||||
export class ApmButton {
|
||||
|
||||
constructor(selector) {
|
||||
this.selector = selector;
|
||||
this.containers = [];
|
||||
|
||||
jQuery(window).resize(() => {
|
||||
this.refresh();
|
||||
}).resize();
|
||||
|
||||
// TODO: detect changes don't rely on setInterval
|
||||
setInterval(() => {
|
||||
jQuery(selector).each((index, el) => {
|
||||
const parent = jQuery(el).parent();
|
||||
if (!this.containers.some($el => $el.is(parent))) {
|
||||
this.containers.push(parent);
|
||||
}
|
||||
});
|
||||
|
||||
this.refresh();
|
||||
}, 100);
|
||||
}
|
||||
|
||||
refresh() {
|
||||
for (const container of this.containers) {
|
||||
const containerClasses = [];
|
||||
const $container = jQuery(container);
|
||||
|
||||
// Check width and add classes
|
||||
const width = $container.width();
|
||||
|
||||
if (width >= 500) {
|
||||
containerClasses.push('ppcp-width-500');
|
||||
} else if (width >= 300) {
|
||||
containerClasses.push('ppcp-width-300');
|
||||
} else {
|
||||
containerClasses.push('ppcp-width-min');
|
||||
}
|
||||
|
||||
$container.removeClass('ppcp-width-500 ppcp-width-300 ppcp-width-min');
|
||||
$container.addClass(containerClasses.join(' '));
|
||||
|
||||
// Check first apm button
|
||||
const $firstApmButton = $container.find(this.selector + ':visible').first();
|
||||
const $firstElement = $container.children(':visible').first();
|
||||
|
||||
let $spacingTopButton = null;
|
||||
if (!$firstApmButton.is($firstElement)) {
|
||||
$spacingTopButton = $firstApmButton;
|
||||
}
|
||||
|
||||
// Check last apm button
|
||||
const $lastApmButton = $container.find(this.selector + ':visible').last();
|
||||
|
||||
// Assign margins to buttons
|
||||
$container.find(this.selector).each((index, el) => {
|
||||
const $el = jQuery(el);
|
||||
const height = $el.height();
|
||||
|
||||
if ($el.is($spacingTopButton)) {
|
||||
$el.css('margin-top', `${Math.round(height * 0.3)}px`);
|
||||
}
|
||||
|
||||
if ($el.is($lastApmButton)) {
|
||||
$el.css('margin-bottom', `0px`);
|
||||
return true;
|
||||
}
|
||||
|
||||
$el.css('margin-bottom', `${Math.round(height * 0.3)}px`);
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
.ppcp-button-googlepay {
|
||||
margin: 7px 0;
|
||||
overflow: hidden;
|
||||
min-height: 40px;
|
||||
height: 45px;
|
||||
|
||||
&.ppcp-button-pill {
|
||||
border-radius: 50px;
|
||||
|
|
@ -10,13 +8,6 @@
|
|||
|
||||
&.ppcp-button-minicart {
|
||||
display: block;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-checkout {
|
||||
.ppcp-button-googlepay {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -25,14 +16,12 @@
|
|||
.wp-block-woocommerce-checkout {
|
||||
.ppcp-button-googlepay {
|
||||
margin: 0;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-woocommerce-cart {
|
||||
.ppcp-button-googlepay {
|
||||
margin: 0;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,10 +3,13 @@ import {setVisible} from '../../../ppcp-button/resources/js/modules/Helper/Hidin
|
|||
import {setEnabled} from '../../../ppcp-button/resources/js/modules/Helper/ButtonDisabler';
|
||||
import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder";
|
||||
import UpdatePaymentData from "./Helper/UpdatePaymentData";
|
||||
import {apmButtonInit} from "../../../ppcp-button/resources/js/modules/Helper/ApmButton";
|
||||
|
||||
class GooglepayButton {
|
||||
|
||||
constructor(context, externalHandler, buttonConfig, ppcpConfig) {
|
||||
apmButtonInit();
|
||||
|
||||
this.isInitialized = false;
|
||||
|
||||
this.context = context;
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/Wi
|
|||
buttonConfig.button.wrapper = selector;
|
||||
applyConfigOptions(buttonConfig);
|
||||
|
||||
const wrapperElement = `<div id="${selector.replace('#', '')}" class="ppcp-button-googlepay"></div>`;
|
||||
const wrapperElement = `<div id="${selector.replace('#', '')}" class="ppcp-button-apm ppcp-button-googlepay"></div>`;
|
||||
|
||||
if (!jQuery(selector).length) {
|
||||
jQuery(ppcpConfig.button.wrapper).after(wrapperElement);
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ const GooglePayComponent = () => {
|
|||
}, [paypalLoaded, googlePayLoaded]);
|
||||
|
||||
return (
|
||||
<div id={buttonConfig.button.wrapper.replace('#', '')} className="ppcp-button-googlepay"></div>
|
||||
<div id={buttonConfig.button.wrapper.replace('#', '')} className="ppcp-button-apm ppcp-button-googlepay"></div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -311,7 +311,7 @@ class Button implements ButtonInterface {
|
|||
add_action(
|
||||
$render_placeholder,
|
||||
function () {
|
||||
echo '<span id="ppc-button-googlepay-container-minicart" class="ppcp-button-googlepay ppcp-button-minicart"></span>';
|
||||
echo '<span id="ppc-button-googlepay-container-minicart" class="ppcp-button-apm ppcp-button-googlepay ppcp-button-minicart"></span>';
|
||||
},
|
||||
21
|
||||
);
|
||||
|
|
@ -325,7 +325,7 @@ class Button implements ButtonInterface {
|
|||
*/
|
||||
private function googlepay_button(): void {
|
||||
?>
|
||||
<div id="ppc-button-googlepay-container" class="ppcp-button-googlepay">
|
||||
<div id="ppc-button-googlepay-container" class="ppcp-button-apm ppcp-button-googlepay">
|
||||
<?php wp_nonce_field( 'woocommerce-process_checkout', 'woocommerce-process-checkout-nonce' ); ?>
|
||||
</div>
|
||||
<?php
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@use "../../../ppcp-button/resources/css/mixins/apm-button" as apm-button;
|
||||
|
||||
.ppcp-field-hidden {
|
||||
display: none !important;
|
||||
|
|
@ -15,3 +16,12 @@
|
|||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Prevents spacing after button group.
|
||||
.ppcp-button-preview-inner {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.ppcp-button-apm {
|
||||
@include apm-button.button;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,9 +15,6 @@ document.addEventListener(
|
|||
|
||||
jQuery( '*[data-ppcp-display]' ).each( (index, el) => {
|
||||
const rules = jQuery(el).data('ppcpDisplay');
|
||||
|
||||
// console.log('rules', rules);
|
||||
|
||||
for (const rule of rules) {
|
||||
displayManager.addRule(rule);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
