Nested Item - Visual Composer

Question

I try create new widget for Visual Composer versrion 5.2

i found this https://wpbakery.atlassian.net/wiki/spaces/VC/pages/524362/Nested+Shortcodes+container

So i create some example widget:

    <?php
/*
Plugin Name: Example nested item
Plugin URI: http://wpbakery.com/vc
Description:
Version: 0.1.1
Author: PG
License: GPLv2 or later
*/


// don't load directly
if (!defined('ABSPATH')) die('-1');

class ExampleNested {

    public function __construct()
    {
        // We safely integrate with VC with this hook
        add_action('vc_before_init', [$this, 'initVC']);

        // Use this when creating a shortcode addon
        add_shortcode('your_gallery', [$this, 'renderGallery']);
        add_shortcode('single_img', [$this, 'renderSingleImg']);
    }

    public function renderGallery()
    {
        /**
         *
         */
    }

    public function renderSingleImg()
    {
        /**
         *
         */
    }

    public function initVC() {
        vc_map( array(
            "name" => __("Your Gallery", "my-text-domain"),
            "base" => "your_gallery",
            "as_parent" => array('only' => 'single_img'), // Use only|except attributes to limit child shortcodes (separate multiple values with comma)
            "content_element" => true,
            "show_settings_on_create" => false,
            "is_container" => true,
            "params" => array(
                // add params same as with any other content element
                array(
                    "type" => "textfield",
                    "heading" => __("Extra class name", "my-text-domain"),
                    "param_name" => "el_class",
                    "description" => __("If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.", "my-text-domain")
                )
            ),
            "js_view" => 'VcColumnView'
        ) );
        vc_map( array(
            "name" => __("Gallery Image", "my-text-domain"),
            "base" => "single_img",
            "content_element" => true,
            "as_child" => array('only' => 'your_gallery'), // Use only|except attributes to limit parent (separate multiple values with comma)
            "params" => array(
                // add params same as with any other content element
                array(
                    "type" => "textfield",
                    "heading" => __("Extra class name", "my-text-domain"),
                    "param_name" => "el_class",
                    "description" => __("If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.", "my-text-domain")
                )
            )
        ) );
    }
}

new ExampleNested();

//Your "container" content element should extend WPBakeryShortCodesContainer class to inherit all required functionality
if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
    class WPBakeryShortCode_Your_Gallery extends WPBakeryShortCodesContainer {
    }
}
if ( class_exists( 'WPBakeryShortCode' ) ) {
    class WPBakeryShortCode_Single_Img extends WPBakeryShortCode {
    }
}

It’s like that :( i can’t edit or add nested element :(

Standard Visual Composer Tabbed Content works fine ( see on screen “Zakladki” )

Answer 1

example of nested element in VC

vc_map(array(
"name" => __("Slideshow", "my-text-domain"),
"base" => "slideshow_content",
"as_parent" => array('only' => 'slideshow_item_content'),
"content_element" => true,
"show_settings_on_create" => false,
"is_container" => true,
"js_view" => 'VcColumnView',
'icon' => get_template_directory_uri() . '/vc-elements/img/slideshow.png',
"category" => array('my-text-domain Elements', 'Content'),
"params" => array(
    array(
        "type" => "textfield",
        "heading" => __("Class", "my-text-domain"),
        "param_name" => "slider_class"
    ),
),)); if (!function_exists('slideshow_content')) {
function slideshow_content($atts, $content = null)
{
    extract(shortcode_atts(array(
        'slider_class' => '',

    ), $atts));
    $output =' output goes here';
    return $output;
}

add_shortcode('slideshow_content', 'slideshow_content'); } vc_map(array(
"name" => __("Slider Item", "my-text-domain"),
"base" => "slideshow_item_content",
"content_element" => true,
"as_child" => array('only' => 'slideshow_content'),
"show_settings_on_create" => true,
'icon' => get_template_directory_uri() . '/vc-elements/img/slideshow-add.png',
"params" => array(
    array(
        "type" => "textfield",
        "heading" => __("Title", "my-text-domain"),
        "param_name" => "title"
    ),
    array(
        'type' => 'attach_image',
        'heading' => __('Add Image', 'my-text-domain'),
        'param_name' => 'item_img',
    ),
), )); if (!function_exists('slideshow_item_content')) {
function slideshow_item_content($atts, $content = null)
{
    extract(shortcode_atts(array(
        'title' => '',
        'item_img' => '',
    ), $atts));
    $image = wp_get_attachment_image_src($item_img, 'full');
    $image_src = $image['0'];
    $output = '<li><img src="'.$image_src.'" alt=""></li>';
    return $output;
}
add_shortcode('slideshow_item_content', 'slideshow_item_content'); } if (class_exists('WPBakeryShortCodesContainer')) {
class WPBakeryShortCode_slideshow_content extends WPBakeryShortCodesContainer
{
}} if (class_exists('WPBakeryShortCode')) {
class WPBakeryShortCode_slideshow_item_content extends WPBakeryShortCode
{
} }