Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Setup wizard: Style store info form

This commit is contained in:
Valerie 2017-09-23 00:56:35 +03:00 committed by Jeff Stieler
parent 14bb189c8a
commit 1dadabaa56
2 changed files with 147 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
assets/css/wc-setup.scss
View File

@ -29,7 +29,7 @@ body {
clear: none; clear: none;
} }
p { p {
margin: 0 0 24px; margin: 24px 0;
font-size: 1em; font-size: 1em;
line-height: 1.75em; line-height: 1.75em;
color: #666; color: #666;
@ -718,3 +718,53 @@ h3.jetpack-reasons {
box-shadow: none; box-shadow: none;
} }
} }
.location-prompt {
color: #666;
font-size: 14px;
font-weight: bold;
margin-bottom: 0.5em;
margin-top: 1em;
display: inline-block;
}
.location-input {
border: 1px solid #aaa;
border-color: #ddd;
border-radius: 4px;
height: 30px;
width: calc(100% - 8px - 24px - 2px); // account for padding, border to align with other elements
padding-left: 8px;
padding-right: 24px;
font-size: 16px;
color: #444;
background-color: #fff;
display: inline-block;
&.dropdown {
width: 100%;
}
}
.address-step {
.select2 {
min-width: 100%; // widen currency, product type dropdowns
}
}
.store-address-container {
margin-bottom: 1em;
.city-and-postcode {
display: flex;
div {
flex-basis: 50%;
margin-right: 1em;
&:last-of-type {
margin-right: 0;
}
}
}
}

116
includes/admin/class-wc-admin-setup-wizard.php
View File

