Implement WooCommerce Services NUX in Setup Wizard:

- Rename "shipping locale" to "shipping location"
- Move tax setup to to shipping location page
- Rename shipping & taxes to just shipping
- Implement radio button selection to enable/disable shipping
- Add checkbox for installing WooCommerce services
- Start updating wc-admin css and javascript
This commit is contained in:
Nabeel Sulieman 2017-05-26 14:12:49 -07:00 committed by Nabeel Sulieman
parent e3b8f7c3c2
commit 1122faf760
6 changed files with 271 additions and 136 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

@ -442,6 +442,111 @@ body {
}
}
ul.wc-wizard-shipping-settings {
border: 1px solid #eee;
border-bottom-width: 2px;
padding: 0;
margin: 0 0 1em;
list-style: none outside;
border-radius: 4px;
li.wc-wizard-shipping {
padding: 1.5em 1em 1em 4em;
border-top: 1px solid #eee;
list-style: none outside;
cursor: pointer;
color: #555;
box-sizing: border-box;
clear: both;
&:first-child {
border-top: 0;
}
&.featured {
width: 50%;
float: left;
clear: none;
border-right: 1px solid #eee;
border-top: 0;
}
&.featured-row-last {
border-right: 0;
}
.wc-wizard-shipping-settings {
display: none;
margin-bottom: 0;
cursor: default;
}
&.checked {
background: #f7f1f6;
.wc-wizard-shipping-settings {
display: table;
}
}
.wc-wizard-shipping-description {
font-style: italic;
p {
margin: 0 0 0.5em;
}
}
.wc-wizard-shipping-enable {
margin: 0 0 0.5em;
label {
display: block;
font-weight: bold;
vertical-align: middle;
img {
max-height: 2em;
vertical-align: middle;
}
}
label::before {
content: '';
background: #fff;
border: 2px solid #eee;
display: inline-block;
float: left;
vertical-align: middle;
width: 2em;
height: 2em;
padding: 0;
box-sizing: border-box;
line-height: 1.8em;
text-align: center;
margin: 0 1em 0 -3em;
border-radius: 4px;
}
input {
opacity: 0;
width: 0;
position: absolute;
&:checked + label::before {
content: '\f147';
font-family: 'dashicons';
color: #fff;
border-color: #a46497;
background: #a46497;
}
&:focus + label {
outline: 1px solid #ddd; /* focus style */
}
}
}
}
}
ul.wc-wizard-payment-gateways {
border: 1px solid #eee;
border-bottom-width: 2px;

View File

@ -46,6 +46,19 @@ jQuery( function( $ ) {
return true;
} );
$( '.wc-wizard-shipping-settings' ).on( 'change', '.wc-wizard-shipping-enabled input', function() {
if ( $( this ).is( ':checked' ) ) {
$( this ).closest( 'li' ).addClass( 'checked' );
} else {
$( this ).closest( 'li' ).removeClass( 'checked' );
}
} );
$( '.wc-wizard-shipping-settings' ).on( 'click', 'li.wc-wizard-shipping-enabled', function() {
var $enabled = $( this ).find( '.wc-wizard-shipping-enabled input' );
$enabled.prop( 'checked', ! $enabled.prop( 'checked' ) ).change();
} );
$( '.wc-wizard-payment-gateways' ).on( 'change', '.wc-wizard-gateway-enable input', function() {
if ( $( this ).is( ':checked' ) ) {
$( this ).closest( 'li' ).addClass( 'checked' );

View File

@ -1 +1 @@
jQuery(function(a){var b=a.parseJSON(wc_setup_params.locale_info);a('select[name="store_location"]').change(function(){var c=a(this).val(),d=c.split(":")[0],e=b[d],f=["thousand_sep","decimal_sep","num_decimals","currency_pos"];e?a.each(e,function(b,c){a(':input[name="'+b+'"]').val(c).change(),-1!==a.inArray(b,f)&&a(':input[name="'+b+'"]').closest("tr").hide()}):(a(':input[name="currency_pos"]').closest("tr").show(),a(':input[name="thousand_sep"]').closest("tr").show(),a(':input[name="decimal_sep"]').closest("tr").show(),a(':input[name="num_decimals"]').closest("tr").show())}).change(),a('input[name="woocommerce_calc_taxes"]').change(function(){a(this).is(":checked")?(a(':input[name="woocommerce_prices_include_tax"], :input[name="woocommerce_import_tax_rates"]').closest("tr").show(),a("tr.tax-rates").show()):(a(':input[name="woocommerce_prices_include_tax"], :input[name="woocommerce_import_tax_rates"]').closest("tr").hide(),a("tr.tax-rates").hide())}).change(),a(".button-next").on("click",function(){return a(".wc-setup-content").block({message:null,overlayCSS:{background:"#fff",opacity:.6}}),!0}),a(".wc-wizard-payment-gateways").on("change",".wc-wizard-gateway-enable input",function(){a(this).is(":checked")?a(this).closest("li").addClass("checked"):a(this).closest("li").removeClass("checked")}),a(".wc-wizard-payment-gateways").on("click","li.wc-wizard-gateway",function(){var b=a(this).find(".wc-wizard-gateway-enable input");b.prop("checked",!b.prop("checked")).change()}),a(".wc-wizard-payment-gateways").on("click","li.wc-wizard-gateway table, li.wc-wizard-gateway a",function(a){a.stopPropagation()})});
jQuery(function(a){var b=a.parseJSON(wc_setup_params.locale_info);a('select[name="store_location"]').change(function(){var c=a(this).val(),d=c.split(":")[0],e=b[d],f=["thousand_sep","decimal_sep","num_decimals","currency_pos"];e?a.each(e,function(b,c){a(':input[name="'+b+'"]').val(c).change(),-1!==a.inArray(b,f)&&a(':input[name="'+b+'"]').closest("tr").hide()}):(a(':input[name="currency_pos"]').closest("tr").show(),a(':input[name="thousand_sep"]').closest("tr").show(),a(':input[name="decimal_sep"]').closest("tr").show(),a(':input[name="num_decimals"]').closest("tr").show())}).change(),a('input[name="woocommerce_calc_taxes"]').change(function(){a(this).is(":checked")?(a(':input[name="woocommerce_prices_include_tax"], :input[name="woocommerce_import_tax_rates"]').closest("tr").show(),a("tr.tax-rates").show()):(a(':input[name="woocommerce_prices_include_tax"], :input[name="woocommerce_import_tax_rates"]').closest("tr").hide(),a("tr.tax-rates").hide())}).change(),a(".button-next").on("click",function(){return a(".wc-setup-content").block({message:null,overlayCSS:{background:"#fff",opacity:.6}}),!0}),a(".wc-wizard-shipping-settings").on("change",".wc-wizard-shipping-enabled input",function(){a(this).is(":checked")?a(this).closest("li").addClass("checked"):a(this).closest("li").removeClass("checked")}),a(".wc-wizard-shipping-settings").on("click","li.wc-wizard-shipping-enabled",function(){var b=a(this).find(".wc-wizard-shipping-enabled input");b.prop("checked",!b.prop("checked")).change()}),a(".wc-wizard-payment-gateways").on("change",".wc-wizard-gateway-enable input",function(){a(this).is(":checked")?a(this).closest("li").addClass("checked"):a(this).closest("li").removeClass("checked")}),a(".wc-wizard-payment-gateways").on("click","li.wc-wizard-gateway",function(){var b=a(this).find(".wc-wizard-gateway-enable input");b.prop("checked",!b.prop("checked")).change()}),a(".wc-wizard-payment-gateways").on("click","li.wc-wizard-gateway table, li.wc-wizard-gateway a",function(a){a.stopPropagation()})});

View File

@ -66,12 +66,12 @@ class WC_Admin_Setup_Wizard {
'handler' => array( $this, 'wc_setup_pages_save' ),
),
'locale' => array(
'name' => __( 'Store locale', 'woocommerce' ),
'name' => __( 'Store location', 'woocommerce' ),
'view' => array( $this, 'wc_setup_locale' ),
'handler' => array( $this, 'wc_setup_locale_save' ),
),
'shipping_taxes' => array(
'name' => __( 'Shipping & tax', 'woocommerce' ),
'name' => __( 'Shipping', 'woocommerce' ),
'view' => array( $this, 'wc_setup_shipping_taxes' ),
'handler' => array( $this, 'wc_setup_shipping_taxes_save' ),
),
@ -322,7 +322,7 @@ class WC_Admin_Setup_Wizard {
$dimension_unit = get_option( 'woocommerce_dimension_unit', 'cm' );
$weight_unit = get_option( 'woocommerce_weight_unit', 'kg' );
?>
<h1><?php esc_html_e( 'Store locale setup', 'woocommerce' ); ?></h1>
<h1><?php esc_html_e( 'Store location setup', 'woocommerce' ); ?></h1>
<form method="post">
<table class="form-table">
<tr>
@ -399,6 +399,73 @@ class WC_Admin_Setup_Wizard {
</select>
</td>
</tr>
<tr>
<th scope="row"><label for="woocommerce_calc_taxes"><?php esc_html_e( 'Will you be charging sales tax?', 'woocommerce' ); ?></label></th>
<td>
<input type="checkbox" <?php checked( get_option( 'woocommerce_calc_taxes', 'no' ), 'yes' ); ?> id="woocommerce_calc_taxes" name="woocommerce_calc_taxes" class="input-checkbox" value="1" />
<label for="woocommerce_calc_taxes"><?php esc_html_e( 'Yes, I will be charging sales tax', 'woocommerce' ); ?></label>
</td>
</tr>
<tr>
<th scope="row"><label for="woocommerce_prices_include_tax"><?php esc_html_e( 'How will you enter product prices?', 'woocommerce' ); ?></label></th>
<td>
<label><input type="radio" <?php checked( get_option( 'woocommerce_prices_include_tax', 'no' ), 'yes' ); ?> id="woocommerce_prices_include_tax" name="woocommerce_prices_include_tax" class="input-radio" value="yes" /> <?php esc_html_e( 'I will enter prices inclusive of tax', 'woocommerce' ); ?></label><br/>
<label><input type="radio" <?php checked( get_option( 'woocommerce_prices_include_tax', 'no' ), 'no' ); ?> id="woocommerce_prices_include_tax" name="woocommerce_prices_include_tax" class="input-radio" value="no" /> <?php esc_html_e( 'I will enter prices exclusive of tax', 'woocommerce' ); ?></label>
</td>
</tr>
<?php
$locale_info = include( WC()->plugin_path() . '/i18n/locale-info.php' );
$tax_rates = array();
$country = WC()->countries->get_base_country();
$state = WC()->countries->get_base_state();
if ( isset( $locale_info[ $country ] ) ) {
if ( isset( $locale_info[ $country ]['tax_rates'][ $state ] ) ) {
$tax_rates = $locale_info[ $country ]['tax_rates'][ $state ];
} elseif ( isset( $locale_info[ $country ]['tax_rates'][''] ) ) {
$tax_rates = $locale_info[ $country ]['tax_rates'][''];
}
if ( isset( $locale_info[ $country ]['tax_rates']['*'] ) ) {
$tax_rates = array_merge( $locale_info[ $country ]['tax_rates']['*'], $tax_rates );
}
}
if ( $tax_rates ) {
?>
<tr class="tax-rates">
<td colspan="2">
<p><?php printf( __( 'The following tax rates will be imported automatically for you. You can read more about taxes in <a href="%s" target="_blank">our documentation</a>.', 'woocommerce' ), 'https://docs.woocommerce.com/document/setting-up-taxes-in-woocommerce/' ); ?></p>
<div class="importing-tax-rates">
<table class="tax-rates">
<thead>
<tr>
<th><?php esc_html_e( 'Country', 'woocommerce' ); ?></th>
<th><?php esc_html_e( 'State', 'woocommerce' ); ?></th>
<th><?php esc_html_e( 'Rate (%)', 'woocommerce' ); ?></th>
<th><?php esc_html_e( 'Name', 'woocommerce' ); ?></th>
</tr>
</thead>
<tbody>
<?php
foreach ( $tax_rates as $rate ) {
?>
<tr>
<td class="readonly"><?php echo esc_attr( $rate['country'] ); ?></td>
<td class="readonly"><?php echo esc_attr( $rate['state'] ? $rate['state'] : '*' ); ?></td>
<td class="readonly"><?php echo esc_attr( $rate['rate'] ); ?></td>
<td class="readonly"><?php echo esc_attr( $rate['name'] ); ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<p class="description"><?php printf( __( 'You may need to add/edit rates based on your products or business location which can be done from the <a href="%s" target="_blank">tax settings</a> screen. If in doubt, speak to an accountant.', 'woocommerce' ), esc_url( admin_url( 'admin.php?page=wc-settings&tab=tax' ) ) ); ?></p>
</td>
</tr>
<?php
}
?>
</table>
<p class="wc-setup-actions step">
<input type="submit" class="button-primary button button-large button-next" value="<?php esc_attr_e( 'Continue', 'woocommerce' ); ?>" name="save_step" />
@ -433,137 +500,7 @@ class WC_Admin_Setup_Wizard {
update_option( 'woocommerce_weight_unit', $weight_unit );
update_option( 'woocommerce_dimension_unit', $dimension_unit );
wp_redirect( esc_url_raw( $this->get_next_step_link() ) );
exit;
}
/**
* Shipping and taxes.
*/
public function wc_setup_shipping_taxes() {
?>
<h1><?php esc_html_e( 'Shipping &amp; Tax setup', 'woocommerce' ); ?></h1>
<form method="post">
<p><?php esc_html_e( 'If you will be charging sales tax, or shipping physical goods to customers, you can enable these below. This is optional and can be changed later.', 'woocommerce' ); ?></p>
<table class="form-table">
<tr>
<th scope="row"><label for="woocommerce_calc_shipping"><?php esc_html_e( 'Will you be shipping products?', 'woocommerce' ); ?></label></th>
<td>
<input type="checkbox" id="woocommerce_calc_shipping" <?php checked( get_option( 'woocommerce_ship_to_countries', '' ) !== 'disabled', true ); ?> name="woocommerce_calc_shipping" class="input-checkbox" value="1" />
<label for="woocommerce_calc_shipping"><?php esc_html_e( 'Yes, I will be shipping physical goods to customers', 'woocommerce' ); ?></label>
</td>
</tr>
<tr>
<th scope="row"><label for="woocommerce_calc_taxes"><?php esc_html_e( 'Will you be charging sales tax?', 'woocommerce' ); ?></label></th>
<td>
<input type="checkbox" <?php checked( get_option( 'woocommerce_calc_taxes', 'no' ), 'yes' ); ?> id="woocommerce_calc_taxes" name="woocommerce_calc_taxes" class="input-checkbox" value="1" />
<label for="woocommerce_calc_taxes"><?php esc_html_e( 'Yes, I will be charging sales tax', 'woocommerce' ); ?></label>
</td>
</tr>
<tr>
<th scope="row"><label for="woocommerce_prices_include_tax"><?php esc_html_e( 'How will you enter product prices?', 'woocommerce' ); ?></label></th>
<td>
<label><input type="radio" <?php checked( get_option( 'woocommerce_prices_include_tax', 'no' ), 'yes' ); ?> id="woocommerce_prices_include_tax" name="woocommerce_prices_include_tax" class="input-radio" value="yes" /> <?php esc_html_e( 'I will enter prices inclusive of tax', 'woocommerce' ); ?></label><br/>
<label><input type="radio" <?php checked( get_option( 'woocommerce_prices_include_tax', 'no' ), 'no' ); ?> id="woocommerce_prices_include_tax" name="woocommerce_prices_include_tax" class="input-radio" value="no" /> <?php esc_html_e( 'I will enter prices exclusive of tax', 'woocommerce' ); ?></label>
</td>
</tr>
<?php
$locale_info = include( WC()->plugin_path() . '/i18n/locale-info.php' );
$tax_rates = array();
$country = WC()->countries->get_base_country();
$state = WC()->countries->get_base_state();
if ( isset( $locale_info[ $country ] ) ) {
if ( isset( $locale_info[ $country ]['tax_rates'][ $state ] ) ) {
$tax_rates = $locale_info[ $country ]['tax_rates'][ $state ];
} elseif ( isset( $locale_info[ $country ]['tax_rates'][''] ) ) {
$tax_rates = $locale_info[ $country ]['tax_rates'][''];
}
if ( isset( $locale_info[ $country ]['tax_rates']['*'] ) ) {
$tax_rates = array_merge( $locale_info[ $country ]['tax_rates']['*'], $tax_rates );
}
}
if ( $tax_rates ) {
?>
<tr class="tax-rates">
<td colspan="2">
<p><?php printf( __( 'The following tax rates will be imported automatically for you. You can read more about taxes in <a href="%s" target="_blank">our documentation</a>.', 'woocommerce' ), 'https://docs.woocommerce.com/document/setting-up-taxes-in-woocommerce/' ); ?></p>
<div class="importing-tax-rates">
<table class="tax-rates">
<thead>
<tr>
<th><?php esc_html_e( 'Country', 'woocommerce' ); ?></th>
<th><?php esc_html_e( 'State', 'woocommerce' ); ?></th>
<th><?php esc_html_e( 'Rate (%)', 'woocommerce' ); ?></th>
<th><?php esc_html_e( 'Name', 'woocommerce' ); ?></th>
</tr>
</thead>
<tbody>
<?php
foreach ( $tax_rates as $rate ) {
?>
<tr>
<td class="readonly"><?php echo esc_attr( $rate['country'] ); ?></td>
<td class="readonly"><?php echo esc_attr( $rate['state'] ? $rate['state'] : '*' ); ?></td>
<td class="readonly"><?php echo esc_attr( $rate['rate'] ); ?></td>
<td class="readonly"><?php echo esc_attr( $rate['name'] ); ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<p class="description"><?php printf( __( 'You may need to add/edit rates based on your products or business location which can be done from the <a href="%s" target="_blank">tax settings</a> screen. If in doubt, speak to an accountant.', 'woocommerce' ), esc_url( admin_url( 'admin.php?page=wc-settings&tab=tax' ) ) ); ?></p>
</td>
</tr>
<?php
}
?>
</table>
<p class="wc-setup-actions step">
<input type="submit" class="button-primary button button-large button-next" value="<?php esc_attr_e( 'Continue', 'woocommerce' ); ?>" name="save_step" />
<a href="<?php echo esc_url( $this->get_next_step_link() ); ?>" class="button button-large button-next"><?php esc_html_e( 'Skip this step', 'woocommerce' ); ?></a>
<?php wp_nonce_field( 'wc-setup' ); ?>
</p>
</form>
<?php
}
/**
* Save shipping and tax options.
*/
public function wc_setup_shipping_taxes_save() {
check_admin_referer( 'wc-setup' );
$enable_shipping = isset( $_POST['woocommerce_calc_shipping'] );
$enable_taxes = isset( $_POST['woocommerce_calc_taxes'] );
$current_shipping = get_option( 'woocommerce_ship_to_countries' );
if ( $enable_shipping ) {
update_option( 'woocommerce_ship_to_countries', '' );
WC_Admin_Notices::add_notice( 'no_shipping_methods' );
/*
* If this is the initial shipping setup, create a shipping
* zone containing the country the store is located in, with
* a "free shipping" method preconfigured.
*/
if ( false === $current_shipping ) {
$default_country = get_option( 'woocommerce_default_country' );
$location = wc_format_country_state_string( $default_country );
$zone = new WC_Shipping_Zone( null );
$zone->set_zone_order( 0 );
$zone->add_location( $location['country'], 'country' );
$zone->set_zone_name( $zone->get_formatted_location() );
$zone->add_shipping_method( 'free_shipping' );
$zone->save();
}
} else {
update_option( 'woocommerce_ship_to_countries', 'disabled' );
}
update_option( 'woocommerce_calc_taxes', $enable_taxes ? 'yes' : 'no' );
update_option( 'woocommerce_prices_include_tax', sanitize_text_field( $_POST['woocommerce_prices_include_tax'] ) );
@ -606,6 +543,86 @@ class WC_Admin_Setup_Wizard {
exit;
}
/**
* Shipping and taxes.
*/
public function wc_setup_shipping_taxes() {
?>
<h1><?php esc_html_e( 'Shipping', 'woocommerce' ); ?></h1>
<form method="post">
<p>
<?php esc_html_e( 'Complete your online store with shipping preferences that enable you to fulfill your orders in minutes.' ); ?>
</p>
<ul class="wc-wizard-shipping-settings">
<li class="wc-wizard-shipping wc-wizard-shipping-enabled">
<div class="wc-wizard-shipping-enable">
<input type="radio" name="wc-wizard-shipping-enabled" class="wc-wizard-shipping-enabled input-radio" value="shipping-enabled" checked />
<label>
<?php echo esc_html( 'I will be shipping physical goods to customers' ); ?>
</label>
</div>
<div class="wc-wizard-shipping-description">
<input type="checkbox" name="wc-wizard-shipping-woo-services" class="input-checkbox" value="woo-services-enabled" checked />
<?php echo esc_html( 'Use WooCommerce Services' ); ?>
<?php echo wp_kses_post( wpautop( 'Provide your customers with accurate shipping prices, and help cover your shipping costs with live shipping rates, discounted label purchasing and printing services. All powered by Jetpack and WordPress.com.' ) ); ?>
</div>
<div class="wc-wizard-shipping-description">
<?php echo wp_kses_post( wpautop( 'Select this option if you are shipping physical goods to your customers.' ) ); ?>
</div>
</li>
<li class="wc-wizard-shipping wc-wizard-shipping-disabled">
<div class="wc-wizard-shipping-enable">
<input type="radio" name="wc-wizard-shipping-enabled" class="wc-wizard-shipping-enabled input-checkbox" value="shipping-enabled" />
<label>
<?php echo esc_html( 'I will not be shipping physical goods to customers' ); ?>
</label>
</div>
<div class="wc-wizard-shipping-description">
<?php echo wp_kses_post( wpautop( 'Select this option if you are selling digital products or other non-physical goods.' ) ); ?>
</div>
</li>
</ul>
</form>
<?php
}
/**
* Save shipping and tax options.
*/
public function wc_setup_shipping_taxes_save() {
check_admin_referer( 'wc-setup' );
$enable_shipping = isset( $_POST['woocommerce_calc_shipping'] );
$current_shipping = get_option( 'woocommerce_ship_to_countries' );
if ( $enable_shipping ) {
update_option( 'woocommerce_ship_to_countries', '' );
WC_Admin_Notices::add_notice( 'no_shipping_methods' );
/*
* If this is the initial shipping setup, create a shipping
* zone containing the country the store is located in, with
* a "free shipping" method preconfigured.
*/
if ( false === $current_shipping ) {
$default_country = get_option( 'woocommerce_default_country' );
$location = wc_format_country_state_string( $default_country );
$zone = new WC_Shipping_Zone( null );
$zone->set_zone_order( 0 );
$zone->add_location( $location['country'], 'country' );
$zone->set_zone_name( $zone->get_formatted_location() );
$zone->add_shipping_method( 'free_shipping' );
$zone->save();
}
} else {
update_option( 'woocommerce_ship_to_countries', 'disabled' );
}
wp_redirect( esc_url_raw( $this->get_next_step_link() ) );
exit;
}
/**
* Simple array of gateways to show in wizard.
* @return array