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.

Last updated

Was this helpful?