Add a new dashboard widget to promote store setup
This commit is contained in:
Moon
parent
ea7c6700bc
commit
6284cbee3a
|
|
@ -0,0 +1,55 @@
|
|||
/**
|
||||
* dashboard-finish-setup.scss
|
||||
* Styles for WooCommerce dashboard finish setup widgets
|
||||
* only loaded on the dashboard itself.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Imports
|
||||
*/
|
||||
@import "mixins";
|
||||
@import "variables";
|
||||
@import "fonts";
|
||||
|
||||
/**
|
||||
* Styling begins
|
||||
*/
|
||||
|
||||
.dashboard-widget-finish-setup {
|
||||
|
||||
.progress-wrapper {
|
||||
border: 1px solid #757575;
|
||||
border-radius: 10px;
|
||||
font-size: 0.9em;
|
||||
padding: 2px 8px 2px 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.progress-wrapper span {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.description div {
|
||||
margin-top: 11px;
|
||||
float: left;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.description img {
|
||||
float: right;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.circle-progress {
|
||||
|
||||
circle {
|
||||
stroke: #f0f0f0;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
stroke: #949494;
|
||||
}
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
|
|
@ -0,0 +1,154 @@
|
|||
<?php
|
||||
/**
|
||||
* Admin Dashboard - Finish Setup
|
||||
*
|
||||
* @package WooCommerce\Admin
|
||||
* @version 2.1.0
|
||||
*/
|
||||
|
||||
use Automattic\Jetpack\Constants;
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit; // Exit if accessed directly.
|
||||
}
|
||||
|
||||
if ( ! class_exists( 'WC_Admin_Dashboard_Finish_Setup', false ) ) :
|
||||
|
||||
/**
|
||||
* WC_Admin_Dashboard_Setup Class.
|
||||
*/
|
||||
class WC_Admin_Dashboard_Finish_Setup {
|
||||
|
||||
/**
|
||||
* List of tasks.
|
||||
*
|
||||
* @var array
|
||||
*/
|
||||
private $tasks = array(
|
||||
'store_details' => array(
|
||||
'completed' => false,
|
||||
'button_link' => 'admin.php?page=wc-admin&path=%2Fsetup-wizard',
|
||||
),
|
||||
'products' => array(
|
||||
'completed' => false,
|
||||
'button_link' => 'admin.php?page=wc-admin&task=products',
|
||||
),
|
||||
'tax' => array(
|
||||
'completed' => false,
|
||||
'button_link' => 'admin.php?page=wc-admin&task=tax',
|
||||
),
|
||||
'shipping' => array(
|
||||
'completed' => false,
|
||||
'button_link' => 'admin.php?page=wc-admin&task=shipping',
|
||||
),
|
||||
'appearance' => array(
|
||||
'completed' => false,
|
||||
'button_link' => 'admin.php?page=wc-admin&task=appearance',
|
||||
),
|
||||
);
|
||||
|
||||
/**
|
||||
* WC_Admin_Dashboard_Finish_Setup constructor.
|
||||
*/
|
||||
public function __construct() {
|
||||
if ( $this->should_display_widget() ) {
|
||||
$this->populate_tasks();
|
||||
$this->hook_meta_box();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook meta_box
|
||||
*/
|
||||
public function hook_meta_box() {
|
||||
$version = Constants::get_constant( 'WC_VERSION' );
|
||||
|
||||
wp_enqueue_style( 'wc-dashboard-finish-setup', WC()->plugin_url() . '/assets/css/dashboard-finish-setup.css', array(), $version );
|
||||
|
||||
add_meta_box(
|
||||
'wc_admin_dasbharod_finish_setup',
|
||||
__( 'WooCommerce Setup', 'woocommerce' ),
|
||||
array( $this, 'render_meta_box' ),
|
||||
'dashboard',
|
||||
'normal',
|
||||
'high'
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Render meta box output.
|
||||
*/
|
||||
public function render_meta_box() {
|
||||
$total_number_of_tasks = count( $this->tasks );
|
||||
$total_number_of_completed_tasks = count( $this->get_completed_tasks() );
|
||||
|
||||
$task = $this->get_next_task();
|
||||
if ( ! $task ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$button_link = $task['button_link'];
|
||||
|
||||
// Given 'r' (circle element's r attr), dashoffset = ((100-$desired_percentage)/100) * PI * (r*2).
|
||||
$progress_percentage = ( $total_number_of_completed_tasks / $total_number_of_tasks ) * 100;
|
||||
$circle_r = 6.5;
|
||||
$circle_dashoffset = ( ( 100 - $progress_percentage ) / 100 ) * ( pi() * ( $circle_r * 2 ) );
|
||||
|
||||
require_once __DIR__ . '/views/html-admin-dashboard-finish-setup.php';
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate tasks from the database.
|
||||
*/
|
||||
private function populate_tasks() {
|
||||
$tasks = get_option( 'woocommerce_task_list_tracked_completed_tasks', array() );
|
||||
foreach ( $tasks as $task ) {
|
||||
if ( isset( $this->tasks[ $task ] ) ) {
|
||||
$this->tasks[ $task ]['completed'] = true;
|
||||
$this->tasks[ $task ]['button_link'] = wc_admin_url( $this->tasks[ $task ]['button_link'] );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Return completed tasks
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
private function get_completed_tasks() {
|
||||
return array_filter(
|
||||
$this->tasks,
|
||||
function( $task ) {
|
||||
return $task['completed'];
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the next task.
|
||||
*
|
||||
* @return array|null
|
||||
*/
|
||||
private function get_next_task() {
|
||||
foreach ( $this->tasks as $task ) {
|
||||
if ( false === $task['completed'] ) {
|
||||
return $task;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check to see if we should display the widget
|
||||
*
|
||||
* @return bool
|
||||
*/
|
||||
private function should_display_widget() {
|
||||
return true !== get_option( 'woocommerce_task_list_complete' ) && true !== get_option( 'woocommerce_task_list_hidden' );
|
||||
}
|
||||
}
|
||||
|
||||
endif;
|
||||
|
||||
return new WC_Admin_Dashboard_Finish_Setup();
|
||||
|
|
@ -94,6 +94,7 @@ class WC_Admin {
|
|||
switch ( $screen->id ) {
|
||||
case 'dashboard':
|
||||
case 'dashboard-network':
|
||||
include __DIR__ . '/class-wc-admin-dashboard-finish-setup.php';
|
||||
include __DIR__ . '/class-wc-admin-dashboard.php';
|
||||
break;
|
||||
case 'options-permalink':
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<?php
|
||||
/**
|
||||
* Admin View: Dashboard - Finish Setup
|
||||
*
|
||||
* @package WooCommerce\Admin
|
||||
*/
|
||||
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
<div class="dashboard-widget-finish-setup">
|
||||
<span class='progress-wrapper'>
|
||||
<svg class="circle-progress" width="17" height="17" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle r="6.5" cx="10" cy="10" fill="transparent" stroke-dasharray="40.859" stroke-dashoffset="0"></circle>
|
||||
<circle class="bar" r="6.5" cx="190" cy="10" fill="transparent" stroke-dasharray="40.859" stroke-dashoffset="<?php echo esc_attr( $circle_dashoffset ); ?>" transform='rotate(-90 100 100)'></circle>
|
||||
</svg>
|
||||
<span>Step <?php echo esc_html( $total_number_of_completed_tasks ); ?> of <?php echo esc_html( $total_number_of_tasks ); ?></span>
|
||||
</span>
|
||||
|
||||
<div class="description">
|
||||
<div>
|
||||
<?php echo esc_html_e( 'You\'re almost there! Once you complete store setup you can start receiving orders.', 'woocommerce' ); ?>
|
||||
<div><a href='<?php echo esc_attr( $button_link ); ?>' class='button button-primary'><?php echo esc_html_e( 'Start selling', 'woocommerce' ); ?></a></div>
|
||||
</div>
|
||||
<img src="<?php echo esc_url( WC()->plugin_url() ); ?>/assets/images/dashboard-widget-finish-setup.png"" />
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue