Create Visual Composer with param_group

How to Create Repeater Elements Using Visual Composer API

Learn how to create repeater fields for custom element of Visual Composer & WP Bakery. To achieve this, we need to write 2 functions. First one for create new element, Second one for add shortcode.

function will be hooked to these specific action:

Sample : 01

---

//Backend visual composer add-on code 

vc_map(array(
  'name' => 'Accordions',
  'base' => 'maxima_accordion',
  'category' => 'Maxima',
  'params' => array(
    array(
      'type' => 'textfield',
      'name' => __('Title', 'rrf-maxima'),
      'holder' => 'div',
      'heading' => __('Title', 'rrf-maxima'),
      'param_name' => 'title',
    ),
    array(
      'type' => 'param_group',
      'param_name' => 'values',
      'params' => array(
        array(
          'type' => 'textfield',
          'name' => 'label',
          'heading' => __('Heading', 'rrf-maxima'),
          'param_name' => 'label',
        ),
        array(
          'type' => 'textarea',
          'name' => 'Content',
          'heading' => __('Content', 'rrf-maxima'),
          'param_name' => 'excerpt',
        )
      )

    ),
  ),

));


//shortcode



function maxima_accordion_shortcode($atts){
  extract(shortcode_atts(array(
    'title' => '',
    'values' => '',
  ), $atts));

  $list = '<h4>'.$title.'</h4>';


  $values = vc_param_group_parse_atts($atts['values']);

  $new_accordion_value = array();
  foreach($values as $data){
    $new_line = $data;
    $new_line['label'] = isset($new_line['label']) ? $new_line['label'] : '';
    $new_line['excerpt'] = isset($new_line['excerpt']) ? $new_line['excerpt'] : '';

    $new_accordion_value[] = $new_line;

  }

  $idd = 0;
  foreach($new_accordion_value as $accordion):
  $idd++;
    $list .=
    '<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title">
						<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse'.$idd.'">
						'.$accordion['label'].'
						<span class="fa fa-plus"></span>
						</a>
					</h4>
				</div>
				<div id="collapse'.$idd.'" class="panel-collapse collapse">
					<div class="panel-body">
						<p>'.$accordion['excerpt'].'</p>
					</div>
				</div>
			</div>';

  endforeach;
  return $list;
  wp_reset_query();

}
add_shortcode('maxima_accordion', 'maxima_accordion_shortcode');

---

Sample : 02

The code

<?php
  add_action('vc_before_init', 'box_repeater_items_funct');

  function box_repeater_items_funct() {
      vc_map(
          array(
                "name" => __("Box Repeater", "my-text-domain"), // Element name
                  "base" => "box_repeater", // Element shortcode
                  "class" => "box-repeater",
                  "category" => __('Content', 'my-text-domain'),
                  'params' => array(
                      array(
                          "type" => "textfield",
                          "holder" => "div",
                          "class" => "",
                          "admin_label" => true,
                          "heading" => __("Headig", "my-text-domain"),
                          "param_name" => "box_repeater_heading",
                          "value" => __("", "my-text-domain"),
                          "description" => __('Add heading here', "my-text-domain")
                      ),
                      array(
                        'type' => 'param_group',
                        'param_name' => 'box_repeater_items',
                        'params' => array(
                           array(
                              "type" => "attach_image",
                              "holder" => "img",
                              "class" => "",
                              "heading" => __( "Image", "my-text-domain" ),
                              "param_name" => "box_repeater_items_img",
                              "value" => __( "", "my-text-domain" ),
                          ),
                           array(
                              "type" => "textarea",
                              "holder" => "div",
                              "class" => "",
                              "admin_label" => true,
                              "heading" => __("Title", "my-text-domain"),
                              "param_name" => "box_repeater_items_title",
                              "value" => __("", "my-text-domain"),
                          ),
                           array(
                              "type" => "textarea",                            
                              "class" => "",
                              "admin_label" => true,
                              "heading" => __("Description", "my-text-domain"),
                              "param_name" => "box_repeater_items_description",
                              "value" => __("", "my-text-domain"),
                          ),
                       )
                    ),                    
                  )
              )
      );
  }
?>

Displaying Fields Values on the Frontend with shortcode.

Visual Composer & WP Bakery are based on shortcode. So we have to create shortcode with base value. On above code base value is box_repeater so shortcode will like below. You need to add the following function to functions.php file.

<?php
  add_shortcode('box_repeater', 'box_repeater_funct');

  function box_repeater_funct($atts) {
      ob_start();
      $atts = shortcode_atts(array(
          'box_repeater_heading'=>'',
          'box_repeater_items' =>'',        
      ), $atts, 'box_repeater');

      $heading = $atts['box_repeater_heading'];  
      $items = vc_param_group_parse_atts($atts['box_repeater_items']);

      ?>
      <div class="box-repeater">

          <?php  echo (!empty($heading))? '<h2>'.$heading.'<h2>': ''; ?>

          <?php if($items) { ?>
              <div class="box-repeater-items">
                  <?php  foreach ($items as  $item) { ?>
                      <div class="item-box">
                          <?php echo wp_get_attachment_image($item['box_repeater_items_img'], 'full'); ?>
                          <div class="info-box">
                              <h2><?php echo $item['box_repeater_items_title']; ?></h2>
                              <p><?php echo $item['box_repeater_items_description']; ?></p>
                          </div>
                      </div>
                  <?php } ?>
              </div>
          <?php } ?>

      </div>
      <?php
      $result = ob_get_clean();
      return $result;
  }
?>

ref site:

https://codexcoach.com/create-repeater-elements-using-visual-composer-api/