Control Nested Repeater

[biffly]

Start a discussion

I'm trying to create a widget that has functionality similar to that of tabs or accordion, with a repeater control that adds a "container" for each element, but I can't do it, I would appreciate any help or guidance you can give me.

This is part of my code.

use Elementor\Controls_Manager;
use Elementor\Modules\NestedElements\Base\Widget_Nested_Base;
use Elementor\Modules\NestedElements\Controls\Control_Nested_Repeater;
use Elementor\Plugin;
use Elementor\Repeater;
use Elementor\Utils;

if( !defined('ABSPATH') ) exit;

class Test_Nested_Widget extends Widget_Nested_Base {
	public function get_name(){ return 'test_nested_widget'; }
	public function get_title(){ return __('Test widget', 'elementor'); }
	public function get_icon(){ return 'wpl-icon wpl-horizontal'; }
    
    public function show_in_panel(){
        return Plugin::$instance->experiments->is_feature_active('nested-elements');
    }

    protected function register_controls(){
        $this->start_controls_section('test_section_layout', ['label' => __('Layout', 'elementor')]);
            $repeater = new Repeater();
            $repeater->add_control(
                'item_title',
                [
                    'label'         => esc_html__('Title', 'elementor'),
                    'type'          => Controls_Manager::TEXT,
                    'default'       => esc_html__('Item Title', 'elementor'),
                    'placeholder'   => esc_html__('Item Title', 'elementor'),
                    'label_block'   => true,
                    'dynamic'       => ['active' => false,],
                ]
            );
            if( Plugin::$instance->experiments->is_feature_active('nested-elements') ){
                $this->add_control(
                    'items',
                    [
                        'label'         => __('Items', 'elementor'),
                        'type'          => Control_Nested_Repeater::CONTROL_TYPE,
                        'fields'        => $repeater->get_controls(),
                        'default'       => [
                            [
                                'item_title' => esc_html__('Item #1', 'elementor'),
                            ],
                            [
                                'item_title' => esc_html__('Item #2', 'elementor'),
                            ]
                        ],
                        'title_field'   => '{{{ item_title }}}',
                        'button_text'   => 'Add Item',
                    ]
                );
            }else{
                $this->add_control(
                    'panel_alert_not_experimental',
                    [
                        'type'          => \Elementor\Controls_Manager::ALERT,
                        'alert_type'    => 'warning',
                        'heading'       => __('Requirements', 'elementor'),
                        'content'       => __('You must activate "Nested Elements" in the settings section. Elementor -> Settings -> Features', 'elementor')
                    ]
                );
            }

        $this->end_controls_section();
    }

    protected function render(){
        if( !Plugin::$instance->experiments->is_feature_active('nested-elements') ){
            echo 'Widget disabled';
        }else{
            $settings = $this->get_settings_for_display();
            $items = $settings['items'];
            $id_int = substr($this->get_id_int(), 0, 3);
            $items_title_html = '';

            $this->add_render_attribute('test-nested-widget', 'class', 'test-nested-widget');

            foreach( $items as $index => $item ){
                $items_count = $index + 1;
                $item_setting_key = $this->get_repeater_setting_key('item_title', 'items', $index);
                $item_summary_key = $this->get_repeater_setting_key('item_summary', 'items', $index);
                
                $item_title = $item['item_title'];
                
                //atributos cada item
                $item_classes = ['test-nested-widget-item'];
                $item_id = 'test-nested-widget-item-'.$id_int.$index;
                $this->add_render_attribute($item_setting_key, [
                    'id'            => $item_id,
                    'class'         => $item_classes,
                    'aria-label'    => $item_title
                ]);

                $this->add_render_attribute($item_summary_key, [
                    'class' => ['test-nested-widget-title'],
                ]);

                $item_render_attributes = $this->get_render_attribute_string($item_setting_key);

                // items content.
                ob_start();
                $this->print_child( $index, $item_id );
                $item_content = ob_get_clean();
                ob_start();
                ?>
                <div <?php echo wp_kses_post($item_render_attributes)?>>
                    <p><?php echo $item_title?></p>
                    <?php echo $item_content;?>
                </div>
                <?php
                $items_title_html .= ob_get_clean();
            }
        ?>
            <div <?php $this->print_render_attribute_string('test-nested-widget'); ?>>
                <?php echo $items_title_html;?>
            </div>
		<?php
        }
    }

    public function print_child($index, $item_id=null){
		$children = $this->get_children();
		if( !empty($children[$index]) ){
			// Add data-tab-index attribute to the content area.
			$add_attribute_to_container = function($should_render, $container) use ($item_id){
				$this->add_attributes_to_container($container, $item_id);
				return $should_render;
			};

			add_filter('elementor/frontend/container/should_render', $add_attribute_to_container, 10, 3);
			$children[$index]->print_element();
			remove_filter('elementor/frontend/container/should_render', $add_attribute_to_container);
		}
	}
    protected function add_attributes_to_container($container, $item_id){
		$container->add_render_attribute('_wrapper', [
			'role'              => 'region',
			'aria-labelledby'   => $item_id,
		]);
	}
}

[louiswol94]

You need a function content_template() for the Editor.

[biffly]

I think that is not the solution at all, since I added the function to my code and it still does not work.

protected function content_template() {
	    ?>
		<div class="test-nested-widget" aria-label="">
            <# 
            if( settings['items'] ){
                const elementUid = view.getIDInt().toString().substring(0, 3),
            
                _.each( settings['items'], function(item, index){
                    const itemCount = index + 1,
					itemUid = 'test-nested-widget-item-' + elementUid + index,
					itemWrapperKey = itemUid,


                    const itemWrapperAttributes = {
						'id'            : itemUid,
						'class'         : ['test-nested-widget-item'],
                        'aria-label'    : item.item_title
					};

                    view.addRenderAttribute(itemWrapperKey, itemWrapperAttributes);
            #>
            <div {{{ view.getRenderAttributeString(itemWrapperKey) }}}>
                <p>{{{ item.item_title }}}</p>
            </div>
            <#
                });
            }
            #>
        </div>
	    <?php
	}

[louiswol94]

You needed the content_template() anyhow for the widget to function correctly in the Editor. The repeater actions add/delete/duplicate/sort uses this function to update the widget.

You also need a function get_default_children_placeholder_selector() so that the Editor knows where to push the container into.

I suggest studying the Nested Tabs and adding the same functions that you see there as much as possible.

[LucasMariniFalbo]

@biffly have you been able to implement it? I've been trying these last few days to acompplish the same result and would really appreaciate a feedback from you.

[biffly]

No, I couldn't, it's frustrating given the very little documentation on the subject.

[pulla]

I’m experiencing the same issue and have been working on a solution for some time. Has anyone found a fix? It seems that $this->children() isn’t retrieving any data.

How come they don't have any docs for it?

[LucasMariniFalbo]

Me and my boss we've discovered how the nesting works and implemented it in some widgets on the Uicore Elements plugin. You can download the plugin on the Wordpress Repository and check it out. For the nesting to work you need some JS.

[louiswol94]

Does this help?

https://github.com/elementor/elementor/blob/main/docs/modules/nested-tabs/index.md