Mapping Nested Shortcodes in Visual Composer

Working with nested shortcode with visual composer is super easy. Here is sample

// Shortcode 
// source : https://wpbakery.atlassian.net/wiki/pages/viewpage.action?pageId=524362

if(!function_exists('carousel_content')){
    function carousel_content( $atts, $content = null ) {
       return '<div class="owl-carousel content-carousel content-slider">'.do_shortcode($content).'</div>';
    }
    add_shortcode('carousel_content', 'carousel_content');
}

if(!function_exists('single_carousel_content')) {
	function single_carousel_content( $atts, $content =  null) {
		extract(shortcode_atts(array(
			'title' => 'Flexible & Customizable',
			'description' => '',
			'url' => '',
			'img' => ''
		), $atts));
        
        $url = ($url=='||') ? '' : $url;
		$url = ps_build_link( $url );
		$a_link = $url['url'];
		$a_title = ($url['title'] == '') ? '' : 'title="'.$url['title'].'"';
		$a_target = ($url['target'] == '') ? '' : 'target="'.$url['target'].'"';
        $button = $a_link ? '<a class="btn btn-md btn-black" href="'.$a_link. '" '.$a_title.' '.$a_target.'>'.$url['title'].'</a>' : '';

        $image = wp_get_attachment_image_src( $img, 'full');
		$image_src = $image['0'];
        
        
        $output = '<div class="item">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6 mb-sm-30">
                                <img src="'.$image_src.'" alt="" />
                            </div>
                            <div class="col-md-5 col-md-offset-1">
                                <h3>'.$title.'</h3>
                                <div class="spacer-15"></div>
                                '.$description.'
                                <div class="spacer-15"></div>
                                '.$button.'
                            </div>
                        </div>
                    </div>
                </div>'; 
        
        return $output;
	}
	add_shortcode('single_carousel_content', 'single_carousel_content');		
}




// Mapping 
vc_map( array(
    "name" => __("Carousel Content", "mozel"),
    "base" => "carousel_content",
    "as_parent" => array('only' => 'single_carousel_content'),
    "content_element" => true,
    "show_settings_on_create" => false,
    "is_container" => true,
    "js_view" => 'VcColumnView',
    "category" =>array('Mozel', 'Content')
) );

vc_map( array(
    "name" => __("Single Carousel Content", "mozel"),
    "base" => "single_carousel_content",
    "content_element" => true,
    "as_child" => array('only' => 'carousel_content'),
    "show_settings_on_create" => true,
    "params" => array(
        array(
            "type" => "textfield",
            "heading" => __("Title", "mozel"),
            "param_name" => "title"
        ), 
        array(
            "type" => "textarea",
            "heading" => __("Description", "mozel"),
            "param_name" => "description"
        ),
        array(
			'type' => 'vc_link',
			'heading' => __( 'Button', 'mozel' ),
			'param_name' => 'url',
		),
        array(
			'type' => 'attach_image',
			'heading' => __( 'Add Image', 'mozel' ),
			'param_name' => 'img',
		)
    ),
    ) );

if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {
    class WPBakeryShortCode_Carousel_Content extends WPBakeryShortCodesContainer {
    }
}
if ( class_exists( 'WPBakeryShortCode' ) ) {
    class WPBakeryShortCode_Single_Carousel_Content extends WPBakeryShortCode {
    }
}

Awesome!
I'm getting "Fatal error: Call to undefined function ps_build_link()" error can you help me?

Thanks!

@mohitsadaria I think it's vc_build_link()

Cheers

Thanks!

Thank You So so so so so soooooo much maann 😄 I was almost kill myself because of this stupid wordpress plugin 😂 Thank You very much 👍

👍👍👍👍👍👍👍👍
and Thanks @rmbarros

Thank you!

Thank you

How to add parent for all VC shortcodes (custom & default)?

Hi. How do I make use of tabs inside vc accordion.

"super easy"

I was looking for a solution of nested containers for WPBakery, like <div>s and I found this (which is not what I was looking for, because obviously you can not nest same element into itself in WPB and that's crazy limiting),
but still I have a question: why would you do this?
Why not just create one custom element that will include that wrapper inside and items in repeater (or how it's called)?
Does this solution have any pros comparing to what I wrote?