visualizer / templates / setup-wizard.php

setup-wizard.php in Visualizer – Tables & Charts Manager with Built-in AI Generator 3.10.1, at templates/setup-wizard.php

373 lines 17.3 KB

Raw Download Zip

1	<?php
2	/**
3	* Setup wizard template.
4	*
5	* @category Visualizer
6	* @package Templates
7	*/
8
9	$dashboard_url = add_query_arg(
10	array(
11	'action' => 'visualizer_dismiss_wizard',
12	'status' => 0,
13	),
14	admin_url( 'admin.php' )
15	);
16
17	$chart_id = ! empty( $this->wizard_data['chart_id'] ) ? (int) $this->wizard_data['chart_id'] : '';
18	$wp_optimole_active = is_plugin_active( 'optimole-wp/optimole-wp.php' );
19	$last_step_number = 5;
20	?>
21	<div class="vz-wizard-wrap vz-wrap">
22	<div class="vz-header--small">
23	<div class="container">
24	<div class="vz-logo">
25	<div class="vz-logo-icon">
26	<img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/visualizer-logo.svg' ); ?>" width="136" height="54"
27	alt="">
28	</div>
29	</div>
30	<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	</div>
35	</div>
36	</div>
37	<div class="container">
38	<div class="vz-wizard">
39	<div id="smartwizard" class="sw">
40	<ul class="nav">
41	<li class="nav-item">
42	<a class="nav-link" href="#step-1">
43	1
44	</a>
45	</li>
46	<li class="nav-item">
47	<a class="nav-link" href="#step-2">
48	2
49	</a>
50	</li>
51	<li class="nav-item">
52	<a class="nav-link" href="#step-3">
53	3
54	</a>
55	</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; ?>
75	</ul>
76	<div class="tab-content">
77	<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
78	<div class="vz-accordion-item">
79	<div class="vz-accordion-item__title">
80	<div class="vz-accordion-item__button">
81	<h2 class="h2 pb-8">
82	<?php esc_html_e( 'Select chart from the below available options', 'visualizer' ); ?></h2>
83	<p class="p">
84	<?php esc_html_e( 'Pro tip: Keep your requirements in mind and select best chart for it', 'visualizer' ); ?>
85	</p>
86	</div>
87	</div>
88	<div class="vz-accordion-item__content border-top">
89	<div class="vz-form-wrap">
90	<div class="form-block pb-0">
91	<div class="vz-chart-list">
92	<ul>
93	<li>
94	<label class="vz-chart-option" for="vz-chart-1">
95	<input type="radio" class="vz-radio-btn" id="vz-chart-1" name="visualizer[wizard_data][chart_type]" value="pie">
96	<h3 class="h3"><?php esc_html_e( 'Pie/Donut chart', 'visualizer' ); ?></h3>
97	<div class="img type-box-pie"></div>
98	<div class="bg"></div>
99	</label>
100	</li>
101	<li>
102	<label class="vz-chart-option" for="vz-chart-2">
103	<input type="radio" class="vz-radio-btn" id="vz-chart-2" name="visualizer[wizard_data][chart_type]" value="bar">
104	<h3 class="h3"><?php esc_html_e( 'Bar chart', 'visualizer' ); ?></h3>
105	<div class="img type-box-bar"></div>
106	<div class="bg"></div>
107	</label>
108	</li>
109	<li>
110	<label class="vz-chart-option" for="vz-chart-3">
111	<input type="radio" class="vz-radio-btn" id="vz-chart-3" name="visualizer[wizard_data][chart_type]" value="line">
112	<h3 class="h3"><?php esc_html_e( 'Line chart', 'visualizer' ); ?></h3>
113	<div class="img type-box-line"></div>
114	<div class="bg"></div>
115	</label>
116	</li>
117	<li>
118	<label class="vz-chart-option" for="vz-chart-4">
119	<input type="radio" class="vz-radio-btn" id="vz-chart-4" name="visualizer[wizard_data][chart_type]" value="tabular">
120	<h3 class="h3"><?php esc_html_e( 'Table', 'visualizer' ); ?></h3>
121	<div class="img type-box-tabular"></div>
122	<div class="bg"></div>
123	</label>
124	</li>
125	<li>
126	<div class="vz-pro-option">
127	<label class="vz-chart-option">
128	<input type="radio" class="vz-radio-btn" id="vz-chart-5" readonly>
129	<div class="vz-pro-label-wrap">
130	<h3><?php esc_html_e( 'Geo chart', 'visualizer' ); ?></h3>
131	<span class="pro-label"><?php esc_html_e( 'PRO', 'visualizer' ); ?></span>
132	</div>
133	<div class="img type-box-geo"></div>
134	<div class="bg"></div>
135	</label>
136	<div class="pro-overlay">
137	<div class="pro-box">
138	<a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>"
139	class="btn btn-secondary" target="_blank"><?php esc_html_e( 'Upgrade to Pro', 'visualizer' ); ?></a>
140	</div>
141	</div>
142	</div>
143	</li>
144	<li>
145	<div class="vz-power-pro">
146	<h3 class="h3"><?php esc_html_e( 'Discover the power of PRO!', 'visualizer' ); ?></h3>
147	<ul>
148	<li><?php esc_html_e( '11 more chart types', 'visualizer' ); ?></li>
149	<li><?php esc_html_e( 'Private charts', 'visualizer' ); ?></li>
150	<li><?php esc_html_e( 'Auto-sync with online files', 'visualizer' ); ?></li>
151	<li>
152	<?php esc_html_e( 'Frontend Actions(Print, Export, Copy, Download', 'visualizer' ); ?>)
153	</li>
154	<li><?php esc_html_e( 'Create charts from WordPress tables', 'visualizer' ); ?></li>
155	</ul>
156	<a href="<?php echo esc_url( tsdk_utmify( Visualizer_Plugin::PRO_TEASER_URL, 'setupWizard' ) ); ?>" class="btn btn-secondary" target="_blank"><?php esc_html_e( 'View more features', 'visualizer' ); ?></a>
157	</div>
158	</li>
159	</ul>
160	</div>
161	</div>
162	<div class="form-block">
163	<button class="btn btn-primary disabled" data-step_number="1"><?php esc_html_e( 'Save And Continue', 'visualizer' ); ?> <span class="dashicons dashicons-arrow-right-alt"></span></button>
164	</div>
165	</div>
166	</div>
167	</div>
168	</div>
169	<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
170	<div class="vz-accordion-item">
171	<div class="vz-accordion-item__title">
172	<div class="vz-accordion-item__button">
173	<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, dont worry you can customize it later', 'visualizer' ); ?></p>
175	</div>
176	<div class="vz-progress">
177	<div class="vz-progress-bar" style="width: 100%;"></div>
178	</div>
179	</div>
180	<div class="vz-accordion-item__content">
181	<div class="vz-form-wrap">
182	<div class="form-block">
183	<div class="vz-error-notice notice notice-error hidden"></div>
184	<div class="pb-30">
185	<div class="vz-shortcode-preview-box">
186	<div class="vz-shortcode-preview-title border-0">
187	<div class="icon">
188	<img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/database-icon.png' ); ?>" alt="">
189	</div>
190	<div class="txt">
191	<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>
193	</div>
194	</div>
195	</div>
196	</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>
198	</div>
199	<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	</div>
201	</div>
202	</div>
203	</div>
204	</div>
205	<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
206	<div class="vz-accordion-item">
207	<div class="vz-accordion-item__title">
208	<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>
211	</div>
212	</div>
213	<div class="vz-accordion-item__content border-top">
214	<div class="vz-form-wrap">
215	<div class="form-block">
216	<div class="vz-accordion">
217	<div class="vz-accordion-item vz-features-accordion mb-0">
218	<div class="vz-shortcode-preview-box">
219	<div class="vz-accordion-item__title vz-accordion-checkbox__title">
220	<div class="vz-checkbox">
221	<input type="checkbox" class="vz-checkbox-btn" id="insert_shortcode" checked>
222	</div>
223	<button type="button" class="vz-accordion-item__button">
224	<div class="vz-accordion__step-title h4 pb-4"><?php esc_html_e( 'Create a draft page', 'visualizer' ); ?></div>
225	<p class="help-text"><?php esc_html_e( 'We will automatically create a draft page with Visualizer chart for preview', 'visualizer' ); ?></p>
226	<div class="vz-accordion__icon"><span class="dashicons dashicons-arrow-down-alt2"></span>
227	</div>
228	</button>
229	</div>
230	<div class="vz-accordion-item__content">
231	<div class="vz-shortcode-preview-content">
232	<div class="vz-shortcode-preview">
233	<h4 class="h4 pb-16"><?php esc_html_e( 'Chart preview', 'visualizer' ); ?></h4>
234	<div class="vz-chart pb-30">
235	<?php
236	$shortcode = '[visualizer id="{{chart_id}}" lazy="" class=""]';
237	if ( ! empty( $_GET['preview_chart'] ) ) {
238	$shortcode = str_replace( '{{chart_id}}', $chart_id, $shortcode );
239	echo do_shortcode( $shortcode );
240	}
241	?>
242	</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>
248	</div>
249	</div>
250	</div>
251	</div>
252	</div>
253	</div>
254	</div>
255	<div class="form-block">
256	<button class="btn btn-primary vz-create-page"><?php esc_html_e( 'Save And Continue', 'visualizer' ); ?> <span class="dashicons dashicons-arrow-right-alt"></span></button>
257	<span class="spinner"></span>
258	</div>
259	</div>
260	</div>
261	</div>
262	</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>
270	</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>
281	</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 - Its Free', 'visualizer' ); ?></p>
285	<div class="vz-accordion__icon"><span class="dashicons dashicons-arrow-down-alt2"></span>
286	</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	</div>
303	</div>
304	</div>
305	</div>
306	</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	</div>
313	</div>
314	</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>
323	</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' ) ); ?>">
333	</div>
334	</div>
335	<div class="vz-newsletter-img">
336	<img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/newsletter-img.png' ); ?>" alt="">
337	</div>
338	</div>
339	</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, Dont give me access', 'visualizer' ); ?></button>
344	<span class="spinner"></span>
345	</div>
346	</div>
347	</div>
348	</div>
349	</div>
350	</div>
351	</div>
352	</div>
353	</div>
354	</div>
355
356	<div class="redirect-popup">
357	<div class="redirect-popup-box">
358	<div class="icon">
359	<svg width="5" height="23" viewBox="0 0 5 23" fill="none" xmlns="http://www.w3.org/2000/svg">
360	<path
361	d="M0.6875 23V6.4375H4.57812V23H0.6875ZM4.15625 3.65625C3.73958 4.0625 3.22917 4.26562 2.625 4.26562C2.02083 4.26562 1.51042 4.0625 1.09375 3.65625C0.677083 3.23958 0.46875 2.73958 0.46875 2.15625C0.46875 1.5625 0.677083 1.0625 1.09375 0.65625C1.51042 0.239583 2.02083 0.03125 2.625 0.03125C3.22917 0.03125 3.73958 0.239583 4.15625 0.65625C4.58333 1.0625 4.79688 1.5625 4.79688 2.15625C4.79688 2.73958 4.58333 3.23958 4.15625 3.65625Z"
362	fill="#39C3D2" fill-opacity="0.75" />
363	</svg>
364	</div>
365	<h3 class="h3 popup-title"></h3>
366	<div class="redirect-loader">
367	<img src="<?php echo esc_url( VISUALIZER_ABSURL . 'images/mask-loader.png' ); ?>" width="45" height="45"
368	alt="loader">
369	</div>
370	</div>
371	</div>
372	</div>
373