← All changes | templates/setup-wizard.php +116 -106 3.10.1 → 3.10.8 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">
		@@ -172,15 +177,12 @@
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	179	<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>
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,12 +188,15 @@
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 imported successfully.', '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	202	<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>
		@@ -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}}" lazy="" 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 see the improvements. Otherwise, you can remove it anytime', '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( 'Optimise and speed up your site with our trusted addon - It&#x92;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 & more', 'visualizer' ); ?></h2>
	331	+ <p class="p"><?php esc_html_e( 'Get exclusive access of 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( 'Let us know your email so that we can send you product updates, helpful tutorials, exclusive offers and more useful stuff.', '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>