Skip to content

Commit b182e66

Browse files
girishpanchal30girishpanchal30
committed
Improve upsell section design Codeinwp/visualizer-pro#314 
1 parent fa25c52 commit b182e66

File tree

4 files changed

+223
-57
lines changed

4 files changed

+223
-57
lines changed

‎classes/Visualizer/Module/Admin.php

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -686,11 +686,32 @@ public function registerAdminMenu() {
686686
'viz-support',
687687
array( $this, 'renderSupportPage' )
688688
);
689+
690+
if ( ! Visualizer_Module::is_pro() ) {
691+
$get_pro_hook = add_submenu_page(
692+
Visualizer_Plugin::NAME,
693+
__( 'Get Visualizer Pro', 'visualizer' ),
694+
__( 'Get Visualizer Pro', 'visualizer' ),
695+
'edit_posts',
696+
'viz-get-pro',
697+
'__return_null'
698+
);
699+
add_action( "load-{$get_pro_hook}", array( $this, 'handleGetProSubMenu' ) );
700+
}
689701
remove_submenu_page( Visualizer_Plugin::NAME, Visualizer_Plugin::NAME );
690702

691703
add_action( "load-{$this->_libraryPage}", array( $this, 'addScreenOptions' ) );
692704
}
693705

706+
/**
707+
* Handle get pro plugin submenu.
708+
*/
709+
public function handleGetProSubMenu() {
710+
// phpcs:ignore WordPress.Security.SafeRedirect.wp_redirect_wp_redirect
711+
wp_redirect( esc_url( 'https://themeisle.com/plugins/visualizer-charts-and-graphs/upgrade/#pricing' ) );
712+
exit;
713+
}
714+
694715
/**
695716
* Adds the screen options for pagination.
696717
*/

‎classes/Visualizer/Render/Library.php

Lines changed: 70 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -223,27 +223,33 @@ private function _renderLibrary() {
223223
// Added by Ash/Upwork
224224
echo $this->custom_css;
225225
echo '<div id="visualizer-types" class="visualizer-clearfix">';
226+
echo '<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><symbol id="list-icon" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8C0 12.42 3.58 16 8 16C12.42 16 16 12.42 16 8C16 3.58 12.42 0 8 0ZM7.385 12.66H6.045L2.805 8.12L4.146 6.87L6.715 9.27L11.856 3.339L13.196 4.279L7.385 12.66Z"/></symbol></svg>';
226227
$this->getDisplayForm();
227228
echo '</div>';
228229
echo '<div id="visualizer-content-wrapper">';
229230
if ( ! empty( $this->charts ) ) {
230231
echo '<div id="visualizer-library" class="visualizer-clearfix">';
231232
$count = 0;
232233
foreach ( $this->charts as $placeholder_id => $chart ) {
233-
$this->_renderChartBox( $placeholder_id, $chart['id'] );
234234
// show the sidebar after the first 3 charts.
235-
if ( $count++ === 2 ) {
235+
$count++;
236+
if ( 3 === $count ) {
236237
$this->_renderSidebar();
238+
$this->_renderChartBox( $placeholder_id, $chart['id'] );
239+
} else {
240+
$this->_renderChartBox( $placeholder_id, $chart['id'] );
237241
}
238242
}
239-
// show the sidebar if there are less than 3 charts.
240-
if ( $count < 3 ) {
243+
// Show the 2-col sidebar if there are 1 chart.
244+
if ( 1 === $count ) {
245+
$this->_renderTwoColSidebar();
246+
} elseif ( 2 === $count ) {
241247
$this->_renderSidebar();
242248
}
243249
echo '</div>';
244250
} else {
245251
echo '<div id="visualizer-library" class="visualizer-clearfix">';
246-
echo '<div class="visualizer-chart">';
252+
echo '<div class="items"><div class="visualizer-chart">';
247253
echo '<div class="visualizer-chart-canvas visualizer-nochart-canvas">';
248254
echo '<div class="visualizer-notfound">', esc_html__( 'No charts found', 'visualizer' ), '<p><h2><a href="javascript:;" class="add-new-h2 add-new-chart">', esc_html__( 'Add New', 'visualizer' ), '</a></h2></p></div>';
249255
echo '</div>';
@@ -254,8 +260,8 @@ private function _renderLibrary() {
254260
echo '<span class="visualizer-chart-action visualizer-nochart-export"></span>';
255261
echo '<span class="visualizer-chart-action visualizer-nochart-shortcode"></span>';
256262
echo '</div>';
257-
echo '</div>';
258-
$this->_renderSidebar();
263+
echo '</div></div>';
264+
$this->_renderTwoColSidebar();
259265
echo '</div>';
260266
}
261267
echo '</div>';
@@ -325,7 +331,7 @@ private function _renderChartBox( $placeholder_id, $chart_id ) {
325331
$chart_status['title'] = __( 'Click to view the error', 'visualizer' );
326332
}
327333
$shortcode = sprintf( '[visualizer id="%s" lazy="no" class=""]', $chart_id );
328-
echo '<div class="visualizer-chart"><div class="visualizer-chart-title">', esc_html( $title ), '</div>';
334+
echo '<div class="items"><div class="visualizer-chart"><div class="visualizer-chart-title">', esc_html( $title ), '</div>';
329335
echo '<div id="', $placeholder_id, '" class="visualizer-chart-canvas">';
330336
echo '<img src="', VISUALIZER_ABSURL, 'images/ajax-loader.gif" class="loader">';
331337
echo '</div>';
@@ -341,36 +347,75 @@ private function _renderChartBox( $placeholder_id, $chart_id ) {
341347
echo '<span>&nbsp;</span>';
342348
echo '<hr><div class="visualizer-chart-status"><span title="' . __( 'Chart ID', 'visualizer' ) . '">(' . $chart_id . '):</span> <span class="visualizer-date" title="' . __( 'Last Updated', 'visualizer' ) . '">' . $chart_status['date'] . '</span><span class="visualizer-error"><i class="dashicons ' . $chart_status['icon'] . '" data-viz-error="' . esc_attr( str_replace( '"', "'", $chart_status['error'] ) ) . '" title="' . esc_attr( $chart_status['title'] ) . '"></i></span></div>';
343349
echo '</div>';
344-
echo '</div>';
350+
echo '</div></div>';
351+
}
352+
353+
/**
354+
* Render 2-col sidebar
355+
*/
356+
private function _renderTwoColSidebar() {
357+
if ( ! Visualizer_Module::is_pro() ) {
358+
echo '<div class="items two-col">';
359+
echo '<div class="visualizer-chart viz-pro">';
360+
echo '<div id="visualizer-sidebar" class="viz-pro two-columns">';
361+
echo '<div class="visualizer-sidebar-box">';
362+
echo '<h3>' . __( 'Discover the power of PRO!', 'visualizer' ) . '</h3><ul>';
363+
if ( Visualizer_Module_Admin::proFeaturesLocked() ) {
364+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '6 more chart types', 'visualizer' ) . '</ul>';
365+
} else {
366+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '11 more chart types', 'visualizer' ) . '</li>';
367+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Manual Data Editor', 'visualizer' ) . '</li>';
368+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'ChartJS Charts', 'visualizer' ) . '</li>';
369+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Table Google chart', 'visualizer' ) . '</li>';
370+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend Actions(Print, Export, Copy, Download)', 'visualizer' ) . '</li>';
371+
}
372+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Spreadsheet like editor', 'visualizer' ) . '</li>';
373+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Import from other charts', 'visualizer' ) . '</li>';
374+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Use database query to create charts', 'visualizer' ) . '</li>';
375+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Create charts from WordPress tables', 'visualizer' ) . '</li>';
376+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend editor', 'visualizer' ) . '</li>';
377+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Private charts', 'visualizer' ) . '</li>';
378+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Auto-sync with online files', 'visualizer' ) . '</li></ul>';
379+
echo '<p><a href="' . Visualizer_Plugin::PRO_TEASER_URL . '" target="_blank" class="button button-primary">' . __( 'View more features', 'visualizer' ) . '</a></p>';
380+
echo '</div>';
381+
echo '</div>';
382+
echo '</div>';
383+
echo '</div>';
384+
}
345385
}
346386

347387
/**
348388
* Render sidebar.
349389
*/
350390
private function _renderSidebar() {
351391
if ( ! Visualizer_Module::is_pro() ) {
352-
echo '<div id="visualizer-sidebar">';
392+
echo '<div class="items">';
393+
echo '<div class="visualizer-chart viz-pro">';
394+
echo '<div id="visualizer-sidebar" class="one-columns">';
353395
echo '<div class="visualizer-sidebar-box">';
354396
echo '<h3>' . __( 'Discover the power of PRO!', 'visualizer' ) . '</h3><ul>';
355-
echo '<li>' . __( 'Spreadsheet like editor', 'visualizer' ) . '</li>';
356-
echo '<li>' . __( 'Import from other charts', 'visualizer' ) . '</li>';
357-
echo '<li>' . __( 'Use database query to create charts', 'visualizer' ) . '</li>';
358-
echo '<li>' . __( 'Create charts from WordPress tables', 'visualizer' ) . '</li>';
359-
echo '<li>' . __( 'Frontend editor', 'visualizer' ) . '</li>';
360-
echo '<li>' . __( 'Private charts', 'visualizer' ) . '</li>';
361-
echo '<li>' . __( 'Auto-sync with online files', 'visualizer' ) . '</li>';
362397
if ( Visualizer_Module_Admin::proFeaturesLocked() ) {
363-
echo '<li>' . __( '6 more chart types', 'visualizer' ) . '</ul>';
398+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '6 more chart types', 'visualizer' ) . '</li>';
399+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Manual Data Editor', 'visualizer' ) . '</li>';
400+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'ChartJS Charts', 'visualizer' ) . '</li>';
401+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Table Google chart', 'visualizer' ) . '</li>';
402+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Spreadsheet like editor', 'visualizer' ) . '</li>';
403+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Import from other charts', 'visualizer' ) . '</li>';
404+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Use database query to create charts', 'visualizer' ) . '</li>';
364405
} else {
365-
echo '<li>' . __( '11 more chart types', 'visualizer' ) . '</li>';
366-
echo '<li>' . __( 'Manual Data Editor', 'visualizer' ) . '</li>';
367-
echo '<li>' . __( 'ChartJS Charts', 'visualizer' ) . '</li>';
368-
echo '<li>' . __( 'Table Google chart', 'visualizer' ) . '</li>';
369-
echo '<li>' . __( 'Frontend Actions(Print Chart, Export to CSV, Export to Excel, Copy, Download Chart Image)', 'visualizer' ) . '</li></ul>';
406+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( '11 more chart types', 'visualizer' ) . '</li>';
407+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Private charts', 'visualizer' ) . '</li>';
408+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Auto-sync with online files', 'visualizer' ) . '</li>';
409+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend editor', 'visualizer' ) . '</li>';
410+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Create charts from WordPress tables', 'visualizer' ) . '</li>';
411+
echo '<li><svg class="icon list-icon"><use xlink:href="#list-icon"></use></svg>' . __( 'Frontend Actions(Print, Export, Copy, Download)', 'visualizer' ) . '</li>';
370412
}
413+
echo '</ul>';
371414
echo '<p><a href="' . Visualizer_Plugin::PRO_TEASER_URL . '" target="_blank" class="button button-primary">' . __( 'View more features', 'visualizer' ) . '</a></p>';
372-
echo '<p style="background-color: #0073aac7; color: #ffffff; padding: 2px; font-weight: bold;">' . __( 'We offer a 30-day no-questions-asked money back guarantee!', 'visualizer' ) . '</p>';
373-
echo '<p><a href="' . VISUALIZER_SURVEY . '" target="_blank" class="">' . __( 'Don\'t see the features you need? Help us improve!', 'visualizer' ) . '</a></p>';
415+
echo '<p class="we-offer">' . __( 'We offer a 30-day money-back guarantee!', 'visualizer' ) . '</p>';
416+
echo '<p class="help-us-improve"><a href="' . VISUALIZER_SURVEY . '" target="_blank" class="">' . __( 'Don\'t see the features you need? Help us improve!', 'visualizer' ) . '</a></p>';
417+
echo '</div>';
418+
echo '</div>';
374419
echo '</div>';
375420
echo '</div>';
376421
}

‎css/library.css

Lines changed: 120 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
2+
*,
3+
*::before,
4+
*::after {
5+
box-sizing: border-box;
6+
}
7+
18
#visualizer-icon {
29
background-image: url("../images/icon.png");
310
}
@@ -24,11 +31,21 @@
2431
.visualizer-list-item .visualizer-pro-only {
2532
text-decoration: line-through;
2633
}
27-
34+
#visualizer-content-wrapper {
35+
padding: 0;
36+
}
2837
#visualizer-library {
29-
display: table-cell;
38+
/*display: table-cell;*/
3039
width: auto;
31-
margin: 20px 0;
40+
margin: 20px -10px;
41+
display: flex;
42+
flex-wrap: wrap;
43+
align-items: flex-start;
44+
}
45+
46+
#visualizer-library.visualizer-clearfix:before,
47+
#visualizer-library.visualizer-clearfix:after {
48+
display: none;
3249
}
3350

3451
#visualizer-content-wrapper {
@@ -42,11 +59,13 @@
4259
margin-top: -16px;
4360
margin-left: -16px;
4461
}
62+
#visualizer-library .items {
63+
padding: 0 10px;
64+
width: 33.3333%;
65+
}
4566

4667
.visualizer-chart {
47-
display: none;
48-
float: left;
49-
margin: 0 24px 24px 0;
68+
margin: 0 0px 24px 0;
5069
padding: 5px;
5170
border: 1px solid #ddd;
5271
background-color: #efefef;
@@ -131,6 +150,7 @@
131150

132151
.visualizer-chart-footer {
133152
margin-top: 4px;
153+
width: 100%;
134154
}
135155

136156
.visualizer-chart-shortcode {
@@ -163,36 +183,86 @@
163183
text-align: right;
164184
}
165185

166-
#visualizer-sidebar {
167-
clear: both;
168-
margin: 20px 0px;
169-
width: 96%;
186+
.visualizer-sidebar-box {
187+
display: block;
188+
padding: 30px 34px;
189+
background: white;
170190
}
171191

172-
.visualizer-sidebar-box ul li {
173-
margin: 4px 0;
174-
color: #23282d;
175-
float: left;
176-
width: 25%;
192+
.visualizer-sidebar-box h3{
193+
padding: 0;
194+
margin: 0 0 20px;
195+
display: block;
196+
width: 100%;
197+
font-size: 24px;
198+
font-weight: 600;
199+
line-height: 1.3;
177200
}
178201

179202
.visualizer-sidebar-box ul {
180-
margin-left: 40px;
181-
text-align: left;
182-
list-style-type: disc;
203+
padding: 0;
204+
margin: 0;
205+
list-style: none;
206+
display: flex;
207+
flex-wrap: wrap;
183208
}
184209

185-
.visualizer-sidebar-box {
186-
display: block;
187-
padding-top: 10px;
188-
padding-bottom: 15px;
189-
border-top: 5px solid #0073aa;
190-
border-bottom: 5px solid #0073aa;
191-
color: #0073aa;
192-
background: white;
193-
text-align: center;
210+
.visualizer-sidebar-box ul li {
211+
color: #000;
212+
list-style: none;
213+
padding: 0;
214+
margin: 0;
215+
font-size: 16px;
216+
line-height: 1.8;
217+
position: relative;
218+
padding-left: 26px;
219+
}
220+
221+
.visualizer-sidebar-box ul li .icon{
222+
color: #00AA63;
223+
width: 16px;
224+
height: 16px;
225+
margin-top: 3px;
226+
position: absolute;
227+
left: 0;
228+
top: 0;
229+
}
230+
.visualizer-sidebar-box .button {
231+
width: 155px;
232+
height: 39px;
233+
background: #007CBA;
234+
border-radius: 4px;
235+
display: flex;
236+
align-items: center;
237+
text-align: center;
238+
color: #FFFFFF;
239+
justify-content: center;
240+
}
241+
.visualizer-sidebar-box .we-offer{
242+
background-color: transparent;
243+
color: #007CBA;
244+
font-weight: 400;
245+
padding: 0px;
246+
font-size: 14px;
247+
font-style: italic;
248+
margin-bottom: 0;
249+
}
250+
.visualizer-sidebar-box .help-us-improve{
251+
display: none;
252+
}
253+
.visualizer-chart.viz-pro {
254+
padding: 0;
255+
}
256+
.visualizer-chart.viz-pro .two-columns{
257+
padding: 0;
258+
border: 1px solid #DDDDDD;
259+
border: 5px solid #007CBA;
260+
}
261+
#visualizer-library .items.two-col {
262+
width: 66.6666%;
194263
}
195264

265+
196266
/* The switch - the box around the slider */
197267
.visualizer-switch {
198268
display: inline-block;
@@ -286,13 +356,20 @@ input:checked + .visualizer-slider:before {
286356
margin-top: 0;
287357
}
288358

359+
#visualizer-sidebar.two-columns .visualizer-sidebar-box ul li {
360+
width: calc(50% - 26px)
361+
}
362+
#visualizer-sidebar.one-columns .visualizer-sidebar-box ul li {
363+
width: 100%;
364+
}
365+
#visualizer-sidebar.one-columns .visualizer-sidebar-box p {
366+
margin-top: 8px;
367+
}
289368
#visualizer-sidebar .visualizer-sidebar-box p {
290369
margin-bottom: 0;
291370
}
292-
293-
#visualizer-sidebar .visualizer-sidebar-box {
294-
padding-top: 20px;
295-
padding-bottom: 20px;
371+
#visualizer-sidebar.one-columns {
372+
border-top: 5px solid #007CBA;
296373
}
297374

298375
.visualizer-chart-title {
@@ -349,3 +426,15 @@ div#visualizer-types ul, div#visualizer-types form p {
349426
color: red;
350427
cursor: pointer;
351428
}
429+
#toplevel_page_visualizer ul.wp-submenu li.wp-first-item + li + li + li {
430+
background: #FF7E65;
431+
font-size: 14px;
432+
font-weight: 600;
433+
color: #fff;
434+
}
435+
#toplevel_page_visualizer ul.wp-submenu li.wp-first-item + li + li + li > a {
436+
color: #fff;
437+
}
438+
#toplevel_page_visualizer ul.wp-submenu li.wp-first-item + li + li + li > a:hover {
439+
box-shadow: inherit;
440+
}

0 commit comments

Comments
 (0)