Question posted in
The full documentation can be found here.

Custom divi builder child module not rendering

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” /]
Tags:

4

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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();
}
    Login or Signup to reply.
  4. 0

    I was having similar issue to Mikael, where the child’s setting looked like:
    enter image description here

    Just in case anyone is having similar issue, i realised its because the child’s module wasn’t being loaded. Since i was using a custom extension, there was a file called loader.phpin my extension that was responsible for loading the module files and it was loading the parent module file but skipping the child because of the pesky if statement with preg_match.

    $module_files = glob( __DIR__ . '/modules/**/*.php' );

foreach ( (array) $module_files as $module_file ) {
    if ( $module_file && preg_match( "//modules/b([^/]+)/\1.php$/", $module_file ) ) {
        require_once $module_file;
    }
}

    if you replace it with:

    foreach ( (array) $module_files as $module_file ) {
    // if ( $module_file && preg_match( "//modules/b([^/]+)/\1.php$/", $module_file ) ) {
        require_once $module_file;
    //}
}

    then it worked for me 🙂
    Really hope that saves someone the 3 hours of debugging i spent.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search