Visual Composer: Custom markup element example

custom_view.js

(function($) {
	window.VcCustomElementView = vc.shortcode_view.extend( {
		elementTemplate: false,
		$wrapper: false,
		changeShortcodeParams: function ( model ) {
			var params;

			window.VcCustomElementView.__super__.changeShortcodeParams.call( this, model );
			params = _.extend( {}, model.get( 'params' ) );
			if ( ! this.elementTemplate ) {
				this.elementTemplate = this.$el.find( '.vc_custom-element-container' ).html();
			}
			if ( ! this.$wrapper ) {
				this.$wrapper = this.$el.find( '.wpb_element_wrapper' );
			}
			if ( _.isObject( params ) ) {
				var template = vc.template( this.elementTemplate, vc.templateOptions.custom );
				this.$wrapper.find( '.vc_custom-element-container' ).html( template( { params: params } ) );
			}
		}
	} );
})(window.jQuery)

mapping

<?php
vc_map(array(
	'name' => __( 'Custom Markup', 'js_composer' ),
	'base' => 'vc_custom_markup',
	'category' => array(
		__( 'Content', 'js_composer' ),
	),
	'description' => __( 'Custom markup element', 'js_composer' ),
	'params' => array(
		array(
			'type' => 'textfield',
			'param_name' => 'style',
			'value' => 'custom style!',
  	    'heading' => 'Style',
  	  ),
  	  array(
	      'type' => 'textfield',
	      'param_name' => 'color',
	      'value' => 'custom color!',
  	    'heading' => 'Color',
  	  ),
  	  array(
	      'type' => 'textfield',
	      'param_name' => 'title',
	      'value' => 'custom title!',
  	    'heading' => 'Title',
  	  ),
  	),
  	'js_view' => 'VcCustomElementView',
  	'custom_markup' => '<div class="vc_custom-element-container">Style: "{{ params.style }}", Color: "{{ params.color }}", Title: "{{{ params.title }}}"</div>',
  )
);

Thank you!

changeShortcodeParams seems to be removed now from VC core.

When I try that I get the following error which I couldn’t overcome:

TypeError: Cannot read property 'ownerDocument' of null
    at Function.fa.contains (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.8:2)
    at ja (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.8:3)
    at Ha (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.8:3)
    at a.fn.init.append (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.8:3)
    at a.fn.init.<anonymous> (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.8:3)
    at Y (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.8:3)
    at a.fn.init.html (load-scripts.php?c=1&load[]=jquery-core,jquery-migrate,utils,plupload&ver=4.8:3)
    at n.changeShortcodeParams (custom_view.js?ver=5.1.1:20)
    at n.appendShortcode (backend.min.js?ver=5.1.1:7)
    at n.<anonymous> (backend.min.js?ver=5.1.1:7)

@erensuleymanoglu and @pkostadinov-2create I have updated the gist and now it works fine in 5.4.4 version and 4.9 version of wordpress.

Brilliant! Thanks.

This was very helpful. Anyone know of a similar example of custom_markup for dealing with custom elements that contain child elements? (aka, classes that extend WPBakeryShortCodesContainer ?)

where must custom_view.js be placed?

@wumble it should be enqueued by plugin manually

Hey guys any tips on how to use this on vc_link type?

vc_link | Link selection. Then in shortcodes html output, use $href = vc_build_link( $href ); to parse link attribute

https://kb.wpbakery.com/docs/inner-api/vc_map/

It took me a long time to find how to properly enqueue the script. This helped:

add_action( 'admin_enqueue_scripts', function() {
    wp_enqueue_script( 'YOUR_SCRIPT_NAME', plugin_dir_url( __FILE__ ) . 'vc-custom-element-view.js', array('vc-backend-min-js'), '1.0', true );
});

I know this has been for a long time, but anyone who came across can use this implementation:

---

vc_map(array(

"name" => __("Shortcode_Name" "TEXT_DOMAIN"),

"base" => "Shortcode_Name",

"class" => "Shortcode_Name",

"icon" => "path/to/icon",

"admin_enqueue_css" => plugin_dir_url(__FILE__) . '../../assets/css/style.css',

"admin_enqueue_js" => plugin_dir_url(__FILE__) . '../../assets/js/script.js',

'js_view' => 'VcCustomElementView',

'custom_markup' => '<div class="vc_custom-element-container"><span style="background-color:{{{params.title_color_bg_custom}}}; color:{{{params.title_color_custom}}}; font-size:{{{params.title_font_size}}}px; font-family:{{{params.title_font_art}}};">{{{ params.title }}}</span></div>',

"params" => array(

	array(
		"type" => "textfield",
		"holder" => "div",
		"heading" => __("Title", "LIS_TEXT_DOMAIN"),
		"param_name" => "title",
		"value" => ''
	)
),

));