-
-
Save pavelthq/b7948f5951755e8ddcd2 to your computer and use it in GitHub Desktop.
(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) |
<?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>', | |
) | |
); |
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
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" => ''
)
),
));
Thank you!