mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-08-31 06:52:50 +08:00
add styles per context
This commit is contained in:
David Remer
parent
e24fc0d7ab
commit
5de78e1aab
4 changed files with 383 additions and 16 deletions
|
|
@ -15,7 +15,7 @@ class Renderer {
|
|||
return;
|
||||
}
|
||||
|
||||
const style = this.defaultConfig.button.style;
|
||||
const style = wrapper === this.defaultConfig.button.wrapper ? this.defaultConfig.button.style : this.defaultConfig.button.mini_cart_style;
|
||||
paypal.Buttons({
|
||||
style,
|
||||
...contextConfig,
|
||||
|
|
|
|||
|
|
@ -135,8 +135,8 @@ class SmartButton implements SmartButtonInterface
|
|||
31
|
||||
);
|
||||
}
|
||||
$notEnabledOnMiniCart = $this->settings->has('button_mini_cart_enabled') &&
|
||||
!$this->settings->get('button_mini_cart_enabled');
|
||||
$notEnabledOnMiniCart = $this->settings->has('button_mini-cart_enabled') &&
|
||||
!$this->settings->get('button_mini-cart_enabled');
|
||||
if (
|
||||
! $notEnabledOnMiniCart
|
||||
) {
|
||||
|
|
@ -329,17 +329,19 @@ class SmartButton implements SmartButtonInterface
|
|||
'mini_cart_wrapper' => '#ppc-button-minicart',
|
||||
'cancel_wrapper' => '#ppcp-cancel',
|
||||
'url' => $this->url(),
|
||||
'mini_cart_style' => [
|
||||
'layout' => $this->styleForContext('layout', 'mini-cart'),
|
||||
'size' => $this->styleForContext('size', 'mini-cart'),
|
||||
'color' => $this->styleForContext('color', 'mini-cart'),
|
||||
'shape' => $this->styleForContext('shape', 'mini-cart'),
|
||||
'label' => $this->styleForContext('label', 'mini-cart'),
|
||||
],
|
||||
'style' => [
|
||||
'layout' => ($this->settings->has('button_layout')) ?
|
||||
$this->settings->get('button_layout') : 'vertical',
|
||||
'size' => ($this->settings->has('button_size')) ?
|
||||
$this->settings->get('button_size') : 'responsive',
|
||||
'color' => ($this->settings->has('button_color')) ?
|
||||
$this->settings->get('button_color') : null,
|
||||
'shape' => ($this->settings->has('button_shape')) ?
|
||||
$this->settings->get('button_shape') : null,
|
||||
'label' => ($this->settings->has('button_label')) ?
|
||||
$this->settings->get('button_label') : 'paypal',
|
||||
'layout' => $this->styleForContext('layout', $this->context()),
|
||||
'size' => $this->styleForContext('size', $this->context()),
|
||||
'color' => $this->styleForContext('color', $this->context()),
|
||||
'shape' => $this->styleForContext('shape', $this->context()),
|
||||
'label' => $this->styleForContext('label', $this->context()),
|
||||
],
|
||||
],
|
||||
'hosted_fields' => [
|
||||
|
|
@ -498,4 +500,19 @@ class SmartButton implements SmartButtonInterface
|
|||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
private function styleForContext(string $style, string $context) : string {
|
||||
$defaults = [
|
||||
'layout' => 'vertical',
|
||||
'size' => 'responsive',
|
||||
'color' => 'gold',
|
||||
'shape' => 'pill',
|
||||
'label' => 'paypal',
|
||||
];
|
||||
|
||||
$value = isset($defaults[$style]) ? $defaults[$style] : '';
|
||||
$value = $this->settings->has('button_' . $style) ? $this->settings->get('button_' . $style) : $value;
|
||||
$value = $this->settings->has('button_' . $context . '_' . $style) ? $this->settings->get('button_' . $context . '_' . $style) : $value;
|
||||
return $value;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -462,10 +462,20 @@ return [
|
|||
'requirements' => [],
|
||||
],
|
||||
|
||||
//Single product page
|
||||
'button_single_product_heading' => [
|
||||
'heading' => __('Single Product page', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'ppcp-heading',
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_single_product_enabled' => [
|
||||
'title' => __('Enable buttons on Single Product', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'checkbox',
|
||||
'label' => __('enable on Single Product', 'woocommerce-paypal-commerce-gateway'),
|
||||
'label' => __('Enable on Single Product', 'woocommerce-paypal-commerce-gateway'),
|
||||
'default' => true,
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
|
|
@ -473,7 +483,124 @@ return [
|
|||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_mini_cart_enabled' => [
|
||||
'button_single_product_layout' => [
|
||||
'title' => __('Button Layout', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'vertical',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'If additional funding sources are available to the buyer through PayPal, such as Venmo, then multiple buttons are displayed in the space provided. Choose "vertical" for a dynamic list of alternative and local payment options, or "horizontal" when space is limited.',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'vertical' => __('Vertical', 'woocommerce-paypal-commerce-gateway'),
|
||||
'horizontal' => __('Horizontal', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_single_product_size' => [
|
||||
'title' => __('Button Size', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'responsive',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'PayPal offers different sizes of the "PayPal Checkout" buttons, allowing you to select a size that best fits your site\'s theme. This setting will allow you to choose which size button(s) appear on your page. (The "Responsive" option adjusts to container size, and is available and recommended for Smart Payment Buttons.)',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'small' => __('Small', 'woocommerce-paypal-commerce-gateway'),
|
||||
'medium' => __('Medium', 'woocommerce-paypal-commerce-gateway'),
|
||||
'large' => __('Large', 'woocommerce-paypal-commerce-gateway'),
|
||||
'responsive' => __('Responsive', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_single_product_label' => [
|
||||
'title' => __('Button Label', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'paypal',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'This controls the label on the primary button.',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'paypal' => __('PayPal', 'woocommerce-paypal-commerce-gateway'),
|
||||
'checkout' => __('PayPal Checkout', 'woocommerce-paypal-commerce-gateway'),
|
||||
'buynow' => __('PayPal Buy Now', 'woocommerce-paypal-commerce-gateway'),
|
||||
'pay' => __('Pay with PayPal', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_single_product_color' => [
|
||||
'title' => __('Color', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'gold',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'Controls the background color of the primary button. Use "Gold" to leverage PayPal\'s recognition and preference, or change it to match your site design or aesthetic.',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'gold' => __('Gold (Recommended)', 'woocommerce-paypal-commerce-gateway'),
|
||||
'blue' => __('Blue', 'woocommerce-paypal-commerce-gateway'),
|
||||
'silver' => __('Silver', 'woocommerce-paypal-commerce-gateway'),
|
||||
'black' => __('Black', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_single_product_shape' => [
|
||||
'title' => __('Shape', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'rect',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'The pill-shaped button\'s unique and powerful shape signifies PayPal in people\'s minds. Use the rectangular button as an alternative when pill-shaped buttons might pose design challenges.',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'pill' => __('Pill', 'woocommerce-paypal-commerce-gateway'),
|
||||
'rect' => __('Rectangle', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
|
||||
//Mini cart settings
|
||||
'button_mini-cart_heading' => [
|
||||
'heading' => __('Mini Cart', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'ppcp-heading',
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_mini-cart_enabled' => [
|
||||
'title' => __('Buttons on Mini Cart', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'checkbox',
|
||||
'label' => __('Enable on Mini Cart', 'woocommerce-paypal-commerce-gateway'),
|
||||
|
|
@ -484,6 +611,123 @@ return [
|
|||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_mini-cart_layout' => [
|
||||
'title' => __('Button Layout', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'vertical',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'If additional funding sources are available to the buyer through PayPal, such as Venmo, then multiple buttons are displayed in the space provided. Choose "vertical" for a dynamic list of alternative and local payment options, or "horizontal" when space is limited.',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'vertical' => __('Vertical', 'woocommerce-paypal-commerce-gateway'),
|
||||
'horizontal' => __('Horizontal', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_mini-cart_size' => [
|
||||
'title' => __('Button Size', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'responsive',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'PayPal offers different sizes of the "PayPal Checkout" buttons, allowing you to select a size that best fits your site\'s theme. This setting will allow you to choose which size button(s) appear on your page. (The "Responsive" option adjusts to container size, and is available and recommended for Smart Payment Buttons.)',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'small' => __('Small', 'woocommerce-paypal-commerce-gateway'),
|
||||
'medium' => __('Medium', 'woocommerce-paypal-commerce-gateway'),
|
||||
'large' => __('Large', 'woocommerce-paypal-commerce-gateway'),
|
||||
'responsive' => __('Responsive', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_mini-cart_label' => [
|
||||
'title' => __('Button Label', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'paypal',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'This controls the label on the primary button.',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'paypal' => __('PayPal', 'woocommerce-paypal-commerce-gateway'),
|
||||
'checkout' => __('PayPal Checkout', 'woocommerce-paypal-commerce-gateway'),
|
||||
'buynow' => __('PayPal Buy Now', 'woocommerce-paypal-commerce-gateway'),
|
||||
'pay' => __('Pay with PayPal', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_mini-cart_color' => [
|
||||
'title' => __('Color', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'gold',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'Controls the background color of the primary button. Use "Gold" to leverage PayPal\'s recognition and preference, or change it to match your site design or aesthetic.',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'gold' => __('Gold (Recommended)', 'woocommerce-paypal-commerce-gateway'),
|
||||
'blue' => __('Blue', 'woocommerce-paypal-commerce-gateway'),
|
||||
'silver' => __('Silver', 'woocommerce-paypal-commerce-gateway'),
|
||||
'black' => __('Black', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_mini-cart_shape' => [
|
||||
'title' => __('Shape', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'rect',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'The pill-shaped button\'s unique and powerful shape signifies PayPal in people\'s minds. Use the rectangular button as an alternative when pill-shaped buttons might pose design challenges.',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'pill' => __('Pill', 'woocommerce-paypal-commerce-gateway'),
|
||||
'rect' => __('Rectangle', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
|
||||
//Cart settings
|
||||
'button_cart_heading' => [
|
||||
'heading' => __('Cart', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'ppcp-heading',
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_cart_enabled' => [
|
||||
'title' => __('Buttons on Cart', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'checkbox',
|
||||
|
|
@ -495,6 +739,112 @@ return [
|
|||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_cart_layout' => [
|
||||
'title' => __('Button Layout', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'vertical',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'If additional funding sources are available to the buyer through PayPal, such as Venmo, then multiple buttons are displayed in the space provided. Choose "vertical" for a dynamic list of alternative and local payment options, or "horizontal" when space is limited.',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'vertical' => __('Vertical', 'woocommerce-paypal-commerce-gateway'),
|
||||
'horizontal' => __('Horizontal', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_cart_size' => [
|
||||
'title' => __('Button Size', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'responsive',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'PayPal offers different sizes of the "PayPal Checkout" buttons, allowing you to select a size that best fits your site\'s theme. This setting will allow you to choose which size button(s) appear on your page. (The "Responsive" option adjusts to container size, and is available and recommended for Smart Payment Buttons.)',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'small' => __('Small', 'woocommerce-paypal-commerce-gateway'),
|
||||
'medium' => __('Medium', 'woocommerce-paypal-commerce-gateway'),
|
||||
'large' => __('Large', 'woocommerce-paypal-commerce-gateway'),
|
||||
'responsive' => __('Responsive', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_cart_label' => [
|
||||
'title' => __('Button Label', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'paypal',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'This controls the label on the primary button.',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'paypal' => __('PayPal', 'woocommerce-paypal-commerce-gateway'),
|
||||
'checkout' => __('PayPal Checkout', 'woocommerce-paypal-commerce-gateway'),
|
||||
'buynow' => __('PayPal Buy Now', 'woocommerce-paypal-commerce-gateway'),
|
||||
'pay' => __('Pay with PayPal', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_cart_color' => [
|
||||
'title' => __('Color', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'gold',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'Controls the background color of the primary button. Use "Gold" to leverage PayPal\'s recognition and preference, or change it to match your site design or aesthetic.',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'gold' => __('Gold (Recommended)', 'woocommerce-paypal-commerce-gateway'),
|
||||
'blue' => __('Blue', 'woocommerce-paypal-commerce-gateway'),
|
||||
'silver' => __('Silver', 'woocommerce-paypal-commerce-gateway'),
|
||||
'black' => __('Black', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
'button_cart_shape' => [
|
||||
'title' => __('Shape', 'woocommerce-paypal-commerce-gateway'),
|
||||
'type' => 'select',
|
||||
'class' => ['wc-enhanced-select'],
|
||||
'default' => 'rect',
|
||||
'desc_tip' => true,
|
||||
'description' => __(
|
||||
'The pill-shaped button\'s unique and powerful shape signifies PayPal in people\'s minds. Use the rectangular button as an alternative when pill-shaped buttons might pose design challenges.',
|
||||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'options' => [
|
||||
'pill' => __('Pill', 'woocommerce-paypal-commerce-gateway'),
|
||||
'rect' => __('Rectangle', 'woocommerce-paypal-commerce-gateway'),
|
||||
],
|
||||
'screens' => [
|
||||
State::STATE_PROGRESSIVE,
|
||||
State::STATE_ONBOARDED,
|
||||
],
|
||||
'requirements' => [],
|
||||
],
|
||||
|
||||
'dcc_cart_enabled' => [
|
||||
'title' => __('Enable credit card on cart', 'woocommerce-paypal-commerce-gateway'),
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ class Settings implements ContainerInterface
|
|||
'woocommerce-paypal-commerce-gateway'
|
||||
),
|
||||
'button_single_product_enabled' => true,
|
||||
'button_mini_cart_enabled' => true,
|
||||
'button_mini-cart_enabled' => true,
|
||||
'button_cart_enabled' => true,
|
||||
'dcc_cart_enabled' => true,
|
||||
'dcc_mini_cart_enabled' => true,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue
