WC_Admin_Pointers

WC_Admin_Pointers Class.

Defined (1)

The class is defined in the following location(s).

/includes/admin/class-wc-admin-pointers.php  
  1. class WC_Admin_Pointers { 
  2.  
  3. /** 
  4. * Constructor. 
  5. */ 
  6. public function __construct() { 
  7. add_action( 'admin_enqueue_scripts', array( $this, 'setup_pointers_for_screen' ) ); 
  8.  
  9. /** 
  10. * Setup pointers for screen. 
  11. */ 
  12. public function setup_pointers_for_screen() { 
  13. if ( ! $screen = get_current_screen() ) { 
  14. return; 
  15.  
  16. switch ( $screen->id ) { 
  17. case 'product' : 
  18. $this->create_product_tutorial(); 
  19. break; 
  20.  
  21. /** 
  22. * Pointers for creating a product. 
  23. */ 
  24. public function create_product_tutorial() { 
  25. if ( ! isset( $_GET['tutorial'] ) || ! current_user_can( 'manage_options' ) ) { 
  26. return; 
  27. // These pointers will chain - they will not be shown at once. 
  28. $pointers = array( 
  29. 'pointers' => array( 
  30. 'title' => array( 
  31. 'target' => "#title",  
  32. 'next' => 'content',  
  33. 'next_trigger' => array( 
  34. 'target' => '#title',  
  35. 'event' => 'input',  
  36. ),  
  37. 'options' => array( 
  38. 'content' => '<h3>' . esc_html__( 'Product name', 'woocommerce' ) . '</h3>' . 
  39. '<p>' . esc_html__( 'Give your new product a name here. This is a required field and will be what your customers will see in your store.', 'woocommerce' ) . '</p>',  
  40. 'position' => array( 
  41. 'edge' => 'top',  
  42. 'align' => 'left',  
  43. ),  
  44. ),  
  45. ),  
  46. 'content' => array( 
  47. 'target' => "#wp-content-editor-container",  
  48. 'next' => 'product-type',  
  49. 'next_trigger' => array(),  
  50. 'options' => array( 
  51. 'content' => '<h3>' . esc_html__( 'Product description', 'woocommerce' ) . '</h3>' . 
  52. '<p>' . esc_html__( 'This is your products main body of content. Here you should describe your product in detail.', 'woocommerce' ) . '</p>',  
  53. 'position' => array( 
  54. 'edge' => 'bottom',  
  55. 'align' => 'middle',  
  56. ),  
  57. ),  
  58. ),  
  59. 'product-type' => array( 
  60. 'target' => "#product-type",  
  61. 'next' => 'virtual',  
  62. 'next_trigger' => array( 
  63. 'target' => "#product-type",  
  64. 'event' => 'change blur click',  
  65. ),  
  66. 'options' => array( 
  67. 'content' => '<h3>' . esc_html__( 'Choose product type', 'woocommerce' ) . '</h3>' . 
  68. '<p>' . esc_html__( 'Choose a type for this product. Simple is suitable for most physical goods and services (we recommend setting up a simple product for now).', 'woocommerce' ) . '</p>' . 
  69. '<p>' . esc_html__( 'Variable is for more complex products such as t-shirts with multiple sizes.', 'woocommerce' ) . '</p>' . 
  70. '<p>' . esc_html__( 'Grouped products are for grouping several simple products into one.', 'woocommerce' ) . '</p>' . 
  71. '<p>' . esc_html__( 'Finally, external products are for linking off-site.', 'woocommerce' ) . '</p>',  
  72. 'position' => array( 
  73. 'edge' => 'bottom',  
  74. 'align' => 'middle',  
  75. ),  
  76. ),  
  77. ),  
  78. 'virtual' => array( 
  79. 'target' => "#_virtual",  
  80. 'next' => 'downloadable',  
  81. 'next_trigger' => array( 
  82. 'target' => "#_virtual",  
  83. 'event' => 'change',  
  84. ),  
  85. 'options' => array( 
  86. 'content' => '<h3>' . esc_html__( 'Virtual products', 'woocommerce' ) . '</h3>' . 
  87. '<p>' . esc_html__( 'Check the "Virtual" box if this is a non-physical item, for example a service, which does not need shipping.', 'woocommerce' ) . '</p>',  
  88. 'position' => array( 
  89. 'edge' => 'bottom',  
  90. 'align' => 'middle',  
  91. ),  
  92. ),  
  93. ),  
  94. 'downloadable' => array( 
  95. 'target' => "#_downloadable",  
  96. 'next' => 'regular_price',  
  97. 'next_trigger' => array( 
  98. 'target' => "#_downloadable",  
  99. 'event' => 'change',  
  100. ),  
  101. 'options' => array( 
  102. 'content' => '<h3>' . esc_html__( 'Downloadable products', 'woocommerce' ) . '</h3>' . 
  103. '<p>' . esc_html__( 'If purchasing this product gives a customer access to a downloadable file, e.g. software, check this box.', 'woocommerce' ) . '</p>',  
  104. 'position' => array( 
  105. 'edge' => 'bottom',  
  106. 'align' => 'middle',  
  107. ),  
  108. ),  
  109. ),  
  110. 'regular_price' => array( 
  111. 'target' => "#_regular_price",  
  112. 'next' => 'postexcerpt',  
  113. 'next_trigger' => array( 
  114. 'target' => "#_regular_price",  
  115. 'event' => 'input',  
  116. ),  
  117. 'options' => array( 
  118. 'content' => '<h3>' . esc_html__( 'Prices', 'woocommerce' ) . '</h3>' . 
  119. '<p>' . esc_html__( 'Next you\'ll need to give your product a price.', 'woocommerce' ) . '</p>',  
  120. 'position' => array( 
  121. 'edge' => 'bottom',  
  122. 'align' => 'middle',  
  123. ),  
  124. ),  
  125. ),  
  126. 'postexcerpt' => array( 
  127. 'target' => "#postexcerpt",  
  128. 'next' => 'postimagediv',  
  129. 'next_trigger' => array( 
  130. 'target' => "#postexcerpt",  
  131. 'event' => 'input',  
  132. ),  
  133. 'options' => array( 
  134. 'content' => '<h3>' . esc_html__( 'Product short description', 'woocommerce' ) . '</h3>' . 
  135. '<p>' . esc_html__( 'Add a quick summary for your product here. This will appear on the product page under the product name.', 'woocommerce' ) . '</p>',  
  136. 'position' => array( 
  137. 'edge' => 'bottom',  
  138. 'align' => 'middle',  
  139. ),  
  140. ),  
  141. ),  
  142. 'postimagediv' => array( 
  143. 'target' => "#postimagediv",  
  144. 'next' => 'product_tag',  
  145. 'options' => array( 
  146. 'content' => '<h3>' . esc_html__( 'Product images', 'woocommerce' ) . '</h3>' . 
  147. '<p>' . esc_html__( 'Upload or assign an image to your product here. This image will be shown in your store\'s catalog.', 'woocommerce' ) . '</p>',  
  148. 'position' => array( 
  149. 'edge' => 'right',  
  150. 'align' => 'middle',  
  151. ),  
  152. ),  
  153. ),  
  154. 'product_tag' => array( 
  155. 'target' => "#tagsdiv-product_tag",  
  156. 'next' => 'product_catdiv',  
  157. 'options' => array( 
  158. 'content' => '<h3>' . esc_html__( 'Product tags', 'woocommerce' ) . '</h3>' . 
  159. '<p>' . esc_html__( 'You can optionally "tag" your products here. Tags as a method of labeling your products to make them easier for customers to find.', 'woocommerce' ) . '</p>',  
  160. 'position' => array( 
  161. 'edge' => 'right',  
  162. 'align' => 'middle',  
  163. ),  
  164. ),  
  165. ),  
  166. 'product_catdiv' => array( 
  167. 'target' => "#product_catdiv",  
  168. 'next' => 'submitdiv',  
  169. 'options' => array( 
  170. 'content' => '<h3>' . esc_html__( 'Product categories', 'woocommerce' ) . '</h3>' . 
  171. '<p>' . esc_html__( 'Optionally assign categories to your products to make them easier to browse through and find in your store.', 'woocommerce' ) . '</p>',  
  172. 'position' => array( 
  173. 'edge' => 'right',  
  174. 'align' => 'middle',  
  175. ),  
  176. ),  
  177. ),  
  178. 'submitdiv' => array( 
  179. 'target' => "#submitdiv",  
  180. 'next' => '',  
  181. 'options' => array( 
  182. 'content' => '<h3>' . esc_html__( 'Publish your product!', 'woocommerce' ) . '</h3>' . 
  183. '<p>' . esc_html__( 'When you are finished editing your product, hit the "Publish" button to publish your product to your store.', 'woocommerce' ) . '</p>',  
  184. 'position' => array( 
  185. 'edge' => 'right',  
  186. 'align' => 'middle',  
  187. ),  
  188. ),  
  189. ),  
  190. ),  
  191. ); 
  192.  
  193. $this->enqueue_pointers( $pointers ); 
  194.  
  195. /** 
  196. * Enqueue pointers and add script to page. 
  197. * @param array $pointers 
  198. */ 
  199. public function enqueue_pointers( $pointers ) { 
  200. $pointers = wp_json_encode( $pointers ); 
  201. wp_enqueue_style( 'wp-pointer' ); 
  202. wp_enqueue_script( 'wp-pointer' ); 
  203. wc_enqueue_js( " 
  204. jQuery( function( $ ) { 
  205. var wc_pointers = {$pointers}; 
  206.  
  207. setTimeout( init_wc_pointers, 800 ); 
  208.  
  209. function init_wc_pointers() { 
  210. $.each( wc_pointers.pointers, function( i ) { 
  211. show_wc_pointer( i ); 
  212. return false; 
  213. }); 
  214.  
  215. function show_wc_pointer( id ) { 
  216. var pointer = wc_pointers.pointers[ id ]; 
  217. var options = $.extend( pointer.options, { 
  218. close: function() { 
  219. if ( pointer.next ) { 
  220. show_wc_pointer( pointer.next ); 
  221. } ); 
  222. var this_pointer = $( pointer.target ).pointer( options ); 
  223. this_pointer.pointer( 'open' ); 
  224.  
  225. if ( pointer.next_trigger ) { 
  226. $( pointer.next_trigger.target ).on( pointer.next_trigger.event, function() { 
  227. setTimeout( function() { this_pointer.pointer( 'close' ); }, 400 ); 
  228. }); 
  229. }); 
  230. " );