← All changes | templates/setup-wizard.php +122 -112 3.10.2 → 3.11.7 View file →

		@@ -16,8 +16,12 @@
16	16
17	17	$chart_id = ! empty( $this->wizard_data['chart_id'] ) ? (int) $this->wizard_data['chart_id'] : '';
18	18	$wp_optimole_active = is_plugin_active( 'optimole-wp/optimole-wp.php' );
19	19	$last_step_number = 5;
	20	+
	21	+// Check if we are in the Live Preview which is used to showcase only the plugin features without any other distractions. Ideal for marketing purposes (like Live Preview on WordPress.org or on the plugin's website)
	22	+$is_live_preview = ! empty( $_GET['env'] ) ? ( 'preview' === sanitize_key( $_GET['env'] ) ) : false;
	23	+
20	24	?>
21	25	<div class="vz-wizard-wrap vz-wrap">
22	26	<div class="vz-header--small">
23	27	<div class="container">
		@@ -22,16 +26,15 @@
22	26	<div class="vz-header--small">
23	27	<div class="container">
24	28	<div class="vz-logo">
25	29	<div class="vz-logo-icon">
26		- <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/visualizer-logo.svg' ); ?>" width="136" height="54"
27		- alt="">
	30	+ <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/visualizer-logo.svg' ); ?>" width="136" height="54" alt="">
28	31	</div>
29	32	</div>
30	33	<div class="back-btn">
31		- <a href="<?php echo esc_url( $dashboard_url ); ?>" class="btn-link"><span
32		- class="dashicons dashicons-arrow-left-alt"></span>
33		- <?php esc_html_e( 'Go to dashboard', 'visualizer' ); ?></a>
	34	+ <a href="<?php echo esc_url( $dashboard_url ); ?>" class="btn-link">
	35	+ <span class="dashicons dashicons-arrow-left-alt"></span><?php esc_html_e( 'Go to dashboard', 'visualizer' ); ?>
	36	+ </a>
34	37	</div>
35	38	</div>
36	39	</div>
37	40	<div class="container">
		@@ -52,27 +55,29 @@
52	55	<a class="nav-link" href="#step-3">
53	56	3
54	57	</a>
55	58	</li>
56		- <?php if ( ! $wp_optimole_active ) : ?>
57		- <li class="nav-item">
58		- <a class="nav-link" href="#step-4">
59		- 4
60		- </a>
61		- </li>
62		- <li class="nav-item">
63		- <a class="nav-link" href="#step-5">
64		- 5
65		- </a>
66		- </li>
67		- <?php else : ?>
68		- <?php $last_step_number = 4; ?>
69		- <li class="nav-item">
70		- <a class="nav-link" href="#step-4">
71		- 4
72		- </a>
73		- </li>
74		- <?php endif; ?>
	59	+ <?php if ( ! $is_live_preview ) { ?>
	60	+ <?php if ( ! $wp_optimole_active ) : ?>
	61	+ <li class="nav-item">
	62	+ <a class="nav-link" href="#step-4">
	63	+ 4
	64	+ </a>
	65	+ </li>
	66	+ <li class="nav-item">
	67	+ <a class="nav-link" href="#step-5">
	68	+ 5
	69	+ </a>
	70	+ </li>
	71	+ <?php else : ?>
	72	+ <?php $last_step_number = 4; ?>
	73	+ <li class="nav-item">
	74	+ <a class="nav-link" href="#step-4">
	75	+ 4
	76	+ </a>
	77	+ </li>
	78	+ <?php endif; ?>
	79	+ <?php } ?>
75	80	</ul>
76	81	<div class="tab-content">
77	82	<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
78	83	<div class="vz-accordion-item">
		@@ -78,11 +83,11 @@
78	83	<div class="vz-accordion-item">
79	84	<div class="vz-accordion-item__title">
80	85	<div class="vz-accordion-item__button">
81	86	<h2 class="h2 pb-8">
82		- <?php esc_html_e( 'Select chart from the below available options', 'visualizer' ); ?></h2>
	87	+ <?php esc_html_e( 'Select a chart from the options available below', 'visualizer' ); ?></h2>
83	88	<p class="p">
84		- <?php esc_html_e( 'Pro tip: Keep your requirements in mind and select best chart for it', 'visualizer' ); ?>
	89	+ <?php esc_html_e( 'Pro tip: Keep your requirements in mind and choose the best chart to meet them.', 'visualizer' ); ?>
85	90	</p>
86	91	</div>
87	92	</div>
88	93	<div class="vz-accordion-item__content border-top">
		@@ -170,17 +175,14 @@
