Repeater fields in visual composer elements with ACF or JQuery

6 Views

I am trying to create a repeat field to be able to add more required text fields in a visual composer element plugin but not sure how I can add this or if it is possible. I need it to be able to add more text fields that the user might require.

The following code adds a text field but I don’t know how to make it so the user can add the fields they require. The plugin is going to allow the user to add email,phone,name,social media and more items that they require.

Read More

This is the custom field that visual composer will load and can add our custom built field. 

array(
            "type" => "my_param",
            "holder" => "div",
            "class" => "",
            "heading" => __("Flipping text", "js_composer"),
            "param_name" => "fliping_text",
            "value" => '',
            "description" => __( "Enter text and flip it", 'my-text-domain' ),
     )

My custom field would be like something like this in the visual composer but with the correct settings. 

    // repeat fields
add_shortcode_param( 'my_param', 'my_param_settings_field', plugin_dir_url( __FILE__ ).'vc_extend/js/elements/elements.js' );
function my_param_settings_field( $settings, $value ) {
   return '<div class="my_param_block">'
             .'<input name="' . esc_attr( $settings['param_name'] ) . '" class="wpb_vc_param_value wpb-textinput ' .
             esc_attr( $settings['param_name'] ) . ' ' .
             esc_attr( $settings['type'] ) . '_field" type="text" value="' . esc_attr( $value ) . '" />'
         .'</div>'
         .'<button class="flip-input-text">Flip</button>'; // New button element
}

Here is a link to repeater fields with jQuery http://jsfiddle.net/Unfxn/27/

I am not sure how or if the new fields would be stored as the array for my_param would maybe not load them all once created by visual composer if the element was to be edited again.

Post Views: 6

Related posts

1 comment

  1. If you were to let the user create any amount of textfields, that could be solved like this. Let’s say you’ve created a Repeater-field with the following rows:

    Heading – Group – Description

    Then you could register the textfields using the following code:

    <?php

// check if the repeater field has rows of data
if( have_rows('repeater_textfields') ):

    // loop through the rows of data
    while ( have_rows('repeater_textfields') ) : the_row();

    // store sub fields in variables
    $heading = the_sub_field('textfields_heading');
    $group = the_sub_field('textfields_group');
    $description = the_sub_field('textfields_description');

    // build the array
    $params = 
        array(
            "type" => "textfield",
            "holder" => "div",
            "class" => "",
            "heading" => __( $heading, "my-text-domain" ),
            "param_name" => "foo",
            "group" => __( $group, 'my-text-domain' ),
            "value" => __( "Default value.", "my-text-domain" ),
            "description" => __( $description, "my-text-domain" )
        );

    // register the textfield
    vc_map( $params );

    endwhile;

endif;

?>

    The name of your repeater and repeater sub fields would of course have to be edited to match the ones you’re using.

Comments are closed.