@ -293,49 +293,107 @@ class WC_Admin_Setup_Wizard {
?> ?>
<h1><?php esc_html_e( 'Welcome to the world of WooCommerce!', 'woocommerce' ); ?></h1> <h1><?php esc_html_e( 'Welcome to the world of WooCommerce!', 'woocommerce' ); ?></h1>
<form method="post"> <form method="post" class="address-step">
<p><?php esc_html_e( "Go through this quick setup wizard to configure basic settings — shouldn't take longer than five minutes.", 'woocommerce' ); ?></p> <p><?php esc_html_e( "Go through this quick setup wizard to configure basic settings — shouldn't take longer than five minutes.", 'woocommerce' ); ?></p>
<div> <label for="store_country_state" class="location-prompt">
<label><?php esc_html_e( 'Where is your store based?', 'woocommerce' ); ?></label> <?php esc_html_e( 'Where is your store based?', 'woocommerce' ); ?>
</div> </label>
<div> <select
<label for="store_address"><?php esc_html_e( 'Address', 'woocommerce' ); ?></label> id="store_country_state"
<input type="text" id="store_address" name="store_address" style="width:100%;" required value="<?php echo esc_attr( $address ); ?>" /> name="store_country_state"
<label for="store_address_2"><?php esc_html_e( 'Address line 2', 'woocommerce' ); ?></label> required
<input type="text" id="store_address_2" name="store_address_2" style="width:100%;" value="<?php echo esc_attr( $address_2 ); ?>" /> data-placeholder="<?php esc_attr_e( 'Choose a country&hellip;', 'woocommerce' ); ?>"
</div> aria-label="<?php esc_attr_e( 'Country', 'woocommerce' ) ?>"
<div style="width:33%; float:left;"> class="location-input wc-enhanced-select dropdown"
<label for="store_city"><?php esc_html_e( 'City', 'woocommerce' ); ?></label> >
<input type="text" id="store_city" name="store_city" required value="<?php echo esc_attr( $city ); ?>" />
</div>
<div style="width:33%; float:left;">
<label for="store_country_state"><?php esc_html_e( 'Country / State', 'woocommerce' ); ?></label>
<select id="store_country_state" name="store_country_state" style="width:100%;" required data-placeholder="<?php esc_attr_e( 'Choose a country&hellip;', 'woocommerce' ); ?>" aria-label="<?php esc_attr_e( 'Country', 'woocommerce' ) ?>" class="wc-enhanced-select">
<?php WC()->countries->country_dropdown_options( $country, $state ); ?> <?php WC()->countries->country_dropdown_options( $country, $state ); ?>
</select> </select>
</div>
<div style="width:33%; float:left;"> <div class="store-address-container">
<label for="store_postcode"><?php esc_html_e( 'Postcode / ZIP', 'woocommerce' ); ?></label> <label class="location-prompt" for="store_address">
<input type="text" id="store_postcode" name="store_postcode" required value="<?php echo esc_attr( $postcode ); ?>" /> <?php esc_html_e( 'Address', 'woocommerce' ); ?>
</label>
<input
type="text"
id="store_address"
class="location-input"
name="store_address"
required
value="<?php echo esc_attr( $address ); ?>"
/>
<label class="location-prompt" for="store_address_2">
<?php esc_html_e( 'Address line 2', 'woocommerce' ); ?>
</label>
<input
type="text"
id="store_address_2"
class="location-input"
name="store_address_2"
value="<?php echo esc_attr( $address_2 ); ?>"
/>
<div class="city-and-postcode">
<div>
<label class="location-prompt" for="store_city">
<?php esc_html_e( 'City', 'woocommerce' ); ?>
</label>
<input
type="text"
id="store_city"
class="location-input"
name="store_city"
required
value="<?php echo esc_attr( $city ); ?>"
/>
</div> </div>
<div> <div>
<label for="currency_code"><?php esc_html_e( 'What currency do you use?', 'woocommerce' ); ?></label> <label class="location-prompt" for="store_postcode">
<select id="currency_code" name="currency_code" style="width:100%;" required data-placeholder="<?php esc_attr_e( 'Choose a currency&hellip;', 'woocommerce' ); ?>" class="wc-enhanced-select"> <?php esc_html_e( 'Postcode / ZIP', 'woocommerce' ); ?>
</label>
<input
type="text"
id="store_postcode"
class="location-input"
name="store_postcode"
required
value="<?php echo esc_attr( $postcode ); ?>"
/>
</div>
</div>
</div>
<label class="location-prompt" for="currency_code">
<?php esc_html_e( 'What currency do you use?', 'woocommerce' ); ?>
</label>
<select
id="currency_code"
name="currency_code"
required
data-placeholder="<?php esc_attr_e( 'Choose a currency&hellip;', 'woocommerce' ); ?>"
class="location-input wc-enhanced-select dropdown"
>
<option value=""><?php esc_html_e( 'Choose a currency&hellip;', 'woocommerce' ); ?></option> <option value=""><?php esc_html_e( 'Choose a currency&hellip;', 'woocommerce' ); ?></option>
<?php foreach ( get_woocommerce_currencies() as $code => $name ) : ?> <?php foreach ( get_woocommerce_currencies() as $code => $name ) : ?>
<option value="<?php echo esc_attr( $code ); ?>" <?php selected( $currency, $code ); ?>><?php printf( esc_html__( '%1$s (%2$s)', 'woocommerce' ), $name, get_woocommerce_currency_symbol( $code ) ); ?></option> <option value="<?php echo esc_attr( $code ); ?>" <?php selected( $currency, $code ); ?>>
<?php printf( esc_html__( '%1$s (%2$s)', 'woocommerce' ), $name, get_woocommerce_currency_symbol( $code ) ); ?>
</option>
<?php endforeach; ?> <?php endforeach; ?>
</select> </select>
</div>
<div> <label class="location-prompt" for="product_type">
<label for="product_type"><?php esc_html_e( 'What type of product do you plan to sell?', 'woocommerce' ); ?></label> <?php esc_html_e( 'What type of product do you plan to sell?', 'woocommerce' ); ?>
<select id="product_type" name="product_type" style="width:100%;" required data-placeholder="<?php esc_attr_e( 'Please choose one&hellip;', 'woocommerce' ); ?>" class="wc-enhanced-select"> </label>
<select
id="product_type"
name="product_type"
required
data-placeholder="<?php esc_attr_e( 'Please choose one&hellip;', 'woocommerce' ); ?>"
class="location-input wc-enhanced-select dropdown"
>
<option value="" <?php selected( $product_type, '' ); ?>><?php esc_html_e( 'Please choose one&hellip;', 'woocommerce' ); ?></option> <option value="" <?php selected( $product_type, '' ); ?>><?php esc_html_e( 'Please choose one&hellip;', 'woocommerce' ); ?></option>
<option value="physical" <?php selected( $product_type, 'physical' ); ?>><?php esc_html_e( 'I plan to sell physical products', 'woocommerce' ); ?></option> <option value="physical" <?php selected( $product_type, 'physical' ); ?>><?php esc_html_e( 'I plan to sell physical products', 'woocommerce' ); ?></option>
<option value="virtual" <?php selected( $product_type, 'virtual' ); ?>><?php esc_html_e( 'I plan to sell digital products', 'woocommerce' ); ?></option> <option value="virtual" <?php selected( $product_type, 'virtual' ); ?>><?php esc_html_e( 'I plan to sell digital products', 'woocommerce' ); ?></option>
<option value="both" <?php selected( $product_type, 'both' ); ?>><?php esc_html_e( 'I plan to sell both', 'woocommerce' ); ?></option> <option value="both" <?php selected( $product_type, 'both' ); ?>><?php esc_html_e( 'I plan to sell both', 'woocommerce' ); ?></option>
</select> </select>
</div>
<?php if ( 'unknown' === get_option( 'woocommerce_allow_tracking', 'unknown' ) ) : ?> <?php if ( 'unknown' === get_option( 'woocommerce_allow_tracking', 'unknown' ) ) : ?>
<div> <div>
<input type="checkbox" id="wc_tracker_optin" name="wc_tracker_optin" value="yes" checked /> <input type="checkbox" id="wc_tracker_optin" name="wc_tracker_optin" value="yes" checked />