170	175	<div class="vz-accordion-item">
171	176	<div class="vz-accordion-item__title">
172	177	<div class="vz-accordion-item__button">
173	178	<h2 class="h2 pb-8"><?php esc_html_e( 'You\'re almost done!', 'visualizer' ); ?></h2>
174		- <p class="p"><?php esc_html_e( 'We use demo data during the import process, don&#x92;t worry you can customize it later', 'visualizer' ); ?></p>
	179	+ <p class="p"><?php esc_html_e( 'We use demo data during the import process, but don\'t worry; you can customize it later.', 'visualizer' ); ?></p>
175	180	</div>
176		- <div class="vz-progress">
177		- <div class="vz-progress-bar" style="width: 100%;"></div>
178		- </div>
179	181	</div>
180	182	<div class="vz-accordion-item__content">
181	183	<div class="vz-form-wrap">
182		- <div class="form-block">
	184	+ <div class="form-block" style="padding-top: 8px">
183	185	<div class="vz-error-notice notice notice-error hidden"></div>
184	186	<div class="pb-30">
185	187	<div class="vz-shortcode-preview-box">
186	188	<div class="vz-shortcode-preview-title border-0">
		@@ -186,16 +188,19 @@
186	188	<div class="vz-shortcode-preview-title border-0">
187	189	<div class="icon">
188	190	<img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/database-icon.png' ); ?>" alt="">
189	191	</div>
190		- <div class="txt">
	192	+ <div class="txt" style="width: 100%;">
191	193	<h4 class="h4 pb-4"><?php esc_html_e( 'Importing demo data', 'visualizer' ); ?></h4>
192		- <p class="p" data-import_message="<?php esc_attr_e( 'Done! Demo data imported successfully', 'visualizer' ); ?>"><?php esc_html_e( 'Hold on! we are importing demo data for your selected chart', 'visualizer' ); ?></p>
	194	+ <p class="p" data-import_message="<?php esc_attr_e( 'Done! Demo data has been successfully imported.', 'visualizer' ); ?>"><?php esc_html_e( 'Hold on! we are importing demo data for your selected chart', 'visualizer' ); ?></p>
	195	+ <div class="vz-progress" style="margin-top: 4px;">
	196	+ <div class="vz-progress-bar"></div>
193	197	</div>
	198	+ </div>
194	199	</div>
195	200	</div>
196	201	</div>
197		- <p class="help-text help-text-primary pb-16"><?php esc_html_e( 'Import data from other Charts, WordPress, DataBase, or Manual Data with Visualizer', 'visualizer' ); ?> <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>" target="_blank"><?php esc_html_e( 'Premium version', 'visualizer' ); ?></a></p>
	202	+ <p class="help-text help-text-primary pb-16"><?php esc_html_e( 'Import data from other charts, WordPress, databases, or manual data entries using Visualizer', 'visualizer' ); ?> <a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>" target="_blank"><?php esc_html_e( 'Premium version', 'visualizer' ); ?></a></p>
198	203	</div>
199	204	<div class="form-block"><button class="btn btn-primary disabled" data-step_number="3"><?php esc_html_e( 'Continue', 'visualizer' ); ?> <span class="dashicons dashicons-arrow-right-alt"></span></button>
200	205	</div>
201	206	</div>
		@@ -205,10 +210,10 @@
205	210	<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
206	211	<div class="vz-accordion-item">
207	212	<div class="vz-accordion-item__title">
208	213	<div class="vz-accordion-item__button">
209		- <h2 class="h2 pb-8"><?php esc_html_e( 'Insert chart into the draft page', 'visualizer' ); ?></h2>
210		- <p class="p"><?php esc_html_e( 'Create a draft page with a Visualizer chart with just one click', 'visualizer' ); ?></p>
	214	+ <h2 class="h2 pb-8"><?php esc_html_e( 'Insert a chart into the draft page', 'visualizer' ); ?></h2>
	215	+ <p class="p"><?php esc_html_e( 'Create a draft page featuring a Visualizer chart with just one click.', 'visualizer' ); ?></p>
211	216	</div>
212	217	</div>
213	218	<div class="vz-accordion-item__content border-top">
214	219	<div class="vz-form-wrap">
		@@ -217,9 +222,9 @@
217	222	<div class="vz-accordion-item vz-features-accordion mb-0">
218	223	<div class="vz-shortcode-preview-box">
219	224	<div class="vz-accordion-item__title vz-accordion-checkbox__title">
220	225	<div class="vz-checkbox">
221		- <input type="checkbox" class="vz-checkbox-btn" id="insert_shortcode" checked>
	226	+ <input type="checkbox" class="vz-checkbox-btn" id="insert_shortcode" checked <?php echo $is_live_preview ? 'disabled' : ''; ?>>
