Element Class

Creating a Custom Email Class

To create a custom element class in WooCommerce using YayMail, you will need to extend the BaseElement class provided by YayMail. Below is an example guide on how to set up your custom element class:

1. Basic Structure

   class NewElement extends \YayMail\Abstracts\BaseElement {
       protected static $type = 'new_element'; // Use this to recognize the element in Javascript
       private static $instance;
       public $available_email_ids = [ YAYMAIL_ALL_EMAILS ];
       
       public static function instance() {
   	if ( null === static::$instance ) {
   		static::$instance = new static();
   	}
   	return static::$instance;
       }
   
       public static function get_data( $attributes = [], $folder_parent = null ) {
           // Define element data
       }
   
       public static function get_layout( $element_data, $args ) {
           // Define element layout
       }
   }

2. Define Element Data In the get_data() method, you need to define the element's default properties:

   Follow this function to add more properties

   public static function get_data( $attributes = [], $folder_parent = null ) {
       return [
           'id'          => uniqid(),
           'type'        => self::$type,
           'name'        => 'New Element',
           'icon'        => self::$icon,
           'group'       => 'woocommerce', // or other group
           'available'   => true,
           'integration' => '3rd', // or 'default'
           'position'    => 190, // position in menu
           'data'        => [
               'padding' => [
                   'value_path'    => 'padding',
                   'component'     => 'Spacing',
                   'title'         => 'Padding',
                   'default_value' => [
                       'top'    => '15',
                       'right'  => '50',
                       'bottom' => '15',
                       'left'   => '50',
                   ],
               ],
               'title' => [
                   'value_path'    => 'title',
                   'component'     => 'TextInput',
                   'title'         => 'Title',
                   'default_value' => 'Default Title',
               ],
               'content' => [
                   'value_path'    => 'content',
                   'component'     => 'RichTextEditor',
                   'title'         => 'Content',
                   'default_value' => 'This is your content with [registered_shortcode]', // please folow created custom shortcode 
               ],
               // Add other properties follow tab `Data Element Default`
           ],
       ];
   }

1. Define Element Layout

   In the get_layout() method, specify the template file:

   public static function get_layout( $element_data, $args ) {
       $path = __DIR__ . '<path_to_your_element_template_file>';
       return yaymail_get_content($path, array_merge( [ 'element' => $element_data ], $args) );
   }

2. Complete Example

   <?php
   class NewElement extends \YayMail\Abstracts\BaseElement {
       protected static $type = 'new_element'; // Use this to recognize the element in Javascript
       private static $instance;
       public $available_email_ids = [ YAYMAIL_ALL_EMAILS ];
       
       public static function instance() {
   	if ( null === static::$instance ) {
   		static::$instance = new static();
   	}
   	return static::$instance;
       }
   
       public static function get_data( $attributes = [], $folder_parent = null ) {
           return [
               'id'          => uniqid(),
               'type'        => self::$type,
               'name'        => 'New Element',
               'icon'        => self::$icon,
               'group'       => 'woocommerce', // or other group
               'available'   => true,
               'integration' => '3rd', // or 'default'
               'position'    => 190, // position in menu
               'data'        => [
                   'padding' => [
                       'value_path'    => 'padding',
                       'component'     => 'Spacing',
                       'title'         => 'Padding',
                       'default_value' => [
                           'top'    => '15',
                           'right'  => '50',
                           'bottom' => '15',
                           'left'   => '50',
                       ],
                   ],
                   'title' => [
                       'value_path'    => 'title',
                       'component'     => 'TextInput',
                       'title'         => 'Title',
                       'default_value' => 'Default Title',
                   ],
                   'content' => [
                       'value_path'    => 'content',
                       'component'     => 'RichTextEditor',
                       'title'         => 'Content',
                       'default_value' => 'This is your content with [registered_shortcode]', // please folow created custom shortcode 
                   ],
                   // Add other properties follow tab `Data Element Default`
               ],
           ];
       }
   
       public static function get_layout( $element_data, $args ) {
           $path = __DIR__ . '<path_to_your_element_template_file>';
           return yaymail_get_content($path, array_merge( [ 'element' => $element_data ], $args) );
       }
   }

   The yaymail_get_content receives 3 parameters: $path, $args and $root. Which the $path is an only required parameter. Default $args will be empty, and the $root will be path to our YayMail plugin.