From 5de78e1aaba6640785b78e5a9d9012f98b3dc40b Mon Sep 17 00:00:00 2001 From: David Remer Date: Fri, 14 Aug 2020 10:28:24 +0300 Subject: [PATCH] add styles per context --- .../resources/js/modules/Renderer/Renderer.js | 2 +- .../ppcp-button/src/Assets/SmartButton.php | 41 +- modules.local/ppcp-wc-gateway/services.php | 354 +++++++++++++++++- .../ppcp-wc-gateway/src/Settings/Settings.php | 2 +- 4 files changed, 383 insertions(+), 16 deletions(-) diff --git a/modules.local/ppcp-button/resources/js/modules/Renderer/Renderer.js b/modules.local/ppcp-button/resources/js/modules/Renderer/Renderer.js index 808a016a4..c8df1a393 100644 --- a/modules.local/ppcp-button/resources/js/modules/Renderer/Renderer.js +++ b/modules.local/ppcp-button/resources/js/modules/Renderer/Renderer.js @@ -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, diff --git a/modules.local/ppcp-button/src/Assets/SmartButton.php b/modules.local/ppcp-button/src/Assets/SmartButton.php index 845296766..35094c25b 100644 --- a/modules.local/ppcp-button/src/Assets/SmartButton.php +++ b/modules.local/ppcp-button/src/Assets/SmartButton.php @@ -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; + } } diff --git a/modules.local/ppcp-wc-gateway/services.php b/modules.local/ppcp-wc-gateway/services.php index f6562353a..cfe1fcdf6 100644 --- a/modules.local/ppcp-wc-gateway/services.php +++ b/modules.local/ppcp-wc-gateway/services.php @@ -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'), diff --git a/modules.local/ppcp-wc-gateway/src/Settings/Settings.php b/modules.local/ppcp-wc-gateway/src/Settings/Settings.php index d5bf7671c..872e97e7f 100644 --- a/modules.local/ppcp-wc-gateway/src/Settings/Settings.php +++ b/modules.local/ppcp-wc-gateway/src/Settings/Settings.php @@ -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,