222	227	</div>
223	228	<button type="button" class="vz-accordion-item__button">
224	229	<div class="vz-accordion__step-title h4 pb-4"><?php esc_html_e( 'Create a draft page', 'visualizer' ); ?></div>
225	230	<p class="help-text"><?php esc_html_e( 'We will automatically create a draft page with Visualizer chart for preview', 'visualizer' ); ?></p>
		@@ -228,13 +233,16 @@
228	233	</button>
229	234	</div>
230	235	<div class="vz-accordion-item__content">
231	236	<div class="vz-shortcode-preview-content">
232		- <div class="vz-shortcode-preview">
	237	+ <?php $shortcode = '[visualizer id="{{chart_id}}" class=""]'; ?>
	238	+ <?php if ( $is_live_preview ) { ?>
	239	+ <p class="pb-16"><?php esc_html_e( 'Charts are added in the page/post via Gutenberg Blocks.', 'visualizer' ); ?></p>
	240	+ <p class="pb-16"><?php esc_html_e( 'Alternatively, you can use a shortcode with the following structure:', 'visualizer' ); ?></p>
	241	+ <?php } else { ?>
233	242	<h4 class="h4 pb-16"><?php esc_html_e( 'Chart preview', 'visualizer' ); ?></h4>
234	243	<div class="vz-chart pb-30">
235	244	<?php
236		- $shortcode = '[visualizer id="{{chart_id}}" lazy="" class=""]';
237	245	if ( ! empty( $_GET['preview_chart'] ) ) {
238	246	$shortcode = str_replace( '{{chart_id}}', $chart_id, $shortcode );
239	247	echo do_shortcode( $shortcode );
240	248	}
		@@ -239,13 +247,13 @@
239	247	echo do_shortcode( $shortcode );
240	248	}
241	249	?>
242	250	</div>
243		- <div class="vz-code-box">
244		- <input type="text" id="basic_shortcode" value="<?php echo esc_attr( $shortcode ); ?>" redonly>
245		- <button type="button" class="vz-copy-code-btn" data-clipboard-target="#basic_shortcode"><?php esc_html_e( 'click to copy', 'visualizer' ); ?> <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/copy.svg' ); ?>" alt="">
246		- </button>
247		- </div>
	251	+ <?php } ?>
	252	+ <div class="vz-code-box">
	253	+ <input type="text" id="basic_shortcode" value="<?php echo esc_attr( $shortcode ); ?>" readonly>
	254	+ <button type="button" class="vz-copy-code-btn" data-clipboard-target="#basic_shortcode"><?php esc_html_e( 'click to copy', 'visualizer' ); ?> <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/copy.svg' ); ?>" alt="">
	255	+ </button>
248	256	</div>
249	257	</div>
250	258	</div>
251	259	</div>
		@@ -259,96 +267,98 @@
