CODEWITHSUNDEEP
javascriptphpunderscore.jselementorunderscore.js-templating
CodeOneOnOne
CodeOneOnOne

Reputation: 347

Elementor Repeater Control Label from a Select Control Label

I have a REPEATER control that has one SELECT Control which is used to select a WordPress Page. I want to ensure that the repeater Label is the Page Title. My script returns a Javascript object instead of the page title. Here is my code:

` $page_list = \Core_Elementor_Extensions::core_get_pages();

    $page_list_json = json_encode($page_list);

    $repeater->add_control(
        'posts_pages',
        [
            'label' => esc_html__('Pages', 'core'),
            'type' => Controls_Manager::SELECT,
            'options' => $page_list,
            'label_block' => true,
            'multiple' => false,
        ]
    );

    $this->add_control(
        'core_page_list',
        [

            'label' => __('Content', 'core'),
            'type' => Controls_Manager::REPEATER,
            'fields' => $repeater->get_controls(),
            'title_field' => "<# "
                . "let labels = #>" . $page_list_json . "<# ; " // Now the labels are available to the javascript
                . "let key =#>" . '{{ posts_pages }}' . "<#  ;"
                . "let label = labels[key]; "
                . "#>"
                . "{{{ label }}}",
        ]
    );`

The {{{ label }}} returns {"11":"Page Title", "22":"Page Title 2"}88888 the 8888 is actually the '{{ posts_pages }}' in the the_field value which was trying tp pass as the KEY to access the returned Js Object above.

I am not really familiar with underscorejs templating.

Upvotes: 0

Views: 688

Answers (1)

CodeOneOnOne
CodeOneOnOne

Reputation: 347

Here is the solution that worked:

 //Use Json Encode to convert array or object to JSON representation which will be like a javascript object
 $page_list_json = json_encode($page_list); 
//Get your array/object in my case pages
   $page_list_json = $page_list;
   $repeater->add_control(
        'posts_pages',
        [
            'label' => esc_html__('Pages', 'core'),
            'type' => Controls_Manager::SELECT,
            'options' => $page_list,
            'label_block' => true,
            'multiple' => false,
        ]
    );

  
$this->add_control(
        'core_page_list',
        [

            'label' => __('Content', 'core'),
            'type' => Controls_Manager::REPEATER,
            'fields' => $repeater->get_controls(),
            'title_field' => "<# "
                . "let labels = $page_list_json; " // Now the labels are available to the javascript
                . "let label = labels[posts_pages]; "// Get the value of the selected page
                . "#>"
                . "{{{ label }}}",//Show the value at the repeater title section

        ]
    );

Upvotes: 0

Related Questions