diff --git a/README.md b/README.md index 2007210b..bc5017c9 100644 --- a/README.md +++ b/README.md @@ -32,6 +32,13 @@ PostNL’s official extension for WooCommerce on WordPress. Manage your national * Fix: Hide delivery-day, morning and evening surcharges when free shipping applies, including PostNL's minimum-order-amount threshold. * Fix: Prevent duplicate PostNL delivery options container from appearing during blocks checkout fragment updates. * Tweak: Improve tax handling so tab prices accurately reflect tax-inclusive and tax-exclusive display settings. +* Add: Independent button width controls (slider) for cart, checkout, and minicart locations in the Checkoutboosters settings. +* Add: Global button corner radius control (slider) in the Checkoutboosters settings. +* Add: Live button preview in the Checkoutboosters settings section that updates in real time as styling options are changed. +* Tweak: Renamed "Fill in with PostNL" settings section to "Checkoutboosters" with updated feature description and activation link. +* Tweak: Updated Fill in With PostNL button label to "Autofill with PostNL" and refreshed the description text shown below the button. +* Tweak: Description text below the Fill in With PostNL button is now displayed at 80% font size and centred on the cart page. +* Tweak: Button border now defaults to none on fresh installations; background colour defaults to PostNL orange. ### 5.9.5 * Add: Ability to set the default checkout tab (Delivery or Pickup) from the PostNL checkout settings. diff --git a/assets/css/postnl-fill-in-button.css b/assets/css/postnl-fill-in-button.css index 946ef57a..3ea16c0b 100644 --- a/assets/css/postnl-fill-in-button.css +++ b/assets/css/postnl-fill-in-button.css @@ -2,7 +2,7 @@ min-height: 35px; max-height: 60px; width: 100%; - border: 1px solid #F56900; + border: none; background-color: #F56900; cursor: pointer; outline: none; @@ -37,6 +37,11 @@ width: 94%; } +.postnl-button-in-cart .postnl-login-button__description { + font-size: 80%; + text-align: center; +} + .postnl-hidden{ visibility: hidden !important; } diff --git a/assets/js/admin-fill-in-with-postnl-settings.js b/assets/js/admin-fill-in-with-postnl-settings.js index fb13e537..632133ee 100644 --- a/assets/js/admin-fill-in-with-postnl-settings.js +++ b/assets/js/admin-fill-in-with-postnl-settings.js @@ -15,4 +15,78 @@ // Mark as initialized $( this ).data( 'codeEditorInitialized', true ); } ); + + function postnlUpdatePreview() { + var $preview = $( '#postnl-button-preview' ); + if ( ! $preview.length ) { + return; + } + + var bgColor = $( '#postnl_button_background_color' ).val() || '#ff6200'; + var border = $( '#postnl_button_border' ).val() || 'none'; + var borderRadius = $( '#postnl_button_border_radius' ).val() || '4'; + + $preview.css( { + 'background-color': bgColor, + 'border': border, + 'border-radius': borderRadius + 'px', + } ); + } + + $( '#postnl_button_border, #postnl_button_border_radius' ).on( 'input change', postnlUpdatePreview ); + $( '#postnl_button_background_color' ).on( 'change', postnlUpdatePreview ); + + ( function () { + var $preview = $( '#postnl-button-preview' ); + var savedHoverColor = $( '#postnl_button_hover_background_color' ).val() || '#e55500'; + $preview.on( 'mouseenter', function () { + var hoverColor = $( '#postnl_button_hover_background_color' ).val() || savedHoverColor; + $( this ).css( 'background-color', hoverColor ); + } ).on( 'mouseleave', function () { + var bgColor = $( '#postnl_button_background_color' ).val() || '#ff6200'; + $( this ).css( 'background-color', bgColor ); + } ); + } )(); + + $( '.postnl-range-slider' ).each( function () { + var $number = $( this ); + var min = $number.attr( 'min' ) || '0'; + var max = $number.attr( 'max' ) || '100'; + var step = $number.attr( 'step' ) || '1'; + var unit = $number.data( 'unit' ) || ''; + var value = $number.val() || min; + + var $label = $( '' ).css( { + display: 'inline-block', + minWidth: '3em', + marginLeft: '8px', + fontWeight: 'bold', + } ).text( value + unit ); + + var $range = $( '' ).attr( { + min: min, + max: max, + step: step, + value: value, + } ).css( { + verticalAlign: 'middle', + width: '160px', + marginLeft: '10px', + cursor: 'pointer', + } ); + + $range.on( 'input', function () { + var v = $( this ).val(); + $number.val( v ).trigger( 'change' ); + $label.text( v + unit ); + } ); + + $number.on( 'input change', function () { + var v = $( this ).val(); + $range.val( v ); + $label.text( v + unit ); + } ); + + $number.after( $label ).after( $range ); + } ); } )( jQuery ); \ No newline at end of file diff --git a/changelog.txt b/changelog.txt index b2b28ee7..7bd8cbc7 100644 --- a/changelog.txt +++ b/changelog.txt @@ -5,6 +5,13 @@ * Fix: Hide delivery-day, morning and evening surcharges when free shipping applies, including PostNL's minimum-order-amount threshold. * Fix: Prevent duplicate PostNL delivery options container from appearing during blocks checkout fragment updates. * Tweak: Improve tax handling so tab prices accurately reflect tax-inclusive and tax-exclusive display settings. +* Add: Independent button width controls (slider) for cart, checkout, and minicart locations in the Checkoutboosters settings. +* Add: Global button corner radius control (slider) in the Checkoutboosters settings. +* Add: Live button preview in the Checkoutboosters settings section that updates in real time as styling options are changed. +* Tweak: Renamed "Fill in with PostNL" settings section to "Checkoutboosters" with updated feature description and activation link. +* Tweak: Updated Fill in With PostNL button label to "Autofill with PostNL" and refreshed the description text shown below the button. +* Tweak: Description text below the Fill in With PostNL button is now displayed at 80% font size and centred on the cart page. +* Tweak: Button border now defaults to none on fresh installations; background colour defaults to PostNL orange. = 5.9.5 (2026-04-21) = * Add: Ability to set the default checkout tab (Delivery or Pickup) from the PostNL checkout settings. diff --git a/client/checkout/postnl-fill-in-with/block.js b/client/checkout/postnl-fill-in-with/block.js index aeb6ea72..b5390fe7 100644 --- a/client/checkout/postnl-fill-in-with/block.js +++ b/client/checkout/postnl-fill-in-with/block.js @@ -158,9 +158,9 @@ export const FillBlock = ( { checkoutExtensionData } ) => { return null; } - const title = __( 'Fill in with PostNL', 'postnl-for-woocommerce' ); + const title = __( 'Autofill with PostNL', 'postnl-for-woocommerce' ); const description = __( - 'Your name and address are automatically filled in via your PostNL account. That saves you from having to fill in the form!', + 'Your shipping details are filled in automatically via your PostNL account. That saves time and hassle.', 'postnl-for-woocommerce' ); const postnl_logo = diff --git a/languages/postnl-for-woocommerce-nl_NL.po b/languages/postnl-for-woocommerce-nl_NL.po index 079b4f43..12caf6dd 100644 --- a/languages/postnl-for-woocommerce-nl_NL.po +++ b/languages/postnl-for-woocommerce-nl_NL.po @@ -665,18 +665,24 @@ msgstr "Hoeveelheid moet meer dan 1 zijn" msgid "Max weight for Mailbox Packet is 2kg!" msgstr "Het maximale gewicht van een brievenbuspakje is 2kg!" -#: src/Shipping_Method/Fill_In_With_PostNL_Settings.php:38 -#: src/Shipping_Method/Fill_In_With_PostNL_Settings.php:61 #: templates/checkout/postnl-fill-in-with-button.php:22 #: templates/checkout/postnl-fill-in-with-button.php:25 #: build/postnl-fill-in-with-frontend.js:1 #: client/checkout/postnl-fill-in-with/block.js:161 -msgid "Fill in with PostNL" -msgstr "Invullen Met PostNL" +msgid "Autofill with PostNL" +msgstr "Invullen met PostNL" -#: src/Shipping_Method/Fill_In_With_PostNL_Settings.php:55 -msgid "With this functionality your customers can easily and automatically fill in their shipping address via their PostNL account. This functionality is only available for consumers with a Dutch shipping address. Click the following link to activate the functionality:" -msgstr "Met deze functie kunnen klanten eenvoudig en automatisch hun adresgegevens invullen via hun PostNL account. Deze functie is alleen beschikbaar voor ontvangers met een bezorgadres in Nederland. Klik op de volgende link om de functie te activeren:" +#: src/Shipping_Method/Fill_In_With_PostNL_Settings.php:57 +msgid "Let customers autofill their shipping address in just a few clicks with their PostNL account. So customers don't have to manually enter their details anymore. Address details are securely prefilled with PostNL, reducing address errors, returns, and checkout drop-off." +msgstr "Laat klanten met een paar klikken al hun bezorgadres automatisch invullen via hun PostNL-account. Zo hoeven klanten niets meer zelf in te voeren. De adresgegevens worden veilig en automatisch ingevuld vanuit PostNL. Dit zorgt voor minder adresfouten, minder retouren en minder afhakers in de checkout." + +#: src/Shipping_Method/Fill_In_With_PostNL_Settings.php:58 +msgid "Available for all consumers with a PostNL account and a Dutch or Belgian shipping address." +msgstr "Beschikbaar voor alle consumenten met een PostNL-account en een Nederlands of Belgisch bezorgadres." + +#: src/Shipping_Method/Fill_In_With_PostNL_Settings.php:59 +msgid "Activate PostNL autofill via this link:" +msgstr "Activeer Invullen met PostNL via deze link:" #: src/Shipping_Method/Fill_In_With_PostNL_Settings.php:67 #: src/Shipping_Method/Settings.php:115 @@ -692,7 +698,7 @@ msgstr "Activeer" #: src/Shipping_Method/Fill_In_With_PostNL_Settings.php:68 msgid "Enable Fill in with PostNL functionality." -msgstr "Activeer Invullen Met PostNL." +msgstr "Activeer Invullen met PostNL." #: src/Shipping_Method/Fill_In_With_PostNL_Settings.php:75 msgid "Enter your PostNL Client ID from the Digital Business Portal." @@ -1490,8 +1496,8 @@ msgstr "" #: templates/checkout/postnl-fill-in-with-button.php:29 #: build/postnl-fill-in-with-frontend.js:1 #: client/checkout/postnl-fill-in-with/block.js:162 -msgid "Your name and address are automatically filled in via your PostNL account. That saves you from having to fill in the form!" -msgstr "Je naam en adres worden automatisch ingevuld via je PostNL-account. Zo hoef je het formulier niet zelf in te vullen!" +msgid "Your shipping details are filled in automatically via your PostNL account. That saves time and hassle." +msgstr "Je bezorggegevens worden automatisch ingevuld via je PostNL-account. Dat scheelt tijd en gedoe." #. Description of the plugin #: postnl-for-woocommerce.php diff --git a/readme.txt b/readme.txt index 4cc97264..999cdc26 100644 --- a/readme.txt +++ b/readme.txt @@ -86,6 +86,13 @@ Follow these instructions (https://www.postnl.nl/Images/aanvragen-api-key-stappe * Fix: Hide delivery-day, morning and evening surcharges when free shipping applies, including PostNL's minimum-order-amount threshold. * Fix: Prevent duplicate PostNL delivery options container from appearing during blocks checkout fragment updates. * Tweak: Improve tax handling so tab prices accurately reflect tax-inclusive and tax-exclusive display settings. +* Add: Independent button width controls (slider) for cart, checkout, and minicart locations in the Checkoutboosters settings. +* Add: Global button corner radius control (slider) in the Checkoutboosters settings. +* Add: Live button preview in the Checkoutboosters settings section that updates in real time as styling options are changed. +* Tweak: Renamed "Fill in with PostNL" settings section to "Checkoutboosters" with updated feature description and activation link. +* Tweak: Updated Fill in With PostNL button label to "Autofill with PostNL" and refreshed the description text shown below the button. +* Tweak: Description text below the Fill in With PostNL button is now displayed at 80% font size and centred on the cart page. +* Tweak: Button border now defaults to none on fresh installations; background colour defaults to PostNL orange. = 5.9.5 (2026-04-21) = * Add: Ability to set the default checkout tab (Delivery or Pickup) from the PostNL checkout settings. diff --git a/src/Frontend/Fill_In_With_Postnl.php b/src/Frontend/Fill_In_With_Postnl.php index 7a813836..da5f43af 100644 --- a/src/Frontend/Fill_In_With_Postnl.php +++ b/src/Frontend/Fill_In_With_Postnl.php @@ -100,11 +100,15 @@ public function add_custom_css(): void { return; } - $border = sanitize_text_field( get_option( 'postnl_button_border', '1px solid #000000' ) ); + $border = sanitize_text_field( get_option( 'postnl_button_border', 'none' ) ); $alignment = sanitize_text_field( get_option( 'postnl_button_alignment', 'left' ) ); $custom_css = wp_strip_all_tags( get_option( 'postnl_custom_css', '' ) ); $background_color = sanitize_hex_color( get_option( 'postnl_button_background_color', '#ff6200' ) ); $hover_background_color = sanitize_hex_color( get_option( 'postnl_button_hover_background_color', '#e55500' ) ); + $border_radius = absint( get_option( 'postnl_button_border_radius', '4' ) ); + $cart_width = absint( get_option( 'postnl_cart_button_width', '100' ) ); + $checkout_width = absint( get_option( 'postnl_checkout_button_width', '100' ) ); + $minicart_width = absint( get_option( 'postnl_minicart_button_width', '100' ) ); $css = ''; @@ -112,6 +116,7 @@ public function add_custom_css(): void { $css .= '#postnl-login-button {'; $css .= 'background-color: ' . $background_color . ';'; $css .= 'border: ' . $border . ';'; + $css .= 'border-radius: ' . $border_radius . 'px;'; if ( 'center' === $alignment ) { $css .= 'display: block; margin-left: auto; margin-right: auto;'; } elseif ( 'right' === $alignment ) { @@ -126,6 +131,11 @@ public function add_custom_css(): void { $css .= 'background-color: ' . $hover_background_color . ';'; $css .= '}'; + // Per-context button widths. + $css .= '.postnl-button-in-cart #postnl-login-button { width: ' . $cart_width . '%; }'; + $css .= '.postnl-button-in-checkout #postnl-login-button { width: ' . $checkout_width . '%; }'; + $css .= '.postnl-button-in-minicart #postnl-login-button { width: ' . $minicart_width . '%; }'; + // Append custom CSS from the textarea field. if ( ! empty( $custom_css ) ) { $css .= wp_strip_all_tags( $custom_css ); diff --git a/src/Shipping_Method/Fill_In_With_PostNL_Settings.php b/src/Shipping_Method/Fill_In_With_PostNL_Settings.php index a8a9b44b..9460785f 100644 --- a/src/Shipping_Method/Fill_In_With_PostNL_Settings.php +++ b/src/Shipping_Method/Fill_In_With_PostNL_Settings.php @@ -25,6 +25,7 @@ public function __construct() { add_filter( 'woocommerce_get_settings_shipping', array( $this, 'add_settings_fields' ), 10, 2 ); add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_admin_scripts' ) ); add_filter( 'woocommerce_admin_settings_sanitize_option', array( $this, 'maybe_prevent_saving_invalid_data' ), 10, 3 ); + add_action( 'woocommerce_admin_field_postnl_preview', array( $this, 'render_preview_field' ) ); } /** @@ -35,7 +36,7 @@ public function __construct() { * @return array */ public function add_settings_section( array $sections ): array { - $sections['fill-in-with-postnl'] = esc_html__( 'Fill in with PostNL', 'postnl-for-woocommerce' ); + $sections['fill-in-with-postnl'] = esc_html__( 'Checkoutboosters', 'postnl-for-woocommerce' ); return $sections; } @@ -52,13 +53,15 @@ public function add_settings_fields( $settings, $current_section ): array { return $settings; } - $info_block = '

' . esc_html__( 'With this functionality your customers can easily and automatically fill in their shipping address via their PostNL account. This functionality is only available for consumers with a Dutch shipping address. Click the following link to activate the functionality:', 'postnl-for-woocommerce' ) . '

'; + $activation_url = 'https://dil-business-portal.postnl.nl/checkout-prefill?referrer=wcplugin&url=' . site_url(); - $info_block .= 'https://dil-business-portal.postnl.nl/checkout-prefill?referrer=wcplugin&url=' . site_url() . ''; + $info_block = '

' . esc_html__( 'Let customers autofill their shipping address in just a few clicks with their PostNL account. So customers don\'t have to manually enter their details anymore. Address details are securely prefilled with PostNL, reducing address errors, returns, and checkout drop-off.', 'postnl-for-woocommerce' ) . '

'; + $info_block .= '

' . esc_html__( 'Available for all consumers with a PostNL account and a Dutch or Belgian shipping address.', 'postnl-for-woocommerce' ) . '

'; + $info_block .= '

' . esc_html__( 'Activate PostNL autofill via this link:', 'postnl-for-woocommerce' ) . ' ' . esc_html( $activation_url ) . '

'; $settings = array( array( - 'title' => esc_html__( 'Fill in with PostNL', 'postnl-for-woocommerce' ), + 'title' => esc_html__( 'Checkoutboosters', 'postnl-for-woocommerce' ), 'type' => 'title', 'desc' => $info_block, 'id' => 'postnl_fill_in_with_title', @@ -104,6 +107,22 @@ public function add_settings_fields( $settings, $current_section ): array { 'after_checkout' => esc_html__( 'After Checkout', 'postnl-for-woocommerce' ), ), ), + array( + 'title' => esc_html__( 'Cart Button Width', 'postnl-for-woocommerce' ), + 'desc' => esc_html__( 'Set the button width as a percentage (0–100%).', 'postnl-for-woocommerce' ), + 'desc_tip' => true, + 'id' => 'postnl_cart_button_width', + 'type' => 'number', + 'default' => '100', + 'css' => 'width: 70px;', + 'class' => 'postnl-range-slider', + 'custom_attributes' => array( + 'min' => '0', + 'max' => '100', + 'step' => '1', + 'data-unit' => '%', + ), + ), array( 'type' => 'sectionend', 'id' => 'postnl_cart_button_section_end', @@ -132,6 +151,22 @@ public function add_settings_fields( $settings, $current_section ): array { 'after_customer_details' => esc_html__( 'After Customer Details', 'postnl-for-woocommerce' ), ), ), + array( + 'title' => esc_html__( 'Checkout Button Width', 'postnl-for-woocommerce' ), + 'desc' => esc_html__( 'Set the button width as a percentage (0–100%).', 'postnl-for-woocommerce' ), + 'desc_tip' => true, + 'id' => 'postnl_checkout_button_width', + 'type' => 'number', + 'default' => '100', + 'css' => 'width: 70px;', + 'class' => 'postnl-range-slider', + 'custom_attributes' => array( + 'min' => '0', + 'max' => '100', + 'step' => '1', + 'data-unit' => '%', + ), + ), array( 'type' => 'sectionend', 'id' => 'postnl_checkout_section_end', @@ -160,6 +195,22 @@ public function add_settings_fields( $settings, $current_section ): array { 'after_buttons' => esc_html__( 'After Buttons', 'postnl-for-woocommerce' ), ), ), + array( + 'title' => esc_html__( 'Minicart Button Width', 'postnl-for-woocommerce' ), + 'desc' => esc_html__( 'Set the button width as a percentage (0–100%).', 'postnl-for-woocommerce' ), + 'desc_tip' => true, + 'id' => 'postnl_minicart_button_width', + 'type' => 'number', + 'default' => '100', + 'css' => 'width: 70px;', + 'class' => 'postnl-range-slider', + 'custom_attributes' => array( + 'min' => '0', + 'max' => '100', + 'step' => '1', + 'data-unit' => '%', + ), + ), array( 'type' => 'sectionend', 'id' => 'postnl_minicart_section_end', @@ -186,7 +237,7 @@ public function add_settings_fields( $settings, $current_section ): array { 'desc_tip' => true, 'id' => 'postnl_button_border', 'type' => 'text', - 'default' => '1px solid #000000', + 'default' => 'none', 'css' => 'width: 150px;', ), array( @@ -211,6 +262,26 @@ public function add_settings_fields( $settings, $current_section ): array { 'default' => '#e55500', 'css' => 'width: 80px;', ), + array( + 'title' => esc_html__( 'Button Corner Radius', 'postnl-for-woocommerce' ), + 'desc' => esc_html__( 'Set the button corner roundness in pixels (0 = square, 50 = fully rounded).', 'postnl-for-woocommerce' ), + 'desc_tip' => true, + 'id' => 'postnl_button_border_radius', + 'type' => 'number', + 'default' => '4', + 'css' => 'width: 70px;', + 'class' => 'postnl-range-slider', + 'custom_attributes' => array( + 'min' => '0', + 'max' => '50', + 'step' => '1', + 'data-unit' => 'px', + ), + ), + array( + 'type' => 'postnl_preview', + 'id' => 'postnl_button_preview', + ), array( 'type' => 'sectionend', 'id' => 'postnl_button_styling_section_end', @@ -246,6 +317,42 @@ public function add_settings_fields( $settings, $current_section ): array { return $settings; } + /** + * Render the live button preview field. + * + * @return void + */ + public function render_preview_field(): void { + $background_color = sanitize_hex_color( get_option( 'postnl_button_background_color', '#ff6200' ) ); + $border = sanitize_text_field( get_option( 'postnl_button_border', 'none' ) ); + $border_radius = absint( get_option( 'postnl_button_border_radius', '4' ) ); + $logo_url = POSTNL_WC_PLUGIN_DIR_URL . '/assets/images/postnl-logo.svg'; + + $button_style = 'background-color:' . esc_attr( $background_color ) . ';' + . 'border:' . esc_attr( $border ) . ';' + . 'border-radius:' . $border_radius . 'px;'; + ?> + + + +
+ +

+ +

+
+ + +
-

- +

\ No newline at end of file