259	267	</div>
260	268	</div>
261	269	</div>
262	270	</div>
263		- <?php if ( ! $wp_optimole_active ) : ?>
264		- <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
265		- <div class="vz-accordion-item">
266		- <div class="vz-accordion-item__title">
267		- <div class="vz-accordion-item__button">
268		- <h2 class="h2 pb-8"><?php esc_html_e( 'Extra Features', 'visualizer' ); ?></h2>
269		- <p class="p"><?php esc_html_e( 'We\'re confident you\'ll see the improvements. Otherwise, you can remove it anytime', 'visualizer' ); ?></p>
	271	+ <?php if ( ! $wp_optimole_active && ! $is_live_preview ) { ?>
	272	+ <div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
	273	+ <div class="vz-accordion-item">
	274	+ <div class="vz-accordion-item__title">
	275	+ <div class="vz-accordion-item__button">
	276	+ <h2 class="h2 pb-8"><?php esc_html_e( 'Extra Features', 'visualizer' ); ?></h2>
	277	+ <p class="p"><?php esc_html_e( 'We\'re confident you\'ll appreciate the improvements. If not, you can remove them at any time.', 'visualizer' ); ?></p>
	278	+ </div>
270	279	</div>
271		- </div>
272		- <div class="vz-accordion-item__content border-top">
273		- <div class="vz-form-wrap">
274		- <div class="form-block">
275		- <div class="vz-error-notice notice notice-error hidden"></div>
276		- <div class="vz-accordion">
277		- <div class="vz-accordion-item vz-features-accordion mb-0">
278		- <div class="vz-accordion-item__title vz-accordion-checkbox__title">
279		- <div class="vz-checkbox">
280		- <input type="checkbox" class="vz-checkbox-btn" checked>
	280	+ <div class="vz-accordion-item__content border-top">
	281	+ <div class="vz-form-wrap">
	282	+ <div class="form-block">
	283	+ <div class="vz-error-notice notice notice-error hidden"></div>
	284	+ <div class="vz-accordion">
	285	+ <div class="vz-accordion-item vz-features-accordion mb-0">
	286	+ <div class="vz-accordion-item__title vz-accordion-checkbox__title">
	287	+ <div class="vz-checkbox">
	288	+ <input type="checkbox" class="vz-checkbox-btn" checked>
	289	+ </div>
	290	+ <button type="button" class="vz-accordion-item__button">
	291	+ <div class="vz-accordion__step-title h4 pb-4"><?php esc_html_e( 'Enable perfomance features for your website.', 'visualizer' ); ?></div>
	292	+ <p class="help-text"><?php esc_html_e( 'Optimize and speed up your site with our trusted add-on—it\'s free!', 'visualizer' ); ?></p>
	293	+ <div class="vz-accordion__icon"><span class="dashicons dashicons-arrow-down-alt2"></span>
	294	+ </div>
	295	+ </button>
281	296	</div>
282		- <button type="button" class="vz-accordion-item__button">
283		- <div class="vz-accordion__step-title h4 pb-4"><?php esc_html_e( 'Enable perfomance features for your website.', 'visualizer' ); ?></div>
284		- <p class="help-text"><?php esc_html_e( 'Optimise and speed up your site with our trusted addon - It&#x92;s Free', 'visualizer' ); ?></p>
285		- <div class="vz-accordion__icon"><span class="dashicons dashicons-arrow-down-alt2"></span>
	297	+ <div class="vz-accordion-item__content">
	298	+ <div class="vz-features-list">
	299	+ <ul>
	300	+ <li>
	301	+ <div class="icon">
	302	+ <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/boost-logo.png' ); ?>" width="37" height="30" alt="">
	303	+ </div>
	304	+ <div class="txt">
	305	+ <div class="h4 pb-4"><?php esc_html_e( 'Boost your website speed', 'visualizer' ); ?> <span class="pro-label free-label"><?php esc_html_e( 'Free', 'visualizer' ); ?></span></div>
	306	+ <p class="help-text"><?php esc_html_e( 'Improve your website speed and images by 80% with', 'visualizer' ); ?> <a href="<?php echo esc_url( tsdk_utmify( 'https://optimole.com/', 'VisualizerSetupWizard' ) ); ?>" target="_blank"><?php esc_html_e( 'Optimole', 'visualizer' ); ?></a></p>
	307	+ </div>
	308	+ </li>
	309	+ </ul>
286	310	</div>
287		- </button>
288		- </div>
289		- <div class="vz-accordion-item__content">
290		- <div class="vz-features-list">
291		- <ul>
292		- <li>
293		- <div class="icon">
294		- <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/boost-logo.png' ); ?>" width="37" height="30" alt="">
295		- </div>
296		- <div class="txt">
297		- <div class="h4 pb-4"><?php esc_html_e( 'Boost your website speed', 'visualizer' ); ?> <span class="pro-label free-label"><?php esc_html_e( 'Free', 'visualizer' ); ?></span></div>
298		- <p class="help-text"><?php esc_html_e( 'Improve your website speed and images by 80% with', 'visualizer' ); ?> <a href="<?php echo esc_url( tsdk_utmify( 'https://optimole.com/', 'VisualizerSetupWizard' ) ); ?>" target="_blank"><?php esc_html_e( 'Optimole', 'visualizer' ); ?></a></p>
299		- </div>
300		- </li>
301		- </ul>
302	311	</div>
303	312	</div>
304	313	</div>
305	314	</div>
	315	+ <div class="form-block">
	316	+ <button class="btn btn-primary vz-wizard-install-plugin" data-step_number="4"><?php esc_html_e( 'Improve now', 'visualizer' ); ?>
	317	+ <button class="btn btn-primary next-btn skip-improvement" style="display: none;"><?php esc_html_e( 'Skip Improvement', 'visualizer' ); ?></button>
	318	+ <span class="spinner"></span>
	319	+ </div>
306	320	</div>
307		- <div class="form-block">
308		- <button class="btn btn-primary vz-wizard-install-plugin" data-step_number="4"><?php esc_html_e( 'Improve now', 'visualizer' ); ?>
309		- <button class="btn btn-primary next-btn skip-improvement" style="display: none;"><?php esc_html_e( 'Skip Improvement', 'visualizer' ); ?></button>
310		- <span class="spinner"></span>
311		- </div>
312	321	</div>
313	322	</div>
314	323	</div>
315		- </div>
316		- <?php endif; ?>
317		- <div id="step-<?php echo esc_attr( $last_step_number ); ?>" class="tab-pane" role="tabpanel" aria-labelledby="step-5">
318		- <div class="vz-accordion-item">
319		- <div class="vz-accordion-item__title">
320		- <div class="vz-accordion-item__button">
321		- <h2 class="h2 pb-8"><?php esc_html_e( 'Updates, tutorials, special offers & more', 'visualizer' ); ?></h2>
322		- <p class="p"><?php esc_html_e( 'Get exclusive access of Visualizer newsletter', 'visualizer' ); ?></p>
	324	+ <?php } ?>
	325	+ <?php if ( ! $is_live_preview ) { ?>
	326	+ <div id="step-<?php echo esc_attr( $last_step_number ); ?>" class="tab-pane" role="tabpanel" aria-labelledby="step-5">
	327	+ <div class="vz-accordion-item">
	328	+ <div class="vz-accordion-item__title">
	329	+ <div class="vz-accordion-item__button">
	330	+ <h2 class="h2 pb-8"><?php esc_html_e( 'Updates, tutorials, special offers, and more', 'visualizer' ); ?></h2>
	331	+ <p class="p"><?php esc_html_e( 'Get exclusive access to the Visualizer newsletter.', 'visualizer' ); ?></p>
	332	+ </div>
323	333	</div>
324		- </div>
325		- <div class="vz-accordion-item__content border-top">
326		- <div class="vz-form-wrap">
327		- <div class="form-block">
328		- <div class="vz-newsletter-wrap">
329		- <div class="vz-newsletter">
330		- <p class="p pb-30"><?php esc_html_e( 'Let us know your email so that we can send you product updates, helpful tutorials, exclusive offers and more useful stuff.', 'visualizer' ); ?></p>
331		- <div class="vz-form-group">
332		- <input type="email" class="form-control" id="vz_subscribe_email" placeholder="<?php echo esc_attr( get_bloginfo( 'admin_email' ) ); ?>">
	334	+ <div class="vz-accordion-item__content border-top">
	335	+ <div class="vz-form-wrap">
	336	+ <div class="form-block">
	337	+ <div class="vz-newsletter-wrap">
	338	+ <div class="vz-newsletter">
	339	+ <p class="p pb-30"><?php esc_html_e( 'Share your email with us! That way, we can keep you updated with exciting product news, handy tutorials, exclusive offers, and lots more awesome content.', 'visualizer' ); ?></p>
	340	+ <div class="vz-form-group">
	341	+ <input type="email" class="form-control" id="vz_subscribe_email" placeholder="<?php echo esc_attr( get_bloginfo( 'admin_email' ) ); ?>">
	342	+ </div>
333	343	</div>
	344	+ <div class="vz-newsletter-img">
	345	+ <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/newsletter-img.png' ); ?>" alt="">
	346	+ </div>
334	347	</div>
335		- <div class="vz-newsletter-img">
336		- <img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/newsletter-img.png' ); ?>" alt="">
	348	+ </div>
	349	+ <div class="form-block">
	350	+ <div class="vz-btn-group">
	351	+ <button class="btn btn-primary vz-subscribe" data-vz_subscribe="true"><?php esc_html_e( 'Send Me Access', 'visualizer' ); ?></button>
	352	+ <button class="btn btn-outline-primary vz-subscribe" data-vz_subscribe="false"><?php esc_html_e( 'Skip, Don&#x92;t give me access', 'visualizer' ); ?></button>
	353	+ <span class="spinner"></span>
337	354	</div>
338	355	</div>
339	356	</div>
340		- <div class="form-block">
341		- <div class="vz-btn-group">
342		- <button class="btn btn-primary vz-subscribe" data-vz_subscribe="true"><?php esc_html_e( 'Send Me Access', 'visualizer' ); ?></button>
343		- <button class="btn btn-outline-primary vz-subscribe" data-vz_subscribe="false"><?php esc_html_e( 'Skip, Don&#x92;t give me access', 'visualizer' ); ?></button>
344		- <span class="spinner"></span>
345		- </div>
346		- </div>
347	357	</div>
348	358	</div>
349	359	</div>
350		- </div>
	360	+ <?php } ?>
351	361	</div>
352	362	</div>
353	363	</div>
354	364	</div>