Add option to choose if the checkout marks either required or optional fields, and style these options.

This commit is contained in:
Mike Jolley 2018-04-05 14:12:59 +01:00
parent 0091d7a18c
commit 3a6c3e002b
11 changed files with 77 additions and 18 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -139,12 +139,18 @@
.required {
color: firebrick;
text-decoration: none;
visibility: hidden; // Only show optional by default.
&[title] {
border-bottom: none;
border: 0 !important;
}
}
.optional {
visibility: visible;
}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1284,9 +1284,15 @@ p.demo_store,
.required {
color: red;
font-weight: 700;
border: 0;
border: 0 !important;
text-decoration: none;
visibility: hidden; // Only show optional by default.
}
.optional {
visibility: visible;
}
.input-checkbox {
display: inline;
margin: -2px 8px 0 0;

View File

@ -9,17 +9,23 @@ jQuery( function( $ ) {
var locale_json = wc_address_i18n_params.locale.replace( /"/g, '"' ),
locale = $.parseJSON( locale_json );
function field_is_required( field, is_required ) {
if ( is_required ) {
if ( field.find( 'label abbr.required' ).length === 0 ) {
field.find( 'label' ).append( '&nbsp;<abbr class="required" title="' + wc_address_i18n_params.i18n_required_text + '">*</abbr>' );
function field_is_required( field, is_required ) {
if ( is_required ) {
field.find( 'label .optional' ).remove();
field.addClass( 'validate-required' );
if ( field.find( 'label .required' ).length === 0 ) {
field.find( 'label' ).append( '&nbsp;<abbr class="required" title="' + wc_address_i18n_params.i18n_required_text + '">*</abbr>' );
}
} else {
field.find( 'label .required' ).remove();
field.removeClass( 'validate-required' );
if ( field.find( 'label .required' ).length === 0 ) {
field.find( 'label' ).append( '&nbsp;<span class="optional">(' + wc_address_i18n_params.i18n_optional_text + ')</span>' );
}
}
} else {
field.find( 'label abbr' ).remove();
field.removeClass( 'validate-required' );
}
}
$( document.body )

View File

@ -1 +1 @@
jQuery(function(e){function a(e,a){a?0===e.find("label abbr.required").length&&(e.find("label").append('&nbsp;<abbr class="required" title="'+wc_address_i18n_params.i18n_required_text+'">*</abbr>'),e.addClass("validate-required")):(e.find("label abbr").remove(),e.removeClass("validate-required"))}if("undefined"==typeof wc_address_i18n_params)return!1;var i=wc_address_i18n_params.locale.replace(/&quot;/g,'"'),d=e.parseJSON(i);e(document.body).bind("country_to_state_changing",function(i,t,r){var l,n=r;l="undefined"!=typeof d[t]?d[t]:d["default"];var o=n.find("#billing_postcode_field, #shipping_postcode_field"),s=n.find("#billing_city_field, #shipping_city_field"),f=n.find("#billing_state_field, #shipping_state_field");o.attr("data-o_class")||(o.attr("data-o_class",o.attr("class")),s.attr("data-o_class",s.attr("class")),f.attr("data-o_class",f.attr("class")));var p=e.parseJSON(wc_address_i18n_params.locale_fields);e.each(p,function(i,t){var r=n.find(t),o=e.extend(!0,{},d["default"][i],l[i]);"undefined"!=typeof o.label&&r.find("label").html(o.label),"undefined"!=typeof o.placeholder&&(r.find("input").attr("placeholder",o.placeholder),r.find(".select2-selection__placeholder").text(o.placeholder)),"undefined"!=typeof o.placeholder||"undefined"==typeof o.label||r.find("label").length||(r.find("input").attr("placeholder",o.label),r.find(".select2-selection__placeholder").text(o.label)),"undefined"!=typeof o.required?a(r,o.required):a(r,!1),"undefined"!=typeof o.priority&&r.data("priority",o.priority),"state"!==i&&("undefined"!=typeof o.hidden&&!0===o.hidden?r.hide().find("input").val(""):r.show())}),e(".woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper .woocommerce-account-fields").each(function(a,i){var d=e(i).find(".form-row"),t=d.first().parent(),r=0;d.each(function(){e(this).data("priority")||e(this).data("priority",r+1),r=e(this).data("priority")}),d.sort(function(a,i){var d=e(a).data("priority"),t=e(i).data("priority");return d>t?1:d<t?-1:0}),d.detach().appendTo(t)})})});
jQuery(function(e){function a(e,a){a?(e.find("label .optional").remove(),e.addClass("validate-required"),0===e.find("label .required").length&&e.find("label").append('&nbsp;<abbr class="required" title="'+wc_address_i18n_params.i18n_required_text+'">*</abbr>')):(e.find("label .required").remove(),e.removeClass("validate-required"),0===e.find("label .required").length&&e.find("label").append('&nbsp;<span class="optional">('+wc_address_i18n_params.i18n_optional_text+")</span>"))}if("undefined"==typeof wc_address_i18n_params)return!1;var i=wc_address_i18n_params.locale.replace(/&quot;/g,'"'),d=e.parseJSON(i);e(document.body).bind("country_to_state_changing",function(i,t,r){var l,n=r;l="undefined"!=typeof d[t]?d[t]:d["default"];var o=n.find("#billing_postcode_field, #shipping_postcode_field"),s=n.find("#billing_city_field, #shipping_city_field"),p=n.find("#billing_state_field, #shipping_state_field");o.attr("data-o_class")||(o.attr("data-o_class",o.attr("class")),s.attr("data-o_class",s.attr("class")),p.attr("data-o_class",p.attr("class")));var f=e.parseJSON(wc_address_i18n_params.locale_fields);e.each(f,function(i,t){var r=n.find(t),o=e.extend(!0,{},d["default"][i],l[i]);"undefined"!=typeof o.label&&r.find("label").html(o.label),"undefined"!=typeof o.placeholder&&(r.find("input").attr("placeholder",o.placeholder),r.find(".select2-selection__placeholder").text(o.placeholder)),"undefined"!=typeof o.placeholder||"undefined"==typeof o.label||r.find("label").length||(r.find("input").attr("placeholder",o.label),r.find(".select2-selection__placeholder").text(o.label)),"undefined"!=typeof o.required?a(r,o.required):a(r,!1),"undefined"!=typeof o.priority&&r.data("priority",o.priority),"state"!==i&&("undefined"!=typeof o.hidden&&!0===o.hidden?r.hide().find("input").val(""):r.show())}),e(".woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper .woocommerce-account-fields").each(function(a,i){var d=e(i).find(".form-row"),t=d.first().parent(),r=0;d.each(function(){e(this).data("priority")||e(this).data("priority",r+1),r=e(this).data("priority")}),d.sort(function(a,i){var d=e(a).data("priority"),t=e(i).data("priority");return d>t?1:d<t?-1:0}),d.detach().appendTo(t)})})});

View File

@ -412,6 +412,12 @@ class WC_Frontend_Scripts {
self::enqueue_style( $handle, $args['src'], $args['deps'], $args['version'], $args['media'], $args['has_rtl'] );
}
}
if ( true === wc_string_to_bool( get_option( 'woocommerce_checkout_label_required_fields', 'yes' ) ) ) {
wp_add_inline_style( 'woocommerce-general', '.woocommerce form .form-row .required { visibility: visible; } .woocommerce form .form-row .optional { visibility: hidden; }' );
} else {
wp_add_inline_style( 'woocommerce-general', '.woocommerce form .form-row .required { visibility: hidden; } .woocommerce form .form-row .optional { visibility: visible; }' );
}
}
/**
@ -509,6 +515,7 @@ class WC_Frontend_Scripts {
'locale' => wp_json_encode( WC()->countries->get_country_locale() ),
'locale_fields' => wp_json_encode( WC()->countries->get_country_locale_field_selectors() ),
'i18n_required_text' => esc_attr__( 'required', 'woocommerce' ),
'i18n_optional_text' => esc_html__( 'optional', 'woocommerce' ),
);
break;
case 'wc-cart':

View File

@ -170,6 +170,14 @@ class WC_Shop_Customizer {
} );
} );
wp.customize.section( 'woocommerce_checkout', function( section ) {
section.expanded.bind( function( isExpanded ) {
if ( isExpanded ) {
wp.customize.previewer.previewUrl.set( '<?php echo esc_js( wc_get_page_permalink( 'checkout' ) ); ?>' );
}
} );
} );
wp.customize( 'woocommerce_catalog_columns', function( setting ) {
setting.bind( function( value ) {
var min = parseInt( '<?php echo esc_js( $min_columns ); ?>', 10 );
@ -657,10 +665,36 @@ class WC_Shop_Customizer {
$wp_customize->add_section(
'woocommerce_checkout',
array(
'title' => __( 'Checkout Form Options', 'woocommerce' ),
'title' => __( 'Checkout', 'woocommerce' ),
'priority' => 20,
'panel' => 'woocommerce',
'description' => __( 'These options let you change the appearance of certain parts of the WooCommerce checkout form.', 'woocommerce' ),
'description' => __( 'These options let you change the appearance of certain parts of the WooCommerce checkout.', 'woocommerce' ),
)
);
// Register settings.
$wp_customize->add_setting(
'woocommerce_checkout_label_required_fields',
array(
'default' => 'yes',
'type' => 'option',
'capability' => 'manage_woocommerce',
)
);
// Register controls.
$wp_customize->add_control(
'woocommerce_checkout_label_required_fields',
array(
'label' => __( 'Label required fields', 'woocommerce' ),
'description' => __( 'Choose if required fields should be labeled with an asterisk, or if optional fields should be clearly marked instead.', 'woocommerce' ),
'section' => 'woocommerce_checkout',
'settings' => 'woocommerce_checkout_label_required_fields',
'type' => 'radio',
'choices' => array(
'yes' => __( 'Label required fields', 'woocommerce' ),
'no' => __( 'Label optional fields', 'woocommerce' ),
),
)
);
}

View File

@ -2160,7 +2160,7 @@ if ( ! function_exists( 'woocommerce_form_field' ) ) {
$args['class'][] = 'validate-required';
$required = '&nbsp;<abbr class="required" title="' . esc_attr__( 'required', 'woocommerce' ) . '">*</abbr>';
} else {
$required = '';
$required = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
}
if ( is_string( $args['label_class'] ) ) {