Create WordPress Pointer Tutorial For New Users

class-sd-admin-pointer.php

<?php
/**
 * Adds and controls pointers for contextual help/tutorials
 *
 * @author   WooThemes
 * @category Admin
 * @package  WooCommerce/Admin
 * @version  2.4.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * SD_Admin_Pointers Class.
 */
class SD_Admin_Pointers {

	/**
	 * Constructor.
	 */
	public function __construct() {
		add_action( 'admin_enqueue_scripts', array( $this, 'create_product_tutorial' ), 1000  );
	}

	/**
	 * Pointers for creating a product.
	 */
	public function create_product_tutorial() {
		$user_id = get_current_user_id();
		$show_tutorial = get_user_meta( $user_id, 'not_show_tutorial' );
		if ( ! isset( $_GET['tutorial'] ) || !current_user_can('smart_dealer') || $show_tutorial ) {
			return;
		}
		// If tutorial var is exist in $_GET.
		if ( 'show' == $_GET['tutorial'] ) {
			update_user_meta( $user_id, 'not_show_tutorial', true );
		}

		// These pointers will chain - they will not be shown at once.
		// Don't run on WP < 3.3
	    if ( get_bloginfo( 'version' ) < '3.3' )
	        return;
	    $screen = get_current_screen();
	    $screen_id = $screen->id;
	 
	    // Get pointers for this screen
	    $pointers = array();
	   	if( 'smart_deal' == $screen_id && current_user_can('smart_dealer')){
		    $pointers['title'] = array(
				'target'       => "#title",
				'next'         => 'content',
				'next_trigger' => array(
					'target' => '#title',
					'event'  => 'input',
				),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'Deal Title', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'Give your new Deal a title here. This is a required field and will be what your customers will see on Smart deal page.', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'top',
						'align' => 'left',
					),
				),
			);
			$pointers['content'] = array(
				'target'       => "#wp-content-editor-container",
				'next'         => 'clickthrough-url',
				'next_trigger' => array(),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'Deal description', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'This is your Deal main content. Here you should describe your Deal in detail.', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'bottom',
						'align' => 'middle',
					),
				),
			);

			$pointers['clickthrough-url'] = array(
				'target'       => "#acf-field_59f34fe7c7012",
				'next'         => 'company-name',
				'next_trigger' => array(),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'Click Through URL', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'Click Through URL is the External URL of your deal', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'bottom',
						'align' => 'middle',
					),
				),
			);
			$pointers['company-name'] = array(
				'target'       => "#acf-field_5a2fe11317dbe",
				'next'         => 'deal-duration',
				'next_trigger' => array(),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'Company Name', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'Here you should give your company name deal. It visible on deal page.', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'bottom',
						'align' => 'middle',
					),
				),
			);
			$pointers['deal-duration'] = array(
				'target'       => "#acf-group_5509e5d9b31f3",
				'next'         => 'smart_deal_categorydiv',
				'next_trigger' => array(),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'DealDeal Duration', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'This is your Deal Duration. Here you should give the date from when this deal will be active.', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'bottom',
						'align' => 'middle',
					),
				),
			);
			$pointers['smart_deal_categorydiv'] = array(
				'target'       => "#smart_deal_categorydiv",
				'next'         => 'smart_deal_location',
				'next_trigger' => array(),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'Deal category', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'This is your Deal category. Here you should select the category of your deal.', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'bottom',
						'align' => 'middle',
					),
				),
			);
			$pointers['smart_deal_location'] = array(
				'target'       => "#acf-group_59f33e62777f4",
				'next'         => 'smart_deal_coupon_code',
				'next_trigger' => array(),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'Deal Location', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'This is your Deal Location. Here you should select the location of your deal.', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'bottom',
						'align' => 'middle',
					),
				),
			);
			$pointers['smart_deal_coupon_code'] = array(
				'target'       => "#acf-field_5a28f4ebc2e2d",
				'next'         => 'smart_deal_details',
				'next_trigger' => array(),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'Coupon Code', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'This is available Coupon code for Deal. Here you should provide End Users available Coupon code for Your Deal.', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'top',
						'align' => 'middle',
					),
				),
			);
			$pointers['smart_deal_details'] = array(
				'target'       => "#acf-field_5a28f9396900c",
				'next'         => 'smart_deal_restriction',
				'next_trigger' => array(),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'Deal Details', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'This is about Deal Details. Here you should give some more details for Your Deal.', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'top',
						'align' => 'middle',
					),
				),
			);
			$pointers['smart_deal_restriction'] = array(
				'target'       => "#acf-field_5a29021a888ea",
				'next'         => 'smart_deal_featured',
				'next_trigger' => array(),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'Restrictions and Fine Print', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'This is about Deal Restrictions and Fine Print. Here you should give attractive offers or fine print for Your Deal.', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'top',
						'align' => 'middle',
					),
				),
			);
			
			$pointers['smart_deal_featured'] = array(
				'target'       => "#acf-group_5a52518f2b842",
				'next'         => 'apply-coupon-for-payment',
				'next_trigger' => array(),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'Deal Featured Image', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'Select a Image for your deal that will be displayed on your deal page', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'bottom',
						'align' => 'middle',
					),
				),
			);
			$pointers['apply-coupon-for-payment'] = array(
				'target'       => "#major-publishing-actions",
				'next'         => 'checkout-by-paypal',
				'next_trigger' => array(),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'Apply Coupon Code', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'Apply Coupon code to get discount for deal publish on Smart Deal section.', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'bottom',
						'align' => 'middle',
					),
				),
			);
			
			$pointers['checkout-by-paypal'] = array(
				'target'       => "#publish",
				'next'         => 'publish-deal',
				'next_trigger' => array(),
				'options'      => array(
					'content'  => '<h3>' . esc_html__( 'Publish Deal', 'dx-smart-deal' ) . '</h3>' .
									'<p>' . esc_html__( 'Publish your deal and make it visible on Smart Deal section.', 'dx-smart-deal' ) . '</p>',
					'position' => array(
						'edge'  => 'bottom',
						'align' => 'middle',
					),
				),
			);
		}

	    if ( ! $pointers || ! is_array( $pointers ) )
	        return;
	    // Get dismissed pointers
	    $dismissed = explode( ',', (string) get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) );
	    $valid_pointers =array();
	 
	    // Check pointers and remove dismissed ones.
	    foreach ( $pointers as $pointer_id => $pointer ) {
	 
	        // Sanity check
	        if ( in_array( $pointer_id, $dismissed ) || empty( $pointer )  || empty( $pointer_id ) || empty( $pointer['target'] ) || empty( $pointer['options'] ) )
	            continue;
	 
	        $pointer['pointer_id'] = $pointer_id;
	 
	        // Add the pointer to $valid_pointers array
	        $valid_pointers['pointers'][] =  $pointer;
	    }

	    // No valid pointers? Stop here.
	    if ( empty( $valid_pointers ) )
	        return;
	 
	    // Add pointers style to queue.
	    wp_enqueue_style( 'wp-pointer' );
	 
	    // Add pointers script to queue. Add custom script.
	    wp_enqueue_script( 'wptuts-pointer', plugins_url( '_inc/smart-dealer-tutorial.js', dirname(__FILE__) ), array( 'wp-pointer' ) );
	 
	    // Add pointer options to script.
	    wp_localize_script( 'wptuts-pointer', 'wptutsPointer', $valid_pointers );

	}

}

new SD_Admin_Pointers();

smart-dealer-tutorial.js

jQuery(document).ready(function(){
	var sd_pointers = wptutsPointer;
	setTimeout( init_sd_pointers, 800 );
	function init_sd_pointers() {
		jQuery.each( sd_pointers.pointers, function( i ) {
			show_sd_pointer( i );
			return false;
		});
	}
	function show_sd_pointer( id ) {
		var pointer = sd_pointers.pointers[ id ];
		if( undefined == pointer ){
			return;
		}
		var options = jQuery.extend( pointer.options, {
			pointerClass: 'wp-pointer wc-pointer',
			close: function() {
				if ( pointer.next && 'publish-deal' != pointer.next ) {
					show_sd_pointer( (id+1) );
					jQuery('html, body').animate({
					    scrollTop: jQuery("#wp-pointer-"+(id+1) ).offset().top
					}, 1000);
				}
			},
			buttons: function( event, t ) {
				var close   = 'Dismiss',
					next    = 'Next',
					button  = jQuery( '<a class=\"close\" href=\"#\">' + close + '</a>' ),
					button2 = jQuery( '<a class=\"button button-primary\" style=\"margin-right: 21px;\" href=\"#\">' + next + '</a>' ),
					wrapper = jQuery( '<div class=\"wc-pointer-buttons\" />' );

				button.bind( 'click.pointer', function(e) {
					e.preventDefault();
					t.element.pointer('destroy');
				});

				button2.bind( 'click.pointer', function(e) {
					e.preventDefault();
					t.element.pointer('close');
				});

				wrapper.append( button );
				wrapper.append( button2 );

				return wrapper;
			},
		} );
		var this_pointer = jQuery( pointer.target ).pointer( options );
		this_pointer.pointer( 'open' );

		if ( pointer.next_trigger ) {
			jQuery( pointer.next_trigger.target ).on( pointer.next_trigger.event, function() {
				setTimeout( function() { this_pointer.pointer( 'close' ); }, 400 );
			});
		}
	}
});