# 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:<br>

1. Basic Structure<br>

   ```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 ) {
           // 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<br>

   ```php
   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`
           ],
       ];
   }
   ```

3. #### Define Element Layout

   In the `get_layout()` method, specify the template file:<br>

   ```php
   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) );
   }
   ```

4. Complete Example<br>

   ```php
   <?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.