Custom divi builder child module not rendering

user_10379880 0
Viewed 642

I am trying to create some custom Divi builder modules. I followed the sparse documentation at their website, trying to create a module and a child module. Everything seems to be working fine, but the rendering. It is just rendering the module shortcode as a string, and not the content.

Current code of the parent module is 

class DEDE_Cards extends ET_Builder_Module {

public function init(){
    $this->name = esc_html__('Custom Card', 'dede-designvox-divi-extension');
    $this->plural = esc_html__('Custom Cards', 'dede-designvox-divi-extension');
    $this->main_css_element = 'cards-wrapper';
    $this->slug = 'dede_cards';
    $this->vb_support = 'on';
    $this->child_slug = 'dede_card_item';
}

public function get_fields(){
    return array(
        'title' => array(
            'label'           => esc_html__( 'Title', 'dede-designvox-divi-extension' ),
            'type'            => 'text',
            'toggle_slug'     => 'main_content',
            'description'     => esc_html__( 'Type the section title' ),
        ),
        'card_title_position' => array(
            'label'           => esc_html__( 'Title Position', 'dede-designvox-divi-extension' ),
            'type'            => 'select',
            'options'         => array(
                'overlay' => esc_html__( 'Overlay', 'et_builder' ),
                'top'  => esc_html__( 'Over image', 'et_builder' ),
                'bottom'  => esc_html__( 'Under image', 'et_builder' ),
            ),
            'toggle_slug'     => 'main_content',
            'description'     => esc_html__( 'Here you can choose the position of the card title', 'dede-designvox-divi-extension' ),
            'default_on_front' => 'bottom',
        ),
    );
}

function before_render() {
    global $dede_card_item_number;
    $dede_card_item_number = 1;
}

public function render($unprocessed_props, $content = null, $render_slug ){
    global $dede_card_item_number;


    return sprintf(
        '<div>%1$s</div>',
        $this->content
    );
}

public function add_new_child_text() {
    return esc_html__( 'Add New Card Item1', 'dede-designvox-divi-extension' );
}

}

new DEDE_Cards;

And then the child module 

class DEDE_Card_Item extends ET_Builder_Module {

    public function init(){
        $this->name = esc_html__('Custom Card', 'dede-designvox-divi-extension');
        $this->plural = esc_html__('Custom Cards', 'dede-designvox-divi-extension');
        $this->type= 'child';
        $this->child_title_var = 'title';
        $this->no_render = true;
        $this->slug = 'dede_card_item';
        $this->vb_support = 'on';
    }

    public function get_fields(){
        return array(
            'title' => array(
                'label' => esc_html__('Title', 'dede-designvox-divi-extension'),
                'type' => 'text',
                'description' => esc_html__('The title of this card', 'dede-designvox-divi-extension'),
                'toggle_slug' => 'main_content',
            ),
            'desc' => array(
                'label'           => esc_html__( 'Description', 'dede-designvox-divi-extension' ),
                'type'            => 'textarea',
                'description'     => esc_html__( 'The card description' ),
                'toggle_slug'     => 'main_content',
            ),
            'src'     => array(
                'label'           => esc_html__( 'Image', 'dede-designvox-divi-extension'),
                'type'            => 'upload',
                'description'     => esc_html__( 'Upload your desired image, or type in the URL to the image', 'dede-designvox-divi-extension'),
                'upload_button_text' => esc_attr__('Upload an image', 'dede-designvox-divi-extension'),
                'choose_text' => esc_attr__('Choose an Image', 'dede-designvox-divi-extension'),
                'update_text' => esc_attr__('Set as Image', 'dede-designvox-divi-extension'),
                'affects'         => 'alt',
                'toggle_slug'     => 'main_content',
            ),
            'alt' => array(
                'label'           => esc_html__( 'Image Alternative Text', 'dede-designvox-divi-extension' ),
                'type'            => 'text',
                'depends_show_if' => 'on',
                'depends_on'      => array(
                    'src',
                ),
                'description'     => esc_html__( 'This defines the HTML ALT text. A short description of your image can be placed here.', 'dede-designvox-divi-extension' ),
                'toggle_slug'     => 'main_content',
            ),
            'url' => array(
                'label'           => esc_html__( 'Link URL', 'dede-designvox-divi-extension' ),
                'type'            => 'text',
                'description'     => esc_html__( 'Enter the link that you would like this card to direct to.', 'dede-designvox-divi-extension' ),
                'toggle_slug'     => 'main_content',
            ),
        );
    }

}

new DEDE_Card_Item;

The shortcode is just being rendered as a string on the website, like:

[dede_card_item _builder_version=”3.14″ title=”#1 card title” desc=”#1 card desc” src=”http://localhost:8888/wp-content/uploads/2018/09/14079861_1202408189819777_4296465020285869305_n.jpg” use_background_color_gradient=”off” background_color_gradient_start=”#2b87da” background_color_gradient_end=”#29c4a9″ background_color_gradient_type=”linear” background_color_gradient_direction=”180deg” background_color_gradient_direction_radial=”center” background_color_gradient_start_position=”0%” background_color_gradient_end_position=”100%” background_color_gradient_overlays_image=”off” parallax=”off” parallax_method=”on” background_size=”cover” background_position=”center” background_repeat=”no-repeat” background_blend=”normal” allow_player_pause=”off” background_video_pause_outside_viewport=”on” text_shadow_style=”none” module_text_shadow_style=”none” box_shadow_style=”none” /][dede_card_item _builder_version=”3.14″ title=”#1 card title” desc=”#1 card desc” src=”http://localhost:8888/wp-content/uploads/2018/09/14079861_1202408189819777_4296465020285869305_n.jpg” use_background_color_gradient=”off” background_color_gradient_start=”#2b87da” background_color_gradient_end=”#29c4a9″ background_color_gradient_type=”linear” background_color_gradient_direction=”180deg” background_color_gradient_direction_radial=”center” background_color_gradient_start_position=”0%” background_color_gradient_end_position=”100%” background_color_gradient_overlays_image=”off” parallax=”off” parallax_method=”on” background_size=”cover” background_position=”center” background_repeat=”no-repeat” background_blend=”normal” allow_player_pause=”off” background_video_pause_outside_viewport=”on” text_shadow_style=”none” module_text_shadow_style=”none” box_shadow_style=”none” /][dede_card_item _builder_version=”3.14″ title=”#1 card title” desc=”#1 card desc” src=”http://localhost:8888/wp-content/uploads/2018/09/14079861_1202408189819777_4296465020285869305_n.jpg” use_background_color_gradient=”off” background_color_gradient_start=”#2b87da” background_color_gradient_end=”#29c4a9″ background_color_gradient_type=”linear” background_color_gradient_direction=”180deg” background_color_gradient_direction_radial=”center” background_color_gradient_start_position=”0%” background_color_gradient_end_position=”100%” background_color_gradient_overlays_image=”off” parallax=”off” parallax_method=”on” background_size=”cover” background_position=”center” background_repeat=”no-repeat” background_blend=”normal” allow_player_pause=”off” background_video_pause_outside_viewport=”on” text_shadow_style=”none” module_text_shadow_style=”none” box_shadow_style=”none” /][dede_card_item _builder_version=”3.14″ title=”#1 card title” desc=”#1 card desc” src=”http://localhost:8888/wp-content/uploads/2018/09/14079861_1202408189819777_4296465020285869305_n.jpg” use_background_color_gradient=”off” background_color_gradient_start=”#2b87da” background_color_gradient_end=”#29c4a9″ background_color_gradient_type=”linear” background_color_gradient_direction=”180deg” background_color_gradient_direction_radial=”center” background_color_gradient_start_position=”0%” background_color_gradient_end_position=”100%” background_color_gradient_overlays_image=”off” parallax=”off” parallax_method=”on” background_size=”cover” background_position=”center” background_repeat=”no-repeat” background_blend=”normal” allow_player_pause=”off” background_video_pause_outside_viewport=”on” text_shadow_style=”none” module_text_shadow_style=”none” box_shadow_style=”none” /]
wordpress php
3 Answers

You just have to leave out the line $this->no_render = true; and then implement the function render in the child Module.

user_22772830

I try to create the same module to add child items inside module. But I have another problem, when I click add child item I get the empty popup ((( like this https://prnt.sc/156jfev. I tried the same code as author

user_78312220

it's working for me you can try it,

Parents modules::

<?php
class GRDI_Barchart extends ET_Builder_Module {

    public $slug       = 'grdi_bar_chart';
    public $vb_support = 'on';
    

    protected $module_credits = array(
        'module_uri' => '',
        'author'     => '',
        'author_uri' => '',
    );

    public function init() {

        $this->name = esc_html__( 'Bar Chart', 'grdi-graphina-divi' );
        $this->plural     = esc_html__( 'Bar Chart', 'et_builder' );
        $this->slug       = 'grdi_bar_chart';
        $this->vb_support = 'on';
        $this->child_slug = 'grdi_bar_chart_child';

        $this->settings_modal_toggles = array(
            'general'  => array(
                'toggles' => array(
                    'main_content' => esc_html__( 'Graphina Text', 'dsm-supreme-modules-for-divi' ),
                ),
            ),
            'advanced' => array(
                'toggles' => array(
                    'separator' => array(
                        'title'    => esc_html__( 'Separator', 'dsm-supreme-modules-for-divi' ),
                        'priority' => 70,
                    ),
                    'image'     => array(
                        'title'    => esc_html__( 'Image', 'dsm-supreme-modules-for-divi' ),
                        'priority' => 69,
                    ),
                ),
            ),
        );
    }

    public function get_fields() {
        return array(
            'title' => array(
                'label'           => esc_html__( 'Title', 'grdi-graphina-divi' ),
                'type'            => 'text',
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Input your desired heading here.', 'simp-simple-extension' ),
                'toggle_slug'     => 'main_content',
            ),
            'content' => array(
                'label'           => esc_html__( 'Description', 'grdi-graphina-divi' ),
                'type'            => 'tiny_mce',
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Content entered here will appear inside the module.', 'grdi-graphina-divi' ),
                'toggle_slug'     => 'main_content',
            ),
        );
    }

    public function get_advanced_fields_config() {
        return array();
    }

    public function get_charts(){
        echo "charts";
    }

    public function render( $attrs, $content = null, $render_slug ) {

        wp_enqueue_script( 'graphina_apex_chart_script' );
        wp_enqueue_style( 'graphina_apex_chart_style' );
        wp_enqueue_style( 'graphina-public' );

        echo "<pre/>";


        $var = "<script>
            var options = {
                series: [{
                    name: 'Sales',
                    data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7, 19, 5, 13, 9, 17, 2, 7, 5]
                }],
                chart: {
                    type: 'bar',
                    height: 350
                  },
                  plotOptions: {
                    bar: {
                      borderRadius: 4,
                      horizontal: true,
                    }
                  },
                  dataLabels: {
                    enabled: false
                  },
                  xaxis: {
                    categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
                      'United States', 'China', 'Germany'
                    ],
                }
            };
            var chart = new ApexCharts(document.querySelector('#charts'), options);
            chart.render();
        </script>" ;

        $html = sprintf(
            '<h1>%1$s</h1>
            <p>%2$s</p>
            <div id="charts"></div>',
            $this->props['title'],
            $this->props['content']
        );

        echo $html ;
        echo $var ;

    }
}

new GRDI_Barchart;

Child Modules::

<?php

class GRDI_BarchartChild extends ET_Builder_Module {
    function init() {
        $this->name             = esc_html__( 'Bar Chart Items', 'et_builder' );
        $this->plural           = esc_html__( 'Bar Chart Items', 'et_builder' );
        $this->slug             = 'grdi_bar_chart_child';
        $this->vb_support       = 'on';
        $this->type             = 'child';
        $this->child_title_var  = 'title';
        $this->no_render        = true;
        $this->settings_text    = esc_html__( 'Bar Chart Settings', 'et_builder' );

        $this->settings_modal_toggles = array(
            'general'  => array(
                'toggles' => array(
                    'main_content' => et_builder_i18n( 'Text' ),
                ),
            ),
            'advanced' => array(
                'toggles' => array(
                    'icon'          => esc_html__( 'Icon', 'et_builder' ),
                    'toggle_layout' => esc_html__( 'Toggle', 'et_builder' ),
                    'text'          => array(
                        'title'    => et_builder_i18n( 'Text' ),
                        'priority' => 49,
                    ),
                ),
            ),
        );

    }

    function get_fields() {
        $fields = array(
            'child_title'       => array(
                'label'           => et_builder_i18n( 'Data Label' ),
                'type'            => 'text',
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Data Label', 'et_builder' ),
                'toggle_slug'     => 'main_content',
                'dynamic_content' => 'text',
                'hover'           => 'tabs',
                'mobile_options'  => true,
            ),
            'child_content'                        => array(
                'label'           => et_builder_i18n( 'Data Value' ),
                'type'            => 'text',
                'option_category' => 'basic_option',
                'description'     => esc_html__( 'Data Value', 'et_builder' ),
                'toggle_slug'     => 'main_content',
                'dynamic_content' => 'text',
                'hover'           => 'tabs',
                'mobile_options'  => true,
            ),
        );
        
        return $fields;
    }

    function render($attrs, $content, $render_slug){
        $output  = sprintf(
            '<h1>%1$s</h1>
            <p>%2$s</p>',
            $this->props['child_title'],
            $this->props['child_content']
        );

        return $output;
    }
}

if ( et_builder_should_load_all_module_data() ) {
    new GRDI_BarchartChild();
}
user_139717550
Related