Setup wizard: update “activate” step overall structure.
Change the Jetpack feature descriptions, graphic, placement of CTA button. Note: completely unstyled.
This commit is contained in:
Jeff Stieler
parent
189fbd571b
commit
1a8cb7a6a4
|
|
@ -0,0 +1,53 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="139px" height="141px" viewBox="0 0 139 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Jetpack-green-logo</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs>
|
||||
<polygon id="path-1" points="0 0.5542 0 136 135.4457 136 135.4457 0.5542"></polygon>
|
||||
<polygon id="path-3" points="77.6435 59 0.4395 59 0.4395 0.0825 77.6435 0.0825 77.6435 59"></polygon>
|
||||
<polygon id="path-5" points="7.402 0.8152 7.402 7.9552 0.2622 7.9552 0.2622 0.8152 7.402 0.8152"></polygon>
|
||||
</defs>
|
||||
<g id="Wizard---HiFi" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="05---Activate-Copy-2" transform="translate(-651.000000, -369.000000)">
|
||||
<g id="Jetpack-green-logo" transform="translate(651.000000, 369.000000)">
|
||||
<g id="Group-3" transform="translate(0.000000, 4.651000)">
|
||||
<mask id="mask-2" fill="white">
|
||||
<use xlink:href="#path-1"></use>
|
||||
</mask>
|
||||
<g id="Clip-2"></g>
|
||||
<path d="M67.7227,0.5542 C30.3207,0.5542 -0.0003,30.8752 -0.0003,68.2782 C-0.0003,72.2862 0.3687,76.2082 1.0367,80.0262 C4.9877,82.5422 9.9887,83.1572 14.5867,82.8632 C28.6607,81.9632 38.6187,71.3092 47.9357,61.9912 C48.1877,61.7392 52.3447,57.5822 52.3447,57.5822 L61.8337,71.9432 L19.7847,116.1112 C32.0437,128.3972 48.9947,136.0002 67.7227,136.0002 C105.1247,136.0002 135.4457,105.6802 135.4457,68.2782 C135.4457,30.8752 105.1247,0.5542 67.7227,0.5542" id="Fill-1" fill="#C2DAAA" mask="url(#mask-2)"></path>
|
||||
</g>
|
||||
<path d="M90.4863,102.4132 C90.4863,98.5002 93.6583,95.3282 97.5713,95.3282 C101.4843,95.3282 104.6563,98.5002 104.6563,102.4132 C104.6563,106.3252 101.4843,109.4982 97.5713,109.4982 C93.6583,109.4982 90.4863,106.3252 90.4863,102.4132" id="Fill-4" fill="#639B34"></path>
|
||||
<path d="M39.5879,74.8097 C42.4809,72.1547 45.2349,69.3427 47.9359,66.6417 C48.1879,66.3897 52.3449,62.2337 52.3449,62.2337 L61.8339,76.5937 L51.3319,87.6247 C51.6969,88.7267 51.8999,89.8707 51.8389,91.0427 C51.7139,93.4637 46.5109,95.6197 44.7729,97.3057 C43.0339,98.9917 44.7589,100.2087 42.3969,100.7527 C41.0769,101.0567 39.7409,101.1857 38.3979,101.2097 L24.8139,115.4787 C32.6699,108.9377 43.3129,111.9837 53.0919,112.5077 C55.5879,112.6417 58.0269,111.0507 60.3499,110.7797 C64.0429,110.3457 67.3459,109.2197 70.4699,107.2517 C72.0179,106.2777 73.8259,106.3027 75.0169,104.8977 C78.9249,100.2827 80.4739,92.7407 84.3289,88.0807 C86.7879,85.1087 89.9189,83.6027 92.9359,81.7337 C83.6429,59.3417 61.5789,43.5877 35.8279,43.5777 C34.7249,45.3707 33.8329,47.2907 33.2199,49.3107 C30.5489,58.1147 33.0919,68.2937 39.5879,74.8097" id="Fill-6" fill="#8CC258"></path>
|
||||
<path d="M19.8057,120.7394 C20.0197,120.9534 20.2227,121.1794 20.4397,121.3914 C20.9527,120.1784 21.6227,119.0434 22.4237,117.9894 L19.8057,120.7394 Z" id="Fill-8" fill="#8CC258"></path>
|
||||
<path d="M42.397,100.753 C44.759,100.209 43.034,98.991 44.772,97.306 C46.511,95.619 51.714,93.464 51.839,91.043 C51.899,89.87 51.697,88.727 51.332,87.625 L38.398,101.21 C39.741,101.186 41.077,101.057 42.397,100.753" id="Fill-10" fill="#7BAC48"></path>
|
||||
<path d="M14.5864,87.5138 C24.5824,86.8748 32.4994,81.3158 39.5874,74.8098 C33.0914,68.2938 30.5494,58.1148 33.2194,49.3108 C33.8324,47.2908 34.7244,45.3698 35.8274,43.5768 C35.8184,43.5768 35.8094,43.5758 35.8004,43.5758 C23.7404,43.5758 12.4954,47.0408 2.9824,53.0108 C1.0464,59.3088 0.0004,65.9958 0.0004,72.9288 C0.0004,76.9368 0.3614,80.8598 1.0324,84.6748 C4.9834,87.1928 9.9874,87.8088 14.5864,87.5138" id="Fill-12" fill="#7BAC48"></path>
|
||||
<g id="Group-16" transform="translate(20.000000, 81.651000)">
|
||||
<mask id="mask-4" fill="white">
|
||||
<use xlink:href="#path-3"></use>
|
||||
</mask>
|
||||
<g id="Clip-15"></g>
|
||||
<path d="M72.9355,0.0825 C69.9185,1.9515 66.7875,3.4575 64.3285,6.4305 C60.4735,11.0895 58.9255,18.6315 55.0165,23.2465 C53.8255,24.6515 52.0185,24.6265 50.4695,25.6015 C47.3455,27.5685 44.0425,28.6945 40.3505,29.1285 C38.0275,29.3995 35.5875,30.9905 33.0915,30.8565 C23.3125,30.3325 12.6695,27.2865 4.8135,33.8275 L2.4235,36.3385 C1.6225,37.3925 0.9525,38.5275 0.4395,39.7405 C12.6445,51.6505 29.3215,59.0005 47.7225,59.0005 C55.0845,59.0005 62.1645,57.8105 68.8005,55.6385 C74.4115,46.3305 77.6435,35.4285 77.6435,23.7685 C77.6435,15.3765 75.9635,7.3795 72.9355,0.0825" id="Fill-14" fill="#7BAC48" mask="url(#mask-4)"></path>
|
||||
</g>
|
||||
<path d="M22.4238,117.9894 L24.8138,115.4784 C24.6068,115.6504 24.4008,115.8254 24.1978,116.0104 C23.5328,116.6204 22.9548,117.2904 22.4238,117.9894" id="Fill-17" fill="#FFFFFF"></path>
|
||||
<g id="Group-21" transform="translate(131.000000, 59.651000)">
|
||||
<mask id="mask-6" fill="white">
|
||||
<use xlink:href="#path-5"></use>
|
||||
</mask>
|
||||
<g id="Clip-20"></g>
|
||||
<path d="M0.2622,4.3852 C0.2622,2.4132 1.8612,0.8152 3.8322,0.8152 C5.8042,0.8152 7.4022,2.4132 7.4022,4.3852 C7.4022,6.3572 5.8042,7.9552 3.8322,7.9552 C1.8612,7.9552 0.2622,6.3572 0.2622,4.3852" id="Fill-19" fill="#70B130" mask="url(#mask-6)"></path>
|
||||
</g>
|
||||
<path d="M95.4727,12.212 C95.4727,11.053 96.4117,10.113 97.5717,10.113 C98.7297,10.113 99.6697,11.053 99.6697,12.212 C99.6697,13.37 98.7297,14.311 97.5717,14.311 C96.4117,14.311 95.4727,13.37 95.4727,12.212" id="Fill-22" fill="#639B34"></path>
|
||||
<path d="M39.5874,30.5948 C39.5874,28.6048 41.2014,26.9908 43.1914,26.9908 C45.1824,26.9908 46.7954,28.6048 46.7954,30.5948 C46.7954,32.5848 45.1824,34.1988 43.1914,34.1988 C41.2014,34.1988 39.5874,32.5848 39.5874,30.5948" id="Fill-24" fill="#FFFFFF"></path>
|
||||
<polygon id="Fill-26" fill="#70B130" points="52.3047 9.7413 57.7277 7.5823 52.3047 5.4243 50.1457 0.0003 47.9867 5.4243 42.5627 7.5823 47.9867 9.7413 50.1457 15.1653"></polygon>
|
||||
<polygon id="Fill-28" fill="#FFFFFF" points="114.3955 72.3673 116.7035 67.0063 111.3415 69.3143 105.9805 67.0063 108.2885 72.3673 105.9805 77.7283 111.3415 75.4213 116.7035 77.7283"></polygon>
|
||||
<polygon id="Fill-30" fill="#FFFFFF" points="73.8223 18.297 75.5013 14.396 71.6003 16.075 67.6993 14.396 69.3793 18.297 67.6993 22.197 71.6003 20.519 75.5013 22.197"></polygon>
|
||||
<polygon id="Fill-32" fill="#FFFFFF" points="117.7373 46.9513 120.3333 45.9173 117.7373 44.8843 116.7033 42.2873 115.6703 44.8843 113.0733 45.9173 115.6703 46.9513 116.7033 49.5473"></polygon>
|
||||
<path d="M81.354,30.3155 L86.304,35.2205 L83.807,39.7905 C83.807,39.7905 76.394,40.0615 75.994,39.8935 C75.593,39.7245 73.699,35.7465 74.077,35.1765 C74.457,34.6085 80.189,30.3925 80.189,30.3925 L81.354,30.3155" id="Fill-34" fill="#FFFFFF"></path>
|
||||
<path d="M63.4233,44.8595 L45.1843,63.0975 L50.5153,68.4285 L54.6443,72.5575 L78.1593,49.0415 L74.0313,44.9135 L73.9783,44.8595 C71.0633,41.9445 66.3383,41.9445 63.4233,44.8595" id="Fill-36" fill="#498E0B"></path>
|
||||
<path d="M112.5933,18.2198 C110.5823,18.2198 108.9513,19.8498 108.9513,21.8618 L108.9513,24.1648 L100.3573,28.4748 C95.8743,30.7238 92.0683,34.0668 89.2313,38.1478 L85.5343,34.4508 L85.5313,34.4548 L82.6403,37.3458 C81.5563,38.4298 79.7983,38.4298 78.7143,37.3458 L77.5523,36.1848 C76.9903,35.6228 76.9903,34.7128 77.5513,34.1528 L81.3733,30.3308 C81.3673,30.3268 81.3623,30.3238 81.3573,30.3198 L81.3543,30.3158 L81.3533,30.3168 C79.1853,28.5698 76.0053,28.7008 73.9923,30.7148 L66.9123,37.7938 L74.0653,44.9478 C69.0473,46.1118 64.8013,49.4728 62.5313,54.1268 L55.1143,69.3468 C49.1293,71.5958 44.3483,76.4488 42.2843,82.7118 L36.3843,100.6188 L35.1673,101.2228 C28.7113,104.4248 23.4823,109.6548 20.2803,116.1098 L15.7063,125.3278 L12.2223,124.4818 C10.7843,124.1318 9.3353,125.0148 8.9863,126.4528 L5.9323,139.0218 L11.8473,133.1068 L11.8463,133.1088 L52.9223,92.0328 C53.9823,92.7448 55.1053,93.3728 56.2843,93.9068 L72.5743,101.2748 C68.2503,101.9868 64.0823,103.5528 60.3293,105.9218 L51.6963,111.3708 L49.3073,108.9828 C48.3493,108.0238 46.7943,108.0238 45.8363,108.9828 L37.0003,117.8178 L44.2853,116.0478 L44.2833,116.0498 L71.1753,109.5218 L77.5673,107.9698 C78.8683,107.6478 79.9573,107.0028 80.8023,106.1578 C83.3643,103.5958 83.6773,99.1898 80.8033,96.3168 L64.8993,80.4118 L69.8333,76.6858 L84.8743,76.6858 L85.6943,76.6858 L89.1113,76.6858 L89.2173,76.6858 C90.1763,76.6858 91.0233,76.2168 91.5503,75.4978 C91.5573,75.4878 91.5683,75.4788 91.5753,75.4678 L91.5733,75.4668 C91.9093,74.9938 92.1093,74.4178 92.1093,73.7938 L92.1093,71.0498 C92.1083,70.1668 91.3933,69.4508 90.5103,69.4508 L87.7663,69.4508 C86.1693,69.4508 84.8743,70.7458 84.8743,72.3428 L84.8743,73.2428 L79.3733,71.4168 C78.7623,71.2138 78.1453,71.0368 77.5263,70.8748 L79.6503,69.2718 C83.1563,66.6238 85.2233,62.4908 85.2423,58.0988 L85.2713,51.0108 L98.7733,37.5098 L108.9513,27.3308 L118.0633,18.2198 L112.5933,18.2198 Z" id="Fill-38" fill="#234705"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.2 KiB |
|
|
@ -1096,69 +1096,52 @@ class WC_Admin_Setup_Wizard {
|
|||
public function wc_setup_activate() {
|
||||
$this->wc_setup_activate_actions();
|
||||
?>
|
||||
<form method="post" class="wc-wizard-storefront">
|
||||
<form method="post">
|
||||
<h1><?php esc_html_e( 'Connect your store to Jetpack', 'woocommerce' ); ?></h1>
|
||||
<p class="wc-wizard-storefront-intro">
|
||||
<p>
|
||||
<?php // TODO: tailor this message to the Jetpack-powered services selected earlier ?>
|
||||
<?php esc_html_e( "Your store's almost ready. Connect to Jetpack for full access to Stripe payments, automated taxes, USPS live rates, and discounted shipping labels.", 'woocommerce' ); ?>
|
||||
<img src="<?php echo esc_url( WC()->plugin_url() . '/assets/images/storefront-intro.png' ); ?>" alt="Storefront" />
|
||||
</p>
|
||||
|
||||
<h3><?php esc_html_e( "Reasons you'll ❤️ Jetpack", 'woocommerce' ); ?></h3>
|
||||
<ul class="wc-wizard-storefront-features">
|
||||
<li class="wc-wizard-storefront-feature first">
|
||||
<p class="wc-wizard-storefront-feature-heading">
|
||||
<strong><?php esc_html_e( 'Attack protection', 'woocommerce' ); ?></strong>
|
||||
<div>
|
||||
<img src="<?php echo esc_url( WC()->plugin_url() . '/assets/images/jetpack-green-logo.svg' ); ?>" alt="Jetpack" />
|
||||
<input type="submit" class="button-primary button button-large button-next" value="<?php esc_attr_e( 'Connect to Jetpack through WordPress.com', 'woocommerce' ); ?>" name="save_step" />
|
||||
<h3><?php esc_html_e( "Reasons you'll love Jetpack", 'woocommerce' ); ?></h3>
|
||||
</div>
|
||||
<ul class="wc-wizard-features">
|
||||
<li class="wc-wizard-feature-item first">
|
||||
<p class="wc-wizard-feature-name">
|
||||
<strong><?php esc_html_e( 'Better security', 'woocommerce' ); ?></strong>
|
||||
</p>
|
||||
<p class="wc-wizard-storefront-feature-description">
|
||||
<?php esc_html_e( 'Automatically block attacks and protect your site from unauthorized access.', 'woocommerce' ); ?>
|
||||
<p class="wc-wizard-feature-description">
|
||||
<?php esc_html_e( 'Automatically block attacks and protect your store from unauthorized access.', 'woocommerce' ); ?>
|
||||
</p>
|
||||
</li>
|
||||
<li class="wc-wizard-storefront-feature last">
|
||||
<p class="wc-wizard-storefront-feature-heading">
|
||||
<strong><?php esc_html_e( 'Plugin management', 'woocommerce' ); ?></strong>
|
||||
<li class="wc-wizard-feature-item last">
|
||||
<p class="wc-wizard-feature-name">
|
||||
<strong><?php esc_html_e( 'Store management', 'woocommerce' ); ?></strong>
|
||||
</p>
|
||||
<p class="wc-wizard-storefront-feature-description">
|
||||
<?php esc_html_e( 'Manage multiple sites and automatic plugin updates from a single dashboard.', 'woocommerce' ); ?>
|
||||
<p class="wc-wizard-feature-description">
|
||||
<?php esc_html_e( 'Manage multiple stores and update extensions from a single dashboard.', 'woocommerce' ); ?>
|
||||
</p>
|
||||
</li>
|
||||
<li class="wc-wizard-storefront-feature first">
|
||||
<p class="wc-wizard-storefront-feature-heading">
|
||||
<strong><?php esc_html_e( 'Site monitoring', 'woocommerce' ); ?></strong>
|
||||
<li class="wc-wizard-feature-item first">
|
||||
<p class="wc-wizard-feature-name">
|
||||
<strong><?php esc_html_e( 'Store monitoring', 'woocommerce' ); ?></strong>
|
||||
</p>
|
||||
<p class="wc-wizard-storefront-feature-description">
|
||||
<?php esc_html_e( 'Keep tabs on your site and get an alert the moment downtime is detected.', 'woocommerce' ); ?>
|
||||
<p class="wc-wizard-feature-description">
|
||||
<?php esc_html_e( 'Get an alert if any downtime is detected on your store.', 'woocommerce' ); ?>
|
||||
</p>
|
||||
</li>
|
||||
<li class="wc-wizard-storefront-feature last">
|
||||
<p class="wc-wizard-storefront-feature-heading">
|
||||
<strong><?php esc_html_e( 'SEO tools', 'woocommerce' ); ?></strong>
|
||||
<li class="wc-wizard-feature-item last">
|
||||
<p class="wc-wizard-feature-name">
|
||||
<strong><?php esc_html_e( 'Product promotion', 'woocommerce' ); ?></strong>
|
||||
</p>
|
||||
<p class="wc-wizard-storefront-feature-description">
|
||||
<?php esc_html_e( 'Better results on search engines and social media.', 'woocommerce' ); ?>
|
||||
</p>
|
||||
</li>
|
||||
<li class="wc-wizard-storefront-feature first">
|
||||
<p class="wc-wizard-storefront-feature-heading">
|
||||
<strong><?php esc_html_e( 'Single sign-on', 'woocommerce' ); ?></strong>
|
||||
</p>
|
||||
<p class="wc-wizard-storefront-feature-description">
|
||||
<?php esc_html_e( 'Use one account to access multiple sites quickly and securely.', 'woocommerce' ); ?>
|
||||
</p>
|
||||
</li>
|
||||
<li class="wc-wizard-storefront-feature last">
|
||||
<p class="wc-wizard-storefront-feature-heading">
|
||||
<strong><?php esc_html_e( 'So much more', 'woocommerce' ); ?></strong>
|
||||
</p>
|
||||
<p class="wc-wizard-storefront-feature-description">
|
||||
<?php echo wp_kses_post( sprintf( __( 'You get access to <a href="%s" target="_blank">more features</a> that are only possible through Jetpack.', 'woocommerce' ), 'https://jetpack.com/features/' ) ); ?>
|
||||
<p class="wc-wizard-feature-description">
|
||||
<?php esc_html_e( "Share new items on social media the moment they're live in your store.", 'woocommerce' ); ?>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="wc-setup-actions step">
|
||||
<input type="submit" class="button-primary button button-large button-next" value="<?php esc_attr_e( 'Connect to Jetpack through WordPress.com', 'woocommerce' ); ?>" name="save_step" />
|
||||
<?php wp_nonce_field( 'wc-setup' ); ?>
|
||||
</p>
|
||||
<?php wp_nonce_field( 'wc-setup' ); ?>
|
||||
</form>
|
||||
<?php
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue