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

[clmnsm]

@LucasMariniFalbo

Would you be willing to share a relevant snippet from nested-elements.js?

Unfortunately, the JS files served with your plugin are obfuscated by minification/babel.

[LucasMariniFalbo]

Sure. You can check it here: https://codefile.io/f/aSAcBkp3dX

[hvsombrilla]

Thank you very much. It works perfectly

[jbayona89]

The link does not work, can you post it again please?

[SamuelHadsall]

@hvsombrilla can you provide some guidance on how you got yours to work?

[SamuelHadsall]

I was able to get this working. It's all about loading js in the editor and you have to extend to the Widget_Nested_Base and yes utilize the content_template method. Here is the js I'm using

(function () {
  if (!window.elementor || !window.elementorCommon || !window.$e) return;

  elementorCommon.elements.$window.on('elementor/nested-element-type-loaded', function () {
    // 1) Grab Elementor’s NestedView base
    const NestedView = $e.components.get('nested-elements').exports.NestedView;

    // 2) Your view for nested children inside the slider
    class SRCarouselView extends NestedView {
      // Optional: keep a 1-based index around (helps with ARIA/labels if needed)
      filter(child, index) {
        child.attributes.dataIndex = index + 1;
        return true;
      }
      onAddChild(childView) {
        // Make each nested child behave like a swiper slide in the editor
        childView.$el.addClass('sp-e-item sp-e-wrp swiper-slide');
      }
    }

    // 3) The nested element type descriptor for your widget
    class SRNestedSlider extends elementor.modules.elements.types.NestedElementBase {
      getType() { return 'sr-nested-slider'; }      // MUST match PHP get_name()
      getView() { return SRCarouselView; }
    }

    // 4) Register with the elements manager (UiCore’s way)
    elementor.elementsManager.registerElementType(new SRNestedSlider());
  });
})();

[dylantran251]

Did it work? I am having the same problem. Can I have the source code